/*! メカノAI (MECHANO-AI) © 2026 Cablueie. All Rights Reserved. 無断複製・改変・再配布を禁じます。 */
:root{
  --bg:#F2F5F9; --panel:#FFFFFF; --panel2:#EAF0F7; --line:#D5DDE8;
  --txt:#1B2530; --dim:#5E6B7C; --amber:#2563EB; --amber-dk:#B9CDF2;
  --ok:#15803D; --alert:#DC2626; --cyan:#0E7490;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 個人モード: クラウド同期・契約/解約を非表示(BYOK・単独端末で使う個人版) */
body.personalMode #secCloudSync,body.personalMode #cloudPlan{display:none!important}
/* 法人版はAIがサーバー(契約)側のキーで動くため、個人用APIキーの設定は不要。
   メカ君相談(Gemini)・文字読み取り(Vision)の設定は個人モードのときだけ表示する。 */
body:not(.personalMode) #secAiKey,body:not(.personalMode) #secVisionKey{display:none!important}
/* 個人/法人 切替スイッチ(運営管理ページ) */
.modeSwitch{display:flex;gap:6px;margin-top:10px;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:4px}
.modeSwitch button{flex:1;border:0;background:transparent;color:var(--dim);font-size:12.5px;font-weight:700;
  padding:7px 0;border-radius:7px;cursor:pointer}
.modeSwitch button.on{background:var(--amber);color:#fff;box-shadow:0 1px 4px rgba(37,99,235,.3)}
.modeSwitchNote{font-size:11px;color:var(--dim);margin-top:5px;line-height:1.5}
/* 個人モードのAPIキー案内バナー(既定は非表示、個人モードのみ表示) */
#personalKeyBanner{display:none}
body.personalMode #personalKeyBanner{display:block;margin:14px 0 0;padding:12px 14px;
  background:linear-gradient(180deg,#EAF6FA,#DCEEF5);border:1px solid #9FCEDD;border-radius:12px}
.keyBannerTtl{font-weight:800;font-size:14px;color:var(--cyan)}
.keyBannerBody{font-size:12px;color:var(--txt);margin-top:5px;line-height:1.6}
/* 個人モードではキー設定セクションを強調 */
body.personalMode #secAiKey{border:1.5px solid var(--cyan);border-radius:12px;padding:2px 10px;background:var(--panel)}
/* 個人モード: 紹介タブを隠し、お問い合わせ(既定は非表示)を表示 */
body.personalMode #secShareApp{display:none}
#secContact{display:block}   /* お問い合わせ(AIサポートチャット+FAQ)は全モードで表示 */
.faqItem{border:1px solid var(--line);border-radius:10px;margin-top:8px;background:var(--panel)}
.faqItem>summary{cursor:pointer;padding:10px 12px;font-weight:700;font-size:13px;list-style:none}
.faqItem>summary::-webkit-details-marker{display:none}
.faqItem>summary::before{content:"Q ";color:var(--cyan);font-weight:800}
.faqItem[open]>summary{border-bottom:1px solid var(--line)}
.faqA{padding:10px 12px;font-size:12.5px;line-height:1.7;color:var(--txt)}
/* さりげない更新トースト */
#appToast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,12px);z-index:300;
  background:rgba(27,37,48,.94);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:10px 16px;border-radius:14px;box-shadow:0 3px 12px rgba(0,0,0,.25);line-height:1.5;
  white-space:pre-line;text-align:left;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:82%}
#appToast.show{opacity:1;transform:translate(-50%,0)}
/* 言語トグル(小さく目立たない・ヘッダー上。固定ではなくスクロールで一緒に流れ、ナビと被らない) */
#langToggle{position:absolute;top:12px;right:2px;z-index:150;background:rgba(255,255,255,.85);border:1px solid var(--line);color:var(--dim);
  font-size:11px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:999px;cursor:pointer;backdrop-filter:blur(4px);opacity:.72}
#langToggle:active{transform:scale(.94)}
/* ホームの「前回の車両」チップ(小さく目立たない) */
.lastVeh{display:block;width:100%;margin-top:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--dim);font-size:12.5px;font-weight:600;text-align:left;padding:8px 12px;cursor:pointer}
.lastVeh b{color:var(--txt);font-weight:700}
.lastVeh:active{transform:scale(.99);border-color:var(--amber)}
/* 修理タブ: 型式(車種記号)コピー */
.copyKata{display:inline-block;margin-top:10px;background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--dim);font-size:12px;font-weight:600;padding:4px 12px;cursor:pointer}
.copyKata b{color:var(--cyan);font-family:'Chakra Petch','Noto Sans JP',monospace;letter-spacing:.03em}
.copyKata:active{transform:scale(.97)}
.copyRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.copyRow .copyKata{margin-top:0}
.kataYear{font-size:12.5px;color:var(--dim);font-weight:600}
/* 起動時の言語選択バー(小さめ・中央上) */
#langPick{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(27,37,48,.92);color:#fff;font-size:12.5px;padding:7px 10px;backdrop-filter:blur(4px)}
#langPick span{opacity:.85;font-weight:700;letter-spacing:.02em}
#langPick button{background:#fff;color:#1B2530;border:0;border-radius:999px;font-size:12.5px;font-weight:700;padding:5px 14px;cursor:pointer}
#langPick button:active{transform:scale(.96)}
html,body{background:var(--bg);color:var(--txt);font-family:'Noto Sans JP',sans-serif;min-height:100%}
body{max-width:560px;margin:0 auto;padding:0 14px 130px;position:relative;overflow-x:hidden}
.mono{font-family:'Chakra Petch','Noto Sans JP',monospace}

