/* ================================================================
   HOLOFINGER SUITE — 共通スタイル
   各アプリは body の --ac(アクセント色)で個性を出す。
   ================================================================ */
*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ width:100%; height:100%; overflow:hidden; background:#020409 }
body{
  font-family: Consolas, "Cascadia Mono", "Yu Gothic UI", Meiryo, monospace;
  color:#cfeeff; user-select:none;
  --ac:#00f0ff;
}
a{ color:#8fe8ff }

.panel{
  background:rgba(4,14,30,.55);
  border:1px solid rgba(0,240,255,.25);
  backdrop-filter:blur(8px);
  box-shadow:0 0 24px rgba(0,240,255,.08), inset 0 0 18px rgba(0,240,255,.05);
}

/* ---------- HUD共通 ---------- */
.hud-tl{
  position:fixed; top:16px; left:16px; z-index:10; padding:10px 14px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.htitle{ font-size:15px; letter-spacing:.35em; color:#eaffff; text-shadow:0 0 10px var(--ac) }
.htitle .ver{ font-size:9px; letter-spacing:.2em; color:#6fdcff; opacity:.8 }
.hsub{ margin-top:6px; font-size:10.5px; letter-spacing:.22em; color:#8fe8ff }
.live{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--ac); box-shadow:0 0 8px var(--ac); margin-right:8px;
  animation:hb-blink 1.6s infinite;
}
@keyframes hb-blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.hud-tr{
  position:fixed; top:16px; right:16px; z-index:10; padding:10px 14px;
  display:flex; gap:18px; font-size:10px; letter-spacing:.18em; color:#7fd8ef;
  clip-path:polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}
.hud-tr b{
  display:block; margin-top:3px; font-size:14px; font-weight:400;
  color:#eaffff; text-shadow:0 0 8px rgba(0,240,255,.8);
}
.hlink{
  position:fixed; bottom:12px; left:14px; z-index:10;
  font-size:10px; letter-spacing:.2em; color:rgba(140,220,255,.6);
  text-decoration:none; border:1px solid rgba(0,240,255,.2);
  padding:4px 10px; background:rgba(3,10,22,.5);
}
.hlink:hover{ color:#fff; border-color:var(--ac) }
#hint{
  position:fixed; bottom:12px; left:50%; transform:translateX(-50%); z-index:10;
  font-size:10.5px; letter-spacing:.06em; color:rgba(160,225,255,.8);
  background:rgba(3,10,22,.55); border:1px solid rgba(0,240,255,.15);
  padding:7px 16px; max-width:82vw; text-align:center; line-height:1.8;
}
#hint b{ color:#aef3ff; font-weight:400 }

/* ---------- ボタン ---------- */
.hbtn{
  font:inherit; font-size:11px; letter-spacing:.2em; color:#9fe6ff;
  background:rgba(0,22,44,.45); border:1px solid rgba(0,240,255,.28);
  cursor:pointer; padding:8px 14px;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.hbtn:hover{ border-color:var(--ac); color:#fff }
.hbtn.on{
  background:rgba(0,60,90,.55); border-color:var(--ac); color:#fff;
  text-shadow:0 0 8px var(--ac); box-shadow:0 0 14px rgba(0,240,255,.25);
}
.hbtn:disabled{ opacity:.4; cursor:default }

/* エアカーソルのホバー対象(data-air属性の要素に付く) */
.air-hover{ outline:2px solid var(--ac); outline-offset:2px; box-shadow:0 0 18px var(--ac) }

/* ---------- 起動画面 ---------- */
.hb-boot{
  position:fixed; inset:0; z-index:30; display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 38%, rgba(0,50,85,.55), rgba(2,4,10,.97) 70%);
  transition:opacity .6s;
}
.hb-boot.gone{ opacity:0; pointer-events:none }
.hb-box{
  width:min(560px, 92vw); padding:32px 36px; text-align:center;
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.hb-logo{
  font-size:34px; letter-spacing:.32em; padding-left:.32em; color:#eaffff;
  text-shadow:0 0 18px var(--ac), 0 0 60px rgba(0,240,255,.35);
}
.hb-sub{ margin-top:8px; font-size:10px; letter-spacing:.26em; color:#66d9ff }
.hb-desc{ margin:20px 0 16px; font-size:12px; line-height:1.9; color:#b9e9ff }
.hb-stat{ font-size:10px; letter-spacing:.22em; color:#7fd8ef; margin:6px 0 }
.hb-chip{
  display:inline-block; min-width:120px; padding:2px 10px; margin-left:8px;
  border:1px solid rgba(0,240,255,.3); color:#eaffff;
}
.hb-chip.ok{ border-color:rgba(80,255,170,.6); color:#8fffcf; text-shadow:0 0 8px rgba(80,255,170,.7) }
.hb-chip.err{ border-color:rgba(255,90,110,.6); color:#ff9aa8 }
.hb-start{
  margin-top:20px; font:inherit; font-size:14px; letter-spacing:.3em;
  color:#031018; background:linear-gradient(180deg,#19f2ff,#0ec2ef);
  border:none; padding:13px 32px; cursor:pointer;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow:0 0 26px rgba(0,240,255,.45);
  transition:transform .12s, box-shadow .2s;
}
.hb-start:hover{ transform:translateY(-1px); box-shadow:0 0 40px rgba(0,240,255,.75) }
.hb-start:disabled{ opacity:.55; cursor:wait }
.hb-err{ margin-top:12px; font-size:11px; line-height:1.7; color:#ff9aa8; min-height:1em }
.hb-note{ margin-top:14px; font-size:9.5px; letter-spacing:.05em; color:rgba(140,200,230,.55); line-height:1.8 }

/* ---------- AI設定(shared/holo-ai.js) ---------- */
.hai-mini{ font-size:9px; padding:3px 9px; margin-left:8px; vertical-align:middle }
.hai-overlay{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(2,4,10,.72); backdrop-filter:blur(3px);
}
.hai-box{
  width:min(480px, 94vw); padding:22px 24px; text-align:left;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.hai-t{ font-size:13px; letter-spacing:.3em; color:#eaffff; text-shadow:0 0 10px var(--ac); margin-bottom:10px }
.hai-note{ font-size:10px; line-height:1.8; color:#8fc8e0; margin-bottom:8px }
.hai-row{ display:grid; grid-template-columns:118px 1fr; gap:8px; align-items:center; margin:8px 0 }
.hai-row label{ font-size:10px; letter-spacing:.1em; color:#9fd8ef }
.hai-row input, .hai-row select{
  font:inherit; font-size:12px; color:#eaffff; padding:7px 10px;
  background:rgba(0,20,40,.6); border:1px solid rgba(0,240,255,.3); outline:none;
}
.hai-row input:focus, .hai-row select:focus{ border-color:var(--ac) }
.hai-row select option{ background:#04101e }
.hai-btns{ display:flex; gap:8px; margin-top:12px }
.hai-msg{ margin-top:10px; font-size:10.5px; line-height:1.7; color:#aef3d9; min-height:1.2em }
.hai-close{ display:block; margin:14px 0 0 auto }

/* ================================================================
   モバイル/タッチ対応(2026-07-10)
   - ページ側 <style> は本ファイルより後に読まれるため、ページ既定を
     上書きする共通モバイル規則は body 前置で詳細度を上げている。
   - 小画面のレーン割り:
       上段左=タイトル(.hud-tl) / 上段右=⌂HUB(.hlink)
       2段目左=統計(.hud-tr) / 右端の縦列=各アプリのパネル(top:56px〜)
       下段=ボタン列(#btns/#bar は left:8px〜right:104px)
       右下=プライバシートグル(.hpv-wrap)専用レーン
   ================================================================ */
body{ touch-action:manipulation; -webkit-tap-highlight-color:transparent }
.hb-logo{ font-size:clamp(19px, 6.4vw, 34px) }
.hb-box{ padding:clamp(18px, 5vw, 32px) clamp(14px, 5.5vw, 36px) }

@media (pointer:coarse){
  .hbtn{ padding:11px 14px }
}

@media (max-width:700px), (max-height:480px){
  body .hud-tl{ top:8px; left:8px; padding:7px 10px }
  body .htitle{ font-size:12px; letter-spacing:.22em }
  body .htitle .ver{ display:none }
  body .hsub{ font-size:9px; letter-spacing:.1em }
  body .hud-tr{ top:56px; right:auto; left:8px; padding:5px 9px; gap:9px; font-size:8px; letter-spacing:.08em }
  body .hud-tr b{ font-size:11px; margin-top:2px }
  body .hlink{ top:8px; bottom:auto; left:auto; right:8px; padding:8px 12px; font-size:10px }
  body #hint{ display:none }
  body #toast{ white-space:normal; max-width:92vw; text-align:center }
  body #btns, body #bar{
    left:8px; right:104px; transform:none; max-width:none;
    flex-wrap:wrap; justify-content:flex-start; gap:6px; padding:6px 8px;
    bottom:calc(8px + env(safe-area-inset-bottom));
  }
  body #recDot{ top:56px; right:8px }
  body .hpv-wrap{ right:8px; bottom:calc(10px + env(safe-area-inset-bottom)) }
  body .hpv-wrap .hpv-row{ flex-direction:column; gap:6px; align-items:stretch }
  body .hpv-toast{ right:8px; bottom:auto; top:64px }
  body .hai-row{ grid-template-columns:92px 1fr }
}