/* ============================================================
   bcast — 共通スタイル（ダークガラス・ターミナル調）

   ★ 出どころと変遷（2026-08-20・同日に3回変わっている）
     ① DAS 紺（フェーズ0の決定）
     ② OPTIC 系のダークカード
     ③ Dojin Portal の**ライト**ガラス（ユーザー指示）
     ④ **これ**: ガラスのまま**ダーク＋角を立てて端末寄り**に
        （ユーザー指示「角丸すぎる／もっとハッカーっぽい画面に」）

   ★ ガラスの作り（blur + saturate + 白の細枠 + オーロラ）は Dojin の作法を
     そのまま踏襲している。Dojin 側にも**ダークの系統**がある
     （Book Viewer / アクセス解析＝暗いオーロラ＋半透明黒）。その系統に寄せた。
     ライトのままでは、どれだけ角を立てても「ハッカーっぽさ」は出ない。

   ★ 引き継いだ作法（旧 iPad Safari 対策・portal の注記どおり）:
     ・flexbox の **gap を使わない**（margin で間隔を作る）
     ・**inset を使わない**（top/left/right/bottom で書く）
     ・-webkit- プレフィックスを併記する
     ・タッチ端末では**オーロラのアニメを止めて blur を軽く**する
       （blur(90px) の球を毎フレーム描き直すと iPhone が固まる・実測）
     ・clip-path と backdrop-filter を併用しない（iOS で四角く潰れる）

   ★ 角は **2〜3px**。角丸に見えない程度に、切りっぱなしにも見えない程度。
   ★ 書体は**全面モノスペース**（JetBrains Mono）。これが端末らしさの本体で、
     角の大きさより効く。
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#07090d;
  --ink:#e6edf3;
  --ink-2:#8b949e;
  --ink-3:#6e7681;
  /* ガラス面。暗い半透明＋白の細枠 */
  --glass:rgba(18,24,33,.55);
  --glass-hi:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.2);
  --well:rgba(0,0,0,.36);
  /* 差し色は青系（2026-08-20 ユーザー指示）。緑・琥珀・赤は意味の色 */
  --accent:#38bdf8;
  --accent-dim:rgba(56,189,248,.14);
  --green:#3fe08a;
  --amber:#f0b429;
  --red:#ff5c5c;
  /* ★ 日本語を足す（2026-08-20 ユーザー指示「大事なところは日本語に」）。
       JetBrains Mono に日本語の字は無いので、そこだけ端末の日本語書体に落ちる。
       欧文と**数字は等幅のまま**なので、時計の桁は揃ったまま。
       Web フォントを増やさない（読み込みを重くしない）ための並び。 */
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,
         'Hiragino Sans','Yu Gothic',Meiryo,sans-serif;
  --r:3px;
  --r-sm:2px;
}