/* header */
header{display:flex;align-items:center;gap:10px;padding:16px 2px 12px;border-bottom:1px solid var(--line)}
.lamp{width:12px;height:12px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber);flex:none}
.mascot-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 6%;flex:none}
.mascot-mini{width:64px;height:auto;margin-bottom:6px}
#mechaHero{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;margin:10px 0 4px}
#mechaHero{overflow:visible}
#mechaHero .heroWrap{position:relative;display:inline-block;max-width:none;transform:translateX(-26px)}
#mechaHero img{width:min(112%,500px);height:auto;display:block}
#heroBtns{position:absolute;right:0;top:62%;width:46%;display:flex;flex-direction:column;gap:11px}
.heroBtn{font-size:14px;font-weight:700;padding:11px 8px;border-radius:11px;border:1.5px solid #2f6bff;background:#fff;color:#1f4fd6;box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:pointer;line-height:1.15;white-space:nowrap}
.heroBtn:active{transform:translateY(1px);background:#2f6bff;color:#fff;border-color:#2f6bff}
.wrenchSizes{font-weight:700;letter-spacing:.02em;color:var(--txt);background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
/* カメラ画面中央の模擬QR(2つ横並び・うっすら透過。複数まとめてスキャン可を示唆) */
#multiQrHint{display:flex;gap:64px;opacity:.3;pointer-events:none}
#multiQrHint .qrMini{width:96px;height:96px;display:block}
.mechaBubble{font-size:13px;font-weight:700;color:var(--txt);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 16px}
header h1{font-size:16px;font-weight:900;letter-spacing:.06em}
header .sub{font-size:10px;color:var(--dim);letter-spacing:.18em;font-family:'Chakra Petch'}

/* bottom nav */
nav#tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:560px;margin:0 auto;
  display:flex;background:var(--panel);border-top:1px solid var(--line)}
nav#tabs button{flex:1;background:none;border:0;color:var(--dim);font-family:inherit;font-size:11px;
  font-weight:700;padding:10px 4px 12px;min-height:58px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
nav#tabs button .ico{font-size:20px;line-height:1}
nav#tabs button.active{color:var(--amber)}
.view{display:none}
.view.active{display:block}

/* scanner */
#scanWrap{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel2);position:relative}
/* スキャン中はカメラを画面中央付近に(メカ君は非表示) */
/* スキャン中はカメラを画面中央寄りへ。
   ※#scanWrapのmargin-topだと親と余白相殺し#view-scanの上端ごと下がる(戻るボタンがカメラ内に落ちる)ため、
     親のpadding-topで押し下げる。これで#view-scanの上端はヘッダー直下のまま＝戻るボタンが正しい位置に。 */
body.scanningNow #view-scan{padding-top:11vh}
/* スキャン中のホームへ戻る(左上・小さく)。既定は非表示 */
#view-scan{position:relative}
#scanBack{display:none}
body.scanningNow #scanBack{display:inline-block;position:absolute;left:0;top:8px;z-index:20;
  background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:999px;
  font-size:13px;font-weight:700;padding:6px 14px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
body.scanningNow #scanBack:active{background:var(--amber);color:#fff;border-color:var(--amber)}
#video{width:100%;display:block;max-height:46vh;object-fit:cover;background:#000}
#scanOverlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
#scanOK{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(16,140,60,.82);color:#fff;animation:okPop .25s ease}
#scanOK .okMark{font-size:84px;font-weight:900;letter-spacing:.05em;font-family:'Chakra Petch';line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.3)}
#scanOK .okSub{font-size:15px;font-weight:700;text-align:center;padding:0 16px}
@keyframes okPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.reticle{width:62%;aspect-ratio:1;border-radius:10px;position:relative}
.reticle::before,.reticle::after,.reticle b::before,.reticle b::after{content:"";position:absolute;width:26px;height:26px;border:3px solid var(--amber)}
.reticle::before{top:0;left:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.reticle::after{top:0;right:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.reticle b::before{bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.reticle b::after{bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
/* 常時動くスキャンライン(「読み取っている」ことを見せる) */
.reticle .scanLine{position:absolute;left:6%;right:6%;height:3px;top:6%;border-radius:3px;background:linear-gradient(90deg,transparent,var(--amber),transparent);box-shadow:0 0 10px var(--amber);animation:scanMove 1.9s ease-in-out infinite}
@keyframes scanMove{0%{top:6%}50%{top:90%}100%{top:6%}}
/* 読み取れた瞬間の緑フラッシュ */
#scanFlash{position:absolute;inset:0;pointer-events:none;background:rgba(34,197,94,0);z-index:4}
#scanFlash.hit{animation:scanHit .5s ease}
@keyframes scanHit{0%{background:rgba(34,197,94,0)}25%{background:rgba(34,197,94,.4)}100%{background:rgba(34,197,94,0)}}
#scanStatus{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;font-size:12px;background:rgba(20,28,40,.78);color:#cfd9e6;display:flex;justify-content:space-between;align-items:center;gap:8px}
#scanStatus .scanLeft{display:flex;align-items:center;gap:7px;min-width:0}
#scanStatus .scanDot{flex:none;width:9px;height:9px;border-radius:50%;background:#43e08a;box-shadow:0 0 7px #43e08a;animation:scanPulse 1s infinite}
@keyframes scanPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
#qrCount{color:var(--amber);font-weight:700}
#camPlaceholder{padding:34px 20px;text-align:center;color:var(--dim);font-size:13px;line-height:1.8}

/* buttons */
.btnRow{display:flex;gap:10px;margin-top:12px}
button{font-family:inherit;border:0;cursor:pointer}
.btn{flex:1;padding:16px 10px;border-radius:12px;font-size:15px;font-weight:700;letter-spacing:.04em;min-height:52px}
.btn-amber{background:var(--amber);color:#fff}
/* 再スキャン: 白背景・タップで青へ変化 */
.btn-rescan{background:#fff;color:var(--txt);border:1px solid var(--line)}
.btn-rescan:active{background:var(--amber);color:#fff;border-color:var(--amber)}
.btn-ghost{background:var(--panel);color:var(--txt);border:1px solid var(--line)}
.btn-alert{background:var(--alert);color:#fff}
.btn-cyan{background:var(--cyan);color:#fff}
.btnWide{display:block;width:100%;flex:none;text-align:center;text-decoration:none;margin:8px 0 4px;box-sizing:border-box}
.setupStep{display:flex;gap:10px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0}
.setupNo{flex:none;background:var(--cyan);color:#fff;font-weight:700;font-size:11px;letter-spacing:.06em;border-radius:8px;padding:5px 8px;min-width:52px;text-align:center}
.setupBody{flex:1;font-size:14px;line-height:1.6}
.btn:active{transform:scale(.98);filter:brightness(1.1)}
.btn[disabled]{opacity:.4}
.btn-sm{padding:11px 14px;border-radius:10px;font-size:13px;font-weight:700;min-height:44px}

/* caution plate card */
.plate{margin-top:18px;border-radius:12px;padding:18px 16px 14px;position:relative;
  background:linear-gradient(170deg,#FDFEFF 0%,#E9EEF5 55%,#DCE4EE 100%);
  border:1px solid #C4CEDC;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 12px rgba(30,50,80,.10)}
.plate::before,.plate::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#A8B4C4 70%);top:9px}
.plate::before{left:9px}.plate::after{right:9px}
.plate .ttl{font-size:10px;letter-spacing:.3em;color:#7C8BA0;font-family:'Chakra Petch';margin-bottom:10px;text-align:center}
.plate dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;align-items:baseline}
.plate dt{font-size:11px;color:#5E6B7C;letter-spacing:.1em;white-space:nowrap}
.plate dd{font-family:'Chakra Petch';font-weight:700;font-size:17px;letter-spacing:.08em;color:#1B2530; text-shadow:0 1px 0 rgba(255,255,255,.8);word-break:break-all}
.plate dd.small{font-size:14px}
.plate .match{margin-top:12px;padding-top:10px;border-top:1px dashed #C4CEDC;font-size:13px;font-weight:700;color:var(--amber)}
.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;margin-left:8px;vertical-align:middle;letter-spacing:.05em}
.badge.warn{background:var(--alert);color:#fff}
.badge.ok{background:var(--ok);color:#fff}

/* sections */
section{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
section>h2{padding:12px 14px;font-size:13px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
section>h2 .tag{display:none}
section>h2 .tag.cy{background:var(--cyan)}
section>h2 .tag.al{background:var(--alert);color:#fff}
section>h2 .tag.gr{background:var(--ok);color:#fff}
.sec-body{padding:12px 14px}
ul.flat{list-style:none}
ul.flat li{padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.65;display:flex;gap:9px}
ul.flat li:last-child{border-bottom:0}
ul.flat li::before{content:"▸";color:var(--amber);flex:none;font-size:13px;padding-top:1px}
ul.flat li.chk::before{content:"☑";color:var(--ok)}

/* link buttons */
a.linkbtn{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px 14px;border-bottom:1px solid var(--line);
  color:var(--txt);text-decoration:none;font-size:14px;font-weight:500}
a.linkbtn:last-child{border-bottom:0}
a.linkbtn:active{background:var(--panel2)}
a.linkbtn .arr{color:var(--amber);font-family:'Chakra Petch';flex:none}
a.linkbtn small{display:block;color:var(--dim);font-size:11px;font-weight:400;margin-top:2px}

/* raw fields */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:'Chakra Petch';font-size:13px;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;color:var(--cyan);word-break:break-all;cursor:pointer}
.chip:active{border-color:var(--amber);color:var(--amber)}
.hint{font-size:11px;color:var(--dim);line-height:1.7;margin-bottom:10px}

/* inputs */
.inputRow{display:flex;gap:8px}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],textarea{flex:1;width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--txt);
  font-family:'Chakra Petch','Noto Sans JP',monospace;font-size:16px;padding:13px 12px;letter-spacing:.04em;box-sizing:border-box}
input.uc{text-transform:uppercase}
input:focus,textarea:focus{outline:none;border-color:var(--amber)}
textarea{min-height:84px;resize:vertical;line-height:1.6}
.inputRow .btn{flex:none;padding:13px 18px}
label.fld{display:block;font-size:12px;color:var(--dim);font-weight:700;margin:14px 0 6px}
label.fld:first-child{margin-top:0}

/* スキャン進捗 */
#scanIntro{margin-top:14px;font-size:14px;line-height:1.7;color:var(--dim);text-align:center;padding:0 8px}
#scanProgress{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.progRow{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:14px}
.progRow:last-child{border-bottom:0}
.progIco{flex:none;width:20px;text-align:center;color:var(--dim);font-weight:700}
.progRow.got .progIco{color:var(--ok)}
.progLabel{flex:none;width:84px;color:var(--dim);font-size:13px}
.progVal{flex:1;font-family:'Chakra Petch','Noto Sans JP',monospace;color:var(--dim);word-break:break-all}
.progRow.got .progVal{color:var(--txt)}

/* テキストリンク・選択パネル */
.linkrow{display:flex;flex-direction:row;gap:10px;margin-top:12px}
.textlink{flex:1 1 0;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;color:var(--txt);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;
  text-decoration:none;padding:14px 8px;text-align:center;min-height:52px}
.textlink:active{color:var(--amber);border-color:var(--amber)}
#choicePanel{margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.choice-q{font-size:15px;font-weight:700;text-align:center;letter-spacing:.04em}
.btn-big{padding:18px 12px;font-size:16px;line-height:1.4}
.btn-big small{display:block;font-size:11px;font-weight:400;margin-top:3px;opacity:.75}
/* 選択ボタン: タップ中は枠だけ色がつく */
#choicePanel .btn-big:active{border-color:var(--amber);color:var(--amber)}

/* 全ページ共通ナビ(戻る矢印を統一) */
.pageNav{display:flex;gap:4px;position:sticky;top:0;z-index:30;background:var(--bg);
  padding:10px 0 8px;margin:0 0 6px;border-bottom:1px solid var(--line)}
.pageNav .navBtn{flex:1;min-width:0;font-family:inherit;font-size:11.5px;font-weight:700;
  background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:9px;
  padding:9px 2px;min-height:42px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pageNav .navBtn.navBack{flex:0 0 auto;padding:9px 9px;color:var(--dim)}
.pageNav .navBtn:active{transform:scale(.97)}
.pageNav .navBtn.navActive{border-color:var(--amber);color:var(--amber)}

/* AIモード選択 */
.mode-btn{font-size:13px;line-height:1.5;padding:12px 8px}
.mode-btn.mode-active{background:var(--amber);color:#fff;border-color:var(--amber)}
.mode-btn.mode-active small{color:#dbe7ff!important}

/* AI回答 */
.ai-answer{font-size:15px;line-height:1.9;word-break:break-word;color:var(--txt)}
.ai-h{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--txt);margin:16px 0 8px;padding:8px 12px;background:var(--panel2);border-left:4px solid var(--amber);border-radius:8px}
.ai-h:first-child{margin-top:2px}
.ai-cause{font-weight:700;font-size:15px;line-height:1.6}
/* 手順: 見出し(太字)と本文(通常ウェイト)を分けて読みやすく */
.stepHead{font-weight:800;font-size:15px;line-height:1.5}
.stepBody{font-weight:400;font-size:14.5px;line-height:1.7;margin-top:4px}
.ai-check{margin-top:5px;font-size:13px;line-height:1.7;color:var(--txt);background:var(--panel2);border-left:3px solid var(--cyan);padding:7px 10px;border-radius:0}
.ai-check-label{color:var(--cyan);font-weight:700;font-size:11px;letter-spacing:.1em;margin-right:4px}
/* 候補の「理由」: 折り畳み(タップで開閉・1つだけ開く) */
.ai-reason{margin-top:4px}
.ai-reason-toggle{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--dim);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;cursor:pointer;letter-spacing:.06em}
.ai-reason-toggle::after{content:"▸";font-size:9px;transition:transform .15s}
.ai-reason.open .ai-reason-toggle::after{transform:rotate(90deg)}
.ai-reason.open .ai-reason-toggle{color:var(--cyan);border-color:var(--cyan)}
.ai-reason-body{display:none;margin-top:4px;font-size:12px;line-height:1.6;color:var(--dim);border-left:2px solid var(--line);padding:2px 0 2px 8px}
.ai-reason.open .ai-reason-body{display:block}
.ai-p{margin:7px 0 7px 2px;line-height:1.9}
ol.ai-list li{align-items:flex-start}
ol.ai-list li>div{flex:1;min-width:0}

/* 点検手引書 (折りたたみ) */
details.guide{margin-top:12px;border:1px solid var(--amber-dk);border-radius:10px;background:var(--panel2);overflow:hidden}
details.guide summary{padding:13px 12px;font-size:14px;font-weight:700;color:var(--amber);cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center}
details.guide summary::-webkit-details-marker{display:none}
details.guide summary::after{content:"▼";margin-left:auto;font-size:10px;color:var(--dim);transition:transform .15s}
details.guide[open] summary::after{transform:rotate(180deg)}
.guide-body{padding:0 12px 12px}
.guide-h{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--dim);margin:12px 0 6px;padding-top:10px;border-top:1px dashed var(--line)}
.guide-h:first-child{border-top:0;padding-top:0;margin-top:2px}
.guide-tools{font-size:13px;line-height:1.7;color:var(--cyan)}
ol.guide-steps{margin:0;padding-left:0;list-style:none;counter-reset:gstep;display:flex;flex-direction:column;gap:8px}
ol.guide-steps li{counter-increment:gstep;display:flex;gap:12px;padding:12px 14px;font-size:15px;line-height:1.75;background:var(--panel2);border:1px solid var(--line);border-radius:12px}
ol.guide-steps li::before{content:counter(gstep);flex:none;width:28px;height:28px;border-radius:50%;background:var(--amber);color:#fff;font-family:'Chakra Petch';font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(37,99,235,.3)}
ul.guide-caution li::before{content:"⚠";color:var(--alert)}
/* 手順タップで参考図 */
ol.ai-list li.hasFig>div{cursor:pointer}
ol.ai-list li.hasFig:active{opacity:.85}
.stepFigHint{margin-top:4px;text-align:right;font-size:11px;font-weight:500;color:var(--dim);opacity:.5;user-select:none}
.stepFig{margin-top:8px}
.stepFig.hidden{display:none}
.stepFigLoad{font-size:13px;color:var(--dim);padding:6px 0}
.stepFigSvg{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:6px;display:flex;align-items:center;justify-content:center}
.stepFigSvg svg,.stepFigSvg img{display:block;max-width:100%;width:auto;height:auto;max-height:300px;object-fit:contain;border-radius:6px;margin:0 auto}
.stepFigCap{font-size:11px;color:var(--dim);text-align:center;margin-bottom:8px}

/* 諸元の項目別編集 */
.specEditRow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;border:1px solid var(--line);border-radius:10px;padding:8px;align-items:flex-start}
.specEditRow .seK{flex:1 1 calc(100% - 46px);min-width:0;font-weight:700}
.specEditRow .seV{flex:1 1 100%;min-width:0}
.specEditRow .seDel{flex:0 0 38px;background:var(--panel2);color:var(--alert);border:1px solid var(--line);border-radius:8px;font-size:16px;min-height:46px}

/* spec table */
/* メンテ諸元: 項目ごとにカード分け(スマホで見やすく) */
dl.specs{display:flex;flex-direction:column;gap:10px}
.specItem{position:relative;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:10px;padding:10px 14px}
.specItemUp{position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:13px;line-height:1;cursor:pointer;opacity:.7}
.specItemUp:hover{opacity:1}
.specItemUp.loading{opacity:.5;pointer-events:none;animation:specSpin .8s linear infinite}
@keyframes specSpin{to{transform:rotate(360deg)}}
.specItem .specK{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--amber);margin-bottom:3px;padding-right:30px}
.specItem.specManual{border-left-color:var(--ok)}
.specItem{cursor:pointer}
.specTapHint{position:absolute;bottom:5px;right:8px;font-size:10px;color:var(--dim);opacity:.65;pointer-events:none}
.specItem.editing{cursor:default}
.specItem.editing .specTapHint{display:none}
.specItem .seK,.specItem .seV{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:15px;font-family:inherit;background:var(--bg);color:var(--txt);margin-bottom:6px}
.specItem .seV{resize:vertical;min-height:44px}
.specEditInline{display:flex;gap:6px}
.specEditInline .btn{flex:1}
.specItem .specV{font-size:16px;line-height:1.55;font-weight:600;color:var(--txt);word-break:break-word;padding-right:30px}

/* 諸元の操作ボタン(中央・小さめ) */
.specBtns{display:flex;justify-content:center;gap:8px;margin-top:12px}
.specBtns .btn{flex:0 1 auto;padding:10px 16px;font-size:13px}

.note{margin-top:18px;font-size:11px;color:var(--dim);line-height:1.8;padding:0 4px}
.hidden{display:none!important}

/* assign bar */
#assignBar{position:fixed;left:0;right:0;bottom:58px;background:var(--panel);border-top:2px solid var(--amber);
  padding:10px 14px 12px;display:flex;flex-direction:column;gap:8px;max-width:560px;margin:0 auto;z-index:50}
#assignBar span{font-size:12px;line-height:1.5;padding-right:30px}
.abBtns{display:flex;flex-wrap:wrap;gap:6px}
.abBtns .ab-k{flex:1 1 calc(33.333% - 6px);min-width:0;padding:10px 4px;font-size:12px}
#assignBar button{border-radius:9px;font-weight:700;min-height:44px}
.ab-k{background:var(--amber);color:#fff}
.ab-c{position:absolute;top:8px;right:12px;background:var(--panel2);color:var(--dim);border:1px solid var(--line);
  padding:3px 11px;min-height:auto;font-size:15px}

/* history */
.histItem{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line)}
.histItem:last-child{border-bottom:0}
.histItem .hMain{flex:1;min-width:0;cursor:pointer}
.histItem .hType{font-family:'Chakra Petch';font-weight:700;font-size:15px;letter-spacing:.05em}
.histItem .hSub{font-size:11px;color:var(--dim);margin-top:2px;word-break:break-all}
.histItem .hDel{flex:none;background:var(--panel2);border:1px solid var(--line);color:var(--alert);
  border-radius:9px;padding:10px 13px;font-size:13px;font-weight:700;min-height:44px}
.empty{padding:26px 14px;text-align:center;color:var(--dim);font-size:13px;line-height:1.8}

/* db editor */
.dbItem{padding:13px 14px;border-bottom:1px solid var(--line)}
.dbItem:last-child{border-bottom:0}
.dbItem .dRow{display:flex;align-items:center;gap:10px}
.dbItem .dName{flex:1;font-weight:700;font-size:14px}
.dbItem .dName small{display:block;font-family:'Chakra Petch';font-weight:400;font-size:11px;color:var(--cyan);margin-top:2px}
.dbItem .dTag{flex:none;font-size:10px;border-radius:5px;padding:2px 7px;font-weight:700}
.dTag.builtin{background:var(--panel2);color:var(--dim);border:1px solid var(--line)}
.dTag.custom{background:var(--amber);color:#fff}
.dbItem .dBtns{display:flex;gap:8px;margin-top:9px}

/* ocr */
#ocrPreview{width:100%;border-radius:10px;border:1px solid var(--line);margin-top:10px}
#ocrStatus{font-size:12px;color:var(--dim);margin-top:8px;line-height:1.7}
#ocrStatus b{color:var(--amber)}

@media (min-width:561px){ nav#tabs{border-left:1px solid var(--line);border-right:1px solid var(--line)} }

/* ボタン内のメカ君アイコン + 押下/処理中フィードバック */
.btnMecha{width:20px;height:20px;vertical-align:middle;margin-right:6px;object-fit:contain}
/* 診断「メカ君に聞く」: ボタンは小さめ・アイコンも控えめ */
#btnDiagRun{display:flex;align-items:center;justify-content:center}
#btnDiagRun .btnMecha{width:30px;height:30px;margin-right:8px}
.diagRunRow .btn{min-height:40px}

/* 診断の操作アイコン群(音声入力/会話 + 写真・動画添付): 見出し下に全幅・均一サイズで横一列 */
.diagIcons{display:flex;gap:6px;align-items:stretch;justify-content:space-between;flex-wrap:nowrap;margin:10px 2px 0}
.diagIco{flex:1 1 0;height:46px;display:flex;align-items:center;justify-content:center;border:0;background:none;border-radius:10px;padding:0;cursor:pointer}
.diagIco img{width:38px;height:38px;object-fit:contain;display:block}
.diagIco.txt{font-size:24px;line-height:1}
.diagIco.sel{outline:2px solid var(--amber)}
.diagIco:active{transform:scale(.92)}
/* ヘッダー右側に小さく収めるアイコン群(修理・診断タブ共通) */
.secHead{flex-wrap:wrap}
.diagIcons.inHead{margin:0 0 0 auto;flex:0 0 auto;gap:2px;justify-content:flex-end;flex-wrap:nowrap}
.diagIcons.inHead .diagIco{flex:0 0 auto;width:34px;height:34px;border-radius:9px}
.diagIcons.inHead .diagIco img{width:30px;height:30px}
.diagIcons.inHead .diagIco.txt{font-size:20px}
/* 登録端末の管理UI */
#cloudDevices .devHead{font-size:12.5px;color:var(--dim);font-weight:700;margin-bottom:6px}
#cloudDevices .devList{display:flex;flex-direction:column;gap:6px}
#cloudDevices .devItem{display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--panel)}
#cloudDevices .devNm{font-size:13px;font-weight:600;line-height:1.4}
#cloudDevices .devCur{font-size:11px;color:var(--cyan);font-weight:700;margin-left:4px}
#cloudDevices .devWhen{font-size:11px;color:var(--dim);font-weight:400}
#cloudDevices .devDel{flex:0 0 auto;padding:6px 12px}
#cloudDevices .devBlock{margin-top:8px;font-size:12.5px;line-height:1.6;color:var(--txt);background:var(--panel2);border:1px solid var(--al,#e0a);border-radius:10px;padding:10px}
/* 店舗プラン */
.planHead{font-size:13px;font-weight:700;margin-bottom:6px}
.planBtns{display:flex;gap:8px;margin:6px 0 2px;flex-wrap:wrap}
.planNote{font-size:11.5px;color:var(--dim);line-height:1.5}
.planPerk{margin:6px 0 8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.planPerkTtl{font-size:12px;font-weight:700;color:var(--cyan);margin-bottom:4px}
.planPerkList{margin:0;padding-left:18px;font-size:12.5px;line-height:1.7;line-break:strict;word-break:auto-phrase;overflow-wrap:anywhere}
.planPerkList li{margin:0 0 4px}
.planPerkList li:last-child{margin-bottom:0}
.planTerm{font-size:12.5px;line-height:1.6;margin:6px 0}
.planCancel{margin-top:8px}
.planCancel .textlink{font-size:12px;color:var(--dim)}
.signupForm{margin:8px 0;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.signupForm input[type=email]{width:100%}
.signupRadio{display:inline-flex;align-items:center;gap:4px;margin-right:14px;font-size:13px}
/* 運営: 契約申し込み一覧 */
.signupBox{border:1px solid var(--amber);border-radius:10px;padding:10px;margin-top:8px;background:var(--panel)}
.signupTtl{font-size:13px;font-weight:700;margin-bottom:6px}
.signupItem{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.signupItem:first-of-type{border-top:0}
.signupInfo{font-size:13px;line-height:1.5;min-width:0}
.signupMail{color:var(--cyan);font-weight:700;font-size:12.5px;word-break:break-all}
.signupMeta{color:var(--dim);font-size:11px}
.signupBtns{display:flex;gap:6px;flex:0 0 auto}
/* 折り畳みカード(店舗支払い・端末) */
.foldCard{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.foldCard>summary{list-style:none;cursor:pointer;padding:12px 14px;font-size:13px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;gap:8px}
.foldCard>summary::-webkit-details-marker{display:none}
.foldCard>summary::before{content:"▸";color:var(--dim);font-size:11px;transition:transform .15s}
.foldCard[open]>summary::before{transform:rotate(90deg)}
.foldCard .foldTag{margin-left:auto;font-size:11px;font-weight:600;color:var(--dim);background:var(--panel2);border-radius:20px;padding:2px 8px}
.foldCard .foldTag.warn{color:#fff;background:var(--alert,#e0533d)}
.foldCard .foldBody{padding:0 12px 12px}
/* セクション見出しごと折り畳み(クラウド同期など) */
.foldSecSum{list-style:none;cursor:pointer;padding:14px 34px;font-size:15px;font-weight:700;color:var(--txt);display:flex;align-items:center;justify-content:center;gap:8px;position:relative;text-align:center}
.foldSecSum::-webkit-details-marker{display:none}
.foldSecSum::after{content:"▾";position:absolute;right:16px;color:var(--dim);font-size:13px}
.foldSec[open]>.foldSecSum::after{content:"▴"}
/* 管理: 名前行右端の端末枠 +/- */
.mInfo .mTop{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mInfo .mTop .mNm{flex:0 1 auto}
.mDev{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:4px}
.mDev .mDevN{font-size:11px;color:var(--dim);font-weight:700;min-width:26px;text-align:center}
.mDevBtn{width:26px;height:26px;border:1px solid var(--line);border-radius:7px;background:var(--panel2);color:var(--txt);font-size:15px;font-weight:700;line-height:1;cursor:pointer;padding:0}
.mDevBtn:active{transform:scale(.92)}
/* 管理: 操作ボタンを小さめに */
.mBtns .btn{min-height:32px;padding:5px 8px;font-size:12px;border-radius:8px}
.mTenantHead .btn{min-height:28px;padding:3px 8px;font-size:11.5px;flex:0 0 auto}
.mTenantHead .mtBtns{flex:0 0 auto;display:inline-flex;gap:6px;flex-wrap:nowrap}
/* 運営管理者の在籍行(店舗の管理対象外) */
.mRowSuper{opacity:.75;background:var(--panel2);border-radius:8px;padding:8px 10px !important;margin-top:6px}
.mRowSuper .mMeta{font-style:italic}
/* 運営タブ上部の運営管理者情報 */
.opInfo:empty{display:none}
.opCard{border:1px solid var(--amber);border-radius:10px;padding:10px 12px;background:var(--panel);margin-top:8px}
.opCard .opBadge{display:inline-block;background:var(--amber);color:#fff;font-size:11px;font-weight:700;border-radius:20px;padding:1px 8px;margin-right:8px}
.opCard .opNm{font-weight:700;font-size:14px}
.opCard .opMail{color:var(--dim);font-size:12px;margin-top:2px;word-break:break-all}
.opCard .opNote{color:var(--dim);font-size:11.5px;line-height:1.5;margin-top:6px}
/* 追加相談の小アイコン行も同じ見た目 */
.fuIcons{display:flex;gap:6px;justify-content:space-between;margin:8px 0}
/* 運営/メンバー管理 */
.mTenant{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 12px;background:var(--panel)}
.mTenantHead{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;flex-wrap:wrap}
.mTenantHead[data-toggle]{cursor:pointer;user-select:none}
.mTenantHead .mChevron{flex:0 0 auto;color:var(--dim);transition:transform .15s;font-size:12px}
.mTenantHead.open .mChevron{transform:rotate(90deg)}
.mTenantHead .mName{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mTenantHead .mCount{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--dim);background:var(--panel2);padding:2px 8px;border-radius:20px}
.mBody{margin-top:8px}
.mBody.hidden{display:none}
.mInfo .mMeta{color:var(--dim);font-size:11px;margin-top:2px}
/* 参加申請の通知バナー */
.joinNotice{background:#FFF7E6;border:1px solid var(--amber);border-radius:10px;padding:10px 12px;margin-bottom:8px;font-size:13px;line-height:1.6;color:var(--txt)}
/* 整備カルテ */
.karteForm{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel2);margin-top:8px}
.karteForm .fld{margin-top:8px}
.kRow2{display:flex;gap:10px}
.kRow2>div{flex:1 1 0;min-width:0}
.kMic{margin-left:8px;padding:2px 8px}
.kBtnRow .btn{flex:1 1 0;min-width:0;white-space:nowrap;font-size:14px;padding-left:6px;padding-right:6px}
.karteItem{border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:12px;padding:0;margin-bottom:10px;background:var(--panel);overflow:hidden}
.karteItem .kHead{display:flex;align-items:flex-start;gap:8px;background:var(--panel2);padding:9px 12px;border-bottom:1px solid var(--line)}
.karteItem .kDate{flex:1 1 auto;font-weight:700;font-size:13px;color:var(--cyan);line-height:1.45}
.karteItem .kDate .kSep{color:var(--line);font-style:normal;margin:0 2px}
.karteItem .kBtns{flex:0 0 auto;display:flex;gap:6px}
.karteItem .kEdit,.karteItem .kDel{background:none;border:1px solid var(--line);border-radius:8px;font-size:12px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.karteItem .kEdit{color:var(--cyan)}
.karteItem .kDel{color:var(--dim)}
.karteItem .kBody{padding:10px 12px;font-size:14px}
.karteItem .kBlock{display:block;padding:6px 0;border-top:1px dashed var(--line)}
.karteItem .kBlock:first-child{border-top:none}
.karteItem .kLbl{display:block;color:var(--dim);font-size:11px;font-weight:700;margin-bottom:3px}
.karteItem .kVal{line-height:1.55}
.karteItem .kItems{margin:0;padding:0;list-style:none}
.karteItem .kItems li{position:relative;padding-left:15px;line-height:1.55;margin:1px 0}
.karteItem .kItems li::before{content:"";position:absolute;left:3px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--cyan)}
/* 部品: 部品名(左) + 数量(右) を同じ行に */
.karteItem .kParts .kPartHead{display:flex;justify-content:space-between;align-items:baseline}
.karteItem .kParts .kPartHead .kLbl{margin:0}
.karteItem .kParts .kQtyLbl{color:var(--dim);font-size:11px;font-weight:700}
.karteItem .kPartRows li{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.karteItem .kPartRows .kPn{flex:1 1 auto;min-width:0;font-size:13px;line-height:1.5}
.karteItem .kPartRows .kPnSub{display:block;font-size:12px;color:var(--dim);padding-left:2px}
.karteItem .kPartRows .kQty{flex:0 0 auto;min-width:34px;text-align:right;color:var(--cyan);font-weight:700;white-space:nowrap;font-size:13px;line-height:1.5}
/* 内容量で自動拡大する入力欄 */
textarea.kGrow{overflow:hidden;resize:none;min-height:48px}
/* カルテのその場編集 */
.kEditBox{padding:10px 12px}
.kEditRow{margin-bottom:8px}
.kEditRow .fld{margin-bottom:3px}
.kEditRow input,.kEditRow textarea{width:100%}
/* 部品の洗い出し・注文リスト */
.partsGroup{margin-top:10px}
.partsGroupT{font-size:12px;font-weight:800;color:var(--amber);letter-spacing:.03em;margin-bottom:5px}
.partsItem{border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:9px;padding:8px 11px;margin-bottom:6px;background:var(--panel)}
.partsItem .pName{font-size:15px;font-weight:700;color:var(--txt)}
.partsItem .pName .pQty{font-weight:800;color:var(--amber);margin-left:4px}
.partsItem .pMeta{font-size:12px;color:var(--dim);margin-top:2px}
.orderBox{margin-top:14px;border:1.5px solid var(--amber);border-radius:12px;padding:10px 12px;background:#eef4ff}
.orderT{font-size:13px;font-weight:800;color:var(--amber);margin-bottom:6px}
.orderPre{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:13px;line-height:1.6;color:var(--txt);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-bottom:8px}
.orderRow{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line)}
.orderRow:first-child{border-top:0}
.orderName{font-size:15px;font-weight:700;color:var(--txt);min-width:0}
.orderName.jump{color:var(--amber);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* 部品名タップ→実物画像 */
.orderName.pic{color:var(--amber);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.orderStepLink{font-size:11px;color:var(--dim);text-decoration:underline;cursor:pointer;white-space:nowrap;align-self:center}
.partPic{padding:8px 0 10px}
.partPicRow{display:flex;gap:8px;overflow-x:auto}
.partPicRow a{flex:0 0 auto;display:block}
.partPicRow img{width:104px;height:104px;object-fit:cover;border:1px solid var(--line);border-radius:10px;background:#fff}
.partPicCap{font-size:11px;color:var(--dim);margin-top:5px}
.partPicNote{font-size:12px;color:var(--dim);line-height:1.6}
.orderMeta{font-size:12px;color:var(--dim);margin-left:auto;white-space:nowrap;opacity:.7;align-self:center}
.ai-h.orderHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.orderHead .orderLegend{font-size:10px;font-weight:600;color:var(--dim);opacity:.75;letter-spacing:0}
ol.ai-list li.stepFlash{animation:stepFlash 1.4s ease}
@keyframes stepFlash{0%,100%{background:var(--panel2)}20%{background:#fde68a}}
/* 手順タップで工具表示 */
ol.ai-list li.hasTools>div{cursor:pointer}
.stepTools{margin-top:6px;font-size:13px;line-height:1.6;color:var(--txt);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.stepTools.hidden{display:none}
.stepTools b{color:var(--amber);font-size:12px}
/* 交換動画カード(サムネ) */
.vidCard{display:block;text-decoration:none;color:var(--txt);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:2px 0 8px;background:var(--panel)}
.vidThumb{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.vidThumb img{width:100%;height:100%;object-fit:cover;display:block}
.vidPlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.vidTitle{padding:8px 11px;font-size:13px;font-weight:700;line-height:1.5}
/* 取り付け位置の実写画像ギャラリー */
.imgGal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:2px 0 8px}
.imgGal .imgThumb{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;aspect-ratio:1;background:var(--panel2)}
.imgGal .imgThumb img{width:100%;height:100%;object-fit:cover;display:block}
.imgGal .stepFigCap{grid-column:1/-1}
.mStat{color:var(--dim);font-size:12px;margin:4px 0 8px}
/* AI有料利用スイッチ(店舗ごと) */
.aiPaidCard{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.aiPaidTtl{font-weight:800;font-size:13.5px;color:var(--txt)}
.aiPaidState{font-size:12.5px;color:var(--dim)}
.aiPaidState b{font-weight:700}
.aiPaidState b.on{color:var(--alert)}
.aiPaidState b.off{color:var(--ok)}
.aiPaidNote{font-size:11.5px;color:var(--dim);line-height:1.6}
.mRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.mRow:first-of-type{border-top:0}
.mInfo{flex:1 1 100%;min-width:0;font-size:13px;line-height:1.5}
.mInfo .mNm{font-weight:700;font-size:14px;word-break:break-all}
.mInfo .mRole{display:inline-block;white-space:nowrap;font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px;background:var(--panel2);color:var(--dim);margin-left:6px}
.mInfo .mRole.adm{background:var(--amber);color:#fff}
.mInfo .mMail{color:var(--dim);font-size:11px;word-break:break-all}
/* 操作ボタンは横1列。収まらない分は横スクロール(折り返して2段にならないように) */
.mBtns{display:flex;flex-wrap:nowrap;gap:6px;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.mBtns::-webkit-scrollbar{height:4px}
.mBtns::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.mBtns .btn{white-space:nowrap;flex:0 0 auto;padding-left:10px;padding-right:10px}
/* 折りたたみセクションの見出し(summary)をh2風に */
/* 見出しは中央寄せ。開閉マーカー(▾)はレイアウトに影響しないよう右端に絶対配置 */
.secSummary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:700;color:var(--txt);padding:14px 34px;position:relative;text-align:center}
.secSummary::-webkit-details-marker{display:none}
.secSummary::after{content:"▾";position:absolute;right:16px;color:var(--dim);font-size:13px}
details[open] > .secSummary::after{content:"▴"}
/* セクション見出しの右端にマイク＋クリア(マイクはクリアの左) */
.secHead{display:flex;align-items:center;gap:5px;flex-wrap:nowrap}
.secHead>span.tag{flex:0 0 auto}
.secHead .secMic{flex:0 0 auto;padding:7px 9px}
.secHead .secMic:first-of-type{margin-left:auto}
.secHead .secClear{flex:0 0 auto;padding:7px 10px}
/* 白背景・選択(押下/処理中)で枠だけ色がつくアクションボタン */
.btnPick{background:var(--panel);color:var(--txt);border:1px solid var(--line)}
.btnPick:active,.btnPick.btnLoading{border-color:var(--amber);color:var(--amber)}
#btnVehAsk .btnMecha{width:34px;height:34px;margin-right:8px}
#btnAiQr .btnMecha{width:40px;height:40px;margin-right:8px}
#btnAiQr{display:flex;align-items:center;justify-content:center;min-height:44px}
/* 音声会話: メカ君の発言アイコン */
.vcMsg.mecha .vcIco{width:22px;height:22px;vertical-align:middle;margin-right:6px}
/* クリック可能な原因候補・故障 */
/* 原因候補ごとの点検手引書 */
/* 候補カード: 手引書ボタンを常に最下部へ(理由・切り分けは上に詰める) */
.ai-item{display:flex;flex-direction:column}
.ai-item>.manualWrap{order:99}
/* 手引書ボタンは控えめに(本文の下に小さく) */
.manualWrap{margin-top:10px;text-align:right}
.manualBtn{background:none;color:var(--dim);border:0;border-top:1px dashed var(--line);border-radius:0;
  font-size:11.5px;font-weight:600;padding:6px 2px 0;cursor:pointer;width:100%;text-align:right;letter-spacing:.02em}
.manualBtn:active{opacity:.55}
/* 開いたときの手引書パネル: 見出しと本文をはっきり。
   カードの番号バッジ分だけ左に食い込ませ、パネルを横いっぱいに広げて窮屈さを解消 */
.manualPane{margin:8px -6px 2px -40px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px 14px;text-align:left;overflow:hidden}
.manualPane.hidden{display:none}
.manualPane .ai-h{margin:14px -14px 10px;padding:9px 14px;background:var(--cyan);color:#fff;
  font-size:13.5px;font-weight:800;letter-spacing:.04em;border-radius:0}
.manualPane .ai-h:first-child{margin-top:2px}
/* 内側の手順リストは余白・バッジを軽くして本文の横幅を稼ぐ */
.manualPane .guide-steps{margin-top:8px;gap:8px}
.manualPane .guide-steps li{margin-bottom:0;padding:10px 12px;gap:10px;line-height:1.85;background:var(--panel2)}
.manualPane .guide-steps li::before{width:22px;height:22px;font-size:12px}
.manualPane .ai-cause{font-size:14px;line-height:1.9;color:var(--txt);font-weight:600}
.manualPane .ai-p{font-size:14px;line-height:1.9;color:var(--txt);margin-top:8px}
.manualPane .hint{font-size:13px;color:var(--dim);line-height:1.8}
/* 点検手引書アコーディオン(診断とUIを差別化: 温かみのある枠＋開閉見出し) */
.imSection{border:1px solid var(--line);border-radius:10px;margin-top:8px;overflow:hidden;background:var(--panel)}
.imSection:first-child{margin-top:2px}
.imHead{width:100%;display:flex;align-items:center;gap:8px;text-align:left;cursor:pointer;
  background:var(--panel2);border:0;border-left:4px solid var(--cyan);
  padding:11px 12px;font-size:13.5px;font-weight:800;color:var(--txt);letter-spacing:.02em}
.imHead:active{opacity:.75}
.imHead.open{background:var(--cyan);color:#fff;border-left-color:var(--cyan)}
.imChevron{flex:none;font-size:12px;transition:transform .15s;color:var(--cyan)}
.imHead.open .imChevron{transform:rotate(90deg);color:#fff}
.imTitle{flex:1}
.imBody{padding:10px 12px 12px}
.imBody.hidden{display:none}
/* 手引書の1行1項目(番号/・＋本文)。スマホで読みやすい行間・区切り */
.imRow{display:flex;gap:9px;align-items:flex-start;padding:9px 2px;border-top:1px solid var(--line)}
.imRow:first-child{border-top:0}
.imMk{flex:none;color:var(--dim);font-weight:700;font-size:13px;line-height:1.7;min-width:14px;text-align:center}
.imMk.num{background:var(--cyan);color:#fff;border-radius:50%;width:20px;height:20px;line-height:20px;font-size:12px;min-width:20px}
.imTx{flex:1;min-width:0;font-size:14px;line-height:1.85;color:var(--txt)}
.ai-cause.clk,.flat li.clk{cursor:pointer}
.ai-cause.clk:active,.flat li.clk:active{opacity:.6}
.flat li.clk{color:var(--cyan);text-decoration:underline dotted}
/* 添付プレビュー */
#diagAttachList{display:flex;flex-wrap:wrap;gap:8px}
#diagAttachList{padding-top:4px}
/* 添付サムネは横並び、右端まで来たら折り返して2列目へ(.hiddenを効かせるため:not指定) */
#vehAttachList:not(.hidden){display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.attachThumb{position:relative;flex:0 0 auto;width:74px;height:74px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.attachThumb img,.attachThumb video{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.attachThumb .axDel{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border:2px solid #fff;border-radius:50%;background:var(--alert);color:#fff;font-size:14px;line-height:20px;cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.3);z-index:2}
.attachThumb .axKind{position:absolute;left:2px;bottom:2px;font-size:10px;background:rgba(0,0,0,.6);color:#fff;border-radius:4px;padding:0 4px}
/* 音声会話ログ */
.vcMsg{font-size:14px;line-height:1.6;padding:8px 12px;border-radius:12px;max-width:88%}
.vcMsg.user{align-self:flex-end;background:var(--amber);color:#3a2a00}
.vcMsg.mecha{align-self:flex-start;background:var(--panel2);border:1px solid var(--line)}
.btn:active{transform:scale(.97)}
.btnLoading{opacity:.7;pointer-events:none}
.btnMecha.spin{animation:mechaSpin 1s linear infinite}
@keyframes mechaSpin{to{transform:rotate(360deg)}}

/* お問い合わせ AIサポートチャット(LINE風・折り畳み) */
.supportChat{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.scSummary{list-style:none;cursor:pointer;padding:12px;font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.scSummary::-webkit-details-marker{display:none}
.scSummary::after{content:"▸";margin-left:auto;color:var(--dim);transition:transform .2s}
.supportChat[open] .scSummary::after{transform:rotate(90deg)}
.scAvatar{width:28px;height:28px;border-radius:50%;background:var(--panel2);object-fit:cover;flex:none}
.scHint2{font-size:11px;color:var(--dim);font-weight:500;margin-left:4px}
.scBodyWrap{padding:0 12px 12px}
/* LINE風メッセージ列 */
.scMsgs{max-height:360px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:8px 0;background:var(--panel2);border-radius:10px;padding:10px 8px}
.scRow{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.scRowUser{flex-direction:row-reverse}
.scAv{width:30px;height:30px;flex:none;border-radius:50%;background:#fff;border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.scAv img{width:100%;height:100%;object-fit:cover}
.scMsg{max-width:76%;padding:9px 12px;border-radius:16px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.scBot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.scUser{background:#06C755;color:#fff;border-bottom-right-radius:4px}   /* LINEグリーン */
/* 入力: textareaは文字量で自動拡大、送信は小さな丸ボタン */
.scInputRow{display:flex;gap:8px;align-items:flex-end;margin-top:10px}
.scIn{flex:1;min-width:0;padding:10px 12px;border-radius:18px;border:1px solid var(--line);background:#fff;color:var(--txt);font-size:15px;font-family:inherit;resize:none;line-height:1.5;max-height:150px;overflow-y:auto}
.scSendBtn{flex:none;width:40px;height:40px;border-radius:50%;background:var(--amber);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:0}
.scSendBtn:disabled{opacity:.5}
.scNote{margin-top:8px}

/* カルテ写真: 撮影サムネイル + 追加/クリア */
.kThumbRow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.kThumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.kThumbAdd{width:64px;height:64px;border-radius:8px;border:1.5px dashed var(--line);background:#fff;color:var(--dim);font-size:26px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kThumbAdd:active{border-color:var(--amber);color:var(--amber)}
.kPhotoBtns{display:flex;gap:8px;align-items:center}
.kPhotoBtns #kPhotoRun{flex:1}
.kPhotoBtns .kPhotoClear{flex:0 0 auto;min-height:38px;padding:6px 12px;font-size:12px}

/* ===== 全ボタン共通: 白背景・タップで枠だけ青(アウトライン) ===== */
.btn,.btn-amber,.btn-cyan,.btn-ghost,.btn-rescan,.btn-sm,.kEdit,.kDel{
  background:#fff;color:var(--txt);border:1px solid var(--line)
}
.btn-alert,.kDel{color:var(--alert);background:#fff;border:1px solid var(--line)}
.btn:active,.btn-amber:active,.btn-cyan:active,.btn-ghost:active,.btn-rescan:active,
.btn-sm:active,.kEdit:active,.kDel:active,.btn-alert:active,.scSendBtn:active,.lastVeh:active,.btn-rescan:active{
  background:#fff;border-color:var(--amber)
}
.btn-alert:active,.kDel:active{border-color:var(--alert)}
/* 送信ボタンも白＋タップ青枠に統一(矢印はアクセント色) */
.scSendBtn{background:#fff;color:var(--amber);border:1px solid var(--line)}

/* カルテ写真: ライブカメラ撮影オーバーレイ(外カメラ固定) */
.kcOverlay{position:fixed;inset:0;z-index:300;background:#000;display:none;flex-direction:column}
.kcVideo{flex:1;width:100%;height:100%;object-fit:cover;background:#000}
.kcTip{position:absolute;top:14px;left:0;right:0;text-align:center;color:#fff;font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.8);padding:0 16px}
.kcOverlay.kcFlash::after{content:"";position:absolute;inset:0;background:#fff;animation:kcFlash .13s ease-out}
@keyframes kcFlash{from{opacity:.9}to{opacity:0}}
.kcBar{position:absolute;left:0;right:0;bottom:0;padding:20px 22px calc(20px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.kcClose{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:26px;border:0;line-height:1;flex:none}
.kcShot{width:72px;height:72px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.55);flex:none;cursor:pointer}
.kcShot:active{transform:scale(.94)}
.kcDone{min-width:74px;height:46px;border-radius:23px;background:var(--amber);color:#fff;border:0;font-size:14px;font-weight:700;flex:none;padding:0 14px}

/* カルテ: 見出し右の手書きイラスト(記録追加)ボタン + 写真カメラ画像ボタン */
.kHead2{display:flex;align-items:center;gap:8px}
.kHeadIcons{margin-left:auto;display:flex;align-items:center;gap:2px;flex:none}
.karteAddImg{background:none;border:0;padding:0;width:34px;height:34px;flex:none;cursor:pointer}   /* 修理・診断の見出しアイコンと同サイズ */
.karteAddImg img{width:34px;height:34px;object-fit:contain;display:block}
.karteAddImg:active{transform:scale(.92)}

/* 修理見出しを1行に */
.secHead .secTtl{white-space:nowrap;flex:none}

/* ストア(App Store/Play)配布=個人版固定: ログイン/法人/プラン/決済/運営UIを非表示 */
body.storeApp #secCloudSync,
body.storeApp #cloudPlan,
body.storeApp #cloudDevices,
body.storeApp #tabAdmin{ display:none !important }

/* --- 個人版ペイウォール(Google Playサブスク) --- */
body.pwLocked{ overflow:hidden }
#pwOverlay{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  padding:20px; background:linear-gradient(160deg,#0f2a5a 0%,#1e5aa8 100%); overflow:auto }
#pwOverlay .pwCard{ width:100%; max-width:360px; background:#fff; border-radius:20px; padding:26px 22px 22px;
  box-shadow:0 20px 50px rgba(0,0,0,.35); text-align:center }
#pwOverlay .pwLogo{ width:72px; height:72px; border-radius:16px; margin:0 auto 10px; display:block }
#pwOverlay h2{ font-size:20px; margin:4px 0 6px; color:#0f2a5a }
#pwOverlay .pwLead{ font-size:14px; color:#444; margin:0 0 14px; line-height:1.6 }
#pwOverlay .pwPrice{ margin:6px 0 14px }
#pwOverlay .pwYen{ font-size:38px; font-weight:800; color:#1e5aa8 }
#pwOverlay .pwPer{ font-size:15px; color:#666; margin-left:2px }
#pwOverlay .pwFeat{ list-style:none; padding:0; margin:0 0 18px; text-align:left }
#pwOverlay .pwFeat li{ font-size:14px; color:#333; padding:7px 0 7px 26px; position:relative; border-bottom:1px solid #eef1f5 }
#pwOverlay .pwFeat li::before{ content:"✓"; position:absolute; left:4px; color:#1e9e5a; font-weight:800 }
#pwOverlay .pwBuy{ width:100%; padding:15px; border:none; border-radius:12px; background:#1e5aa8; color:#fff;
  font-size:16px; font-weight:700; cursor:pointer }
#pwOverlay .pwBuy:disabled{ opacity:.6 }
#pwOverlay .pwRestore{ width:100%; padding:10px; margin-top:8px; border:none; background:none; color:#1e5aa8;
  font-size:13px; cursor:pointer; text-decoration:underline }
#pwOverlay .pwNote{ font-size:11px; color:#888; margin:12px 0 0; line-height:1.6 }
#pwOverlay .pwNote a{ color:#1e5aa8 }
#pwBanner{ position:fixed; left:50%; transform:translateX(-50%); bottom:76px; z-index:9000;
  background:rgba(15,42,90,.92); color:#fff; font-size:12px; padding:7px 16px; border-radius:20px;
  box-shadow:0 4px 14px rgba(0,0,0,.25); pointer-events:none }