html,body{height:100%}
body{font-family:var(--mono);
     background:var(--bg);
     background:linear-gradient(160deg,#080b10 0%,#0a0e14 50%,#070910 100%);
     background-attachment:fixed;
     color:var(--ink);font-size:14px;
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     -webkit-text-size-adjust:100%;overflow-x:hidden}

/* ---------- 背景オーロラ（暗い版）---------- */
.aurora{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;
        overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;
     -webkit-filter:blur(90px);filter:blur(90px);opacity:.5}
.orb-a{width:640px;height:640px;left:-180px;top:-200px;
       background:radial-gradient(circle at 40% 40%,#0e6b62,rgba(14,107,98,0));
       -webkit-animation:drift-a 26s ease-in-out infinite alternate;
       animation:drift-a 26s ease-in-out infinite alternate}
.orb-b{width:560px;height:560px;right:-160px;top:2%;
       background:radial-gradient(circle at 55% 45%,#123a6b,rgba(18,58,107,0));
       -webkit-animation:drift-b 32s ease-in-out infinite alternate;
       animation:drift-b 32s ease-in-out infinite alternate}
.orb-c{width:680px;height:680px;left:20%;bottom:-340px;
       background:radial-gradient(circle at 50% 40%,#2a1c5c,rgba(42,28,92,0));
       -webkit-animation:drift-c 38s ease-in-out infinite alternate;
       animation:drift-c 38s ease-in-out infinite alternate}
@-webkit-keyframes drift-a{to{-webkit-transform:translate(70px,50px) scale(1.08)}}
@keyframes drift-a{to{-webkit-transform:translate(70px,50px) scale(1.08);
                      transform:translate(70px,50px) scale(1.08)}}
@-webkit-keyframes drift-b{to{-webkit-transform:translate(-60px,70px) scale(1.05)}}
@keyframes drift-b{to{-webkit-transform:translate(-60px,70px) scale(1.05);
                      transform:translate(-60px,70px) scale(1.05)}}
@-webkit-keyframes drift-c{to{-webkit-transform:translate(-80px,-50px) scale(1.1)}}
@keyframes drift-c{to{-webkit-transform:translate(-80px,-50px) scale(1.1);
                      transform:translate(-80px,-50px) scale(1.1)}}
@media (prefers-reduced-motion: reduce){.orb{-webkit-animation:none;animation:none}}
@media (hover: none), (max-width: 720px){
  .orb{-webkit-animation:none!important;animation:none!important;
       -webkit-filter:blur(55px);filter:blur(55px);opacity:.45}
}

/* ---------- 方眼（製図紙のような薄い格子）----------
   ハッカーらしさは、光る色ではなく**細い線と等幅の字**で出す。
   alpha .022 は「言われないと気づかないが、無いと寂しい」濃さ。 */
.grid{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
      background-size:46px 46px}

/* ---------- ガラス ---------- */
.glass{background:var(--glass);
       -webkit-backdrop-filter:blur(26px) saturate(150%);
       backdrop-filter:blur(26px) saturate(150%);
       border:1px solid var(--line);
       border-radius:var(--r);
       box-shadow:0 16px 50px rgba(0,0,0,.5)}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass{background:rgba(13,17,23,.95)}
}

/* ---------- 文字の型 ---------- */
/* 小見出し。日本語なので大文字化はせず、字間だけ広げる */
.label{font-size:11px;font-weight:500;color:var(--ink-3);letter-spacing:.12em}
.dim{color:var(--ink-3)}
.hairline{border:0;border-top:1px solid var(--line);margin:18px 0}

/* 銘板。四角のまま（角丸にしない）＋細い青枠 */
.mark{width:38px;height:38px;border:1px solid rgba(56,189,248,.5);
      border-radius:var(--r-sm);background:var(--accent-dim);
      color:var(--accent);font-size:19px;font-weight:700;line-height:36px;
      text-align:center}
.wordmark{font-size:22px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
/* 点滅する caret。login だけで使う（再生画面は開きっぱなしなので置かない） */
.caret{color:var(--accent);font-weight:400;
       -webkit-animation:blink 1.1s step-end infinite;
       animation:blink 1.1s step-end infinite}
@-webkit-keyframes blink{50%{opacity:0}}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .caret{-webkit-animation:none;animation:none}
}

/* ---------- 入力 ---------- */
.field{display:block;width:100%;height:46px;
       background:var(--well);border:1px solid var(--line);
       border-radius:var(--r-sm);padding:0 13px;
       font-family:var(--mono);font-size:16px;color:var(--ink);
       outline:none;-webkit-appearance:none;appearance:none;
       transition:border-color .15s ease, box-shadow .15s ease}
.field::placeholder{color:var(--ink-3)}
.field:focus{border-color:rgba(56,189,248,.6);
             box-shadow:0 0 0 3px rgba(56,189,248,.13)}

/* ---------- 釦 ---------- */
.btn{display:block;width:100%;height:46px;
     background:var(--glass-hi);border:1px solid var(--line-2);
     border-radius:var(--r-sm);color:var(--ink);
     font-family:var(--mono);font-size:13px;font-weight:500;
     letter-spacing:.08em;cursor:pointer;
     -webkit-appearance:none;appearance:none;
     transition:background .15s ease, border-color .15s ease, color .15s ease}
.btn:hover:not(:disabled){background:rgba(255,255,255,.09);
                          border-color:rgba(255,255,255,.3)}
.btn:active:not(:disabled){background:rgba(255,255,255,.05)}
.btn:disabled{opacity:.4;cursor:default}
/* 主釦は青の縁取り（塗り潰さない＝端末の割り当てキーらしく） */
.btn-primary{color:var(--accent);border-color:rgba(56,189,248,.55);
             background:var(--accent-dim);font-weight:700}
.btn-primary:hover:not(:disabled){background:rgba(56,189,248,.22);
                                  border-color:rgba(56,189,248,.8)}
/* 二の釦は面も枠も持たない */
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-3);
           letter-spacing:.1em}
.btn-ghost:hover:not(:disabled){background:var(--glass-hi);
                                border-color:transparent;color:var(--ink-2)}

/* ---------- 状態の丸薬（意味の色。地の色に寄せない）---------- */
.badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
       border-radius:var(--r-sm);padding:3px 8px;border:1px solid}
.badge.neutral{color:var(--ink-3);background:var(--glass-hi);border-color:var(--line)}
.badge.approved,.badge.live{color:var(--green);background:rgba(63,224,138,.12);
                            border-color:rgba(63,224,138,.4)}
.badge.pending{color:var(--amber);background:rgba(240,180,41,.12);
               border-color:rgba(240,180,41,.4)}
.badge.blocked,.badge.err{color:var(--red);background:rgba(255,92,92,.12);
                          border-color:rgba(255,92,92,.4)}

/* ---------- 通信の1行（> を頭に付ける）---------- */
.line{min-height:18px;font-size:12px;color:var(--ink-2);letter-spacing:.02em;
      line-height:1.5;word-break:break-word}
.line:not(:empty):before{content:'> ';color:var(--ink-3)}
.line.ok{color:var(--accent)}
.line.err{color:var(--red)}

.note{font-size:10px;color:var(--ink-3);letter-spacing:.14em;
      text-transform:uppercase;text-align:center}
.hidden{display:none!important}