/* ============================================================
   base.css — 設計トークン / リセット / 起動 / ログイン
   色は必ずこのトークン経由で書く（直書きすると演出が破綻する）
   ============================================================ */
:root{
  /* 背景 */
  --bg:        #03060d;
  --bg-2:      #060c18;
  --panel:     rgba(12,22,40,.55);
  --panel-2:   rgba(9,17,32,.78);
  --line:      rgba(94,234,255,.16);
  --line-2:    rgba(94,234,255,.34);

  /* 文字 */
  --ink:       #dbeafe;
  --ink-2:     #8fa8c8;
  --ink-3:     #5c7699;
  --muted:     #6b83a3;

  /* 主色 */
  --cy:        #22d3ee;   /* シアン（基調） */
  --cy-soft:   #7dd3fc;
  --blue:      #3b82f6;
  --violet:    #a78bfa;
  --amber:     #fbbf24;
  --rose:      #fb7185;
  --green:     #34d399;

  --glow:      0 0 18px rgba(34,211,238,.45);
  --glow-soft: 0 0 40px rgba(34,211,238,.18);

  --r:         14px;
  --dock-w:    290px;
  --font: "Inter", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  overscroll-behavior:none;
}
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
a{ color:var(--cy-soft); }
::selection{ background:rgba(34,211,238,.3); }

/* スクロールバー */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(94,234,255,.18); border-radius:8px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(94,234,255,.34); }

.muted{ color:var(--muted); font-size:13px; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ============ 背景演出 ============ */
#bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:
  radial-gradient(120% 80% at 50% 0%,   #0a1830 0%, transparent 60%),
  radial-gradient(90% 70% at 50% 110%,  #0a1226 0%, transparent 60%),
  var(--bg); }
.bg-grid{ position:absolute; inset:-20%;
  background-image:
    linear-gradient(rgba(94,234,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,234,255,.055) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(700px) rotateX(62deg) translateY(22%);
  mask-image:radial-gradient(60% 55% at 50% 40%, #000 0%, transparent 78%);
  animation:gridDrift 22s linear infinite;
}
@keyframes gridDrift{ to{ background-position:0 64px, 64px 0; } }
.bg-glow{ position:absolute; left:50%; top:42%; width:820px; height:820px; margin:-410px 0 0 -410px;
  background:radial-gradient(circle, rgba(34,211,238,.14) 0%, rgba(59,130,246,.07) 38%, transparent 68%);
  filter:blur(12px); animation:breathe 9s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.9 } 50%{ transform:scale(1.1); opacity:.6 } }
.bg-scan{ position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px); }
.bg-vignette{ position:absolute; inset:0;
  background:radial-gradient(100% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.72) 100%); }

/* ============ 起動シーケンス ============ */
#boot{ position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:var(--bg); transition:opacity .6s ease, visibility .6s; }
#boot.gone{ opacity:0; visibility:hidden; pointer-events:none; }
#boot[hidden]{ display:none; }
.boot-inner{ width:min(560px,86vw); text-align:center; }
.boot-mark{ font-family:var(--mono); font-size:clamp(30px,7vw,52px); letter-spacing:.34em;
  color:var(--cy); text-shadow:var(--glow); animation:flick 2.6s steps(1) infinite; }
@keyframes flick{ 0%,96%,100%{opacity:1} 97%{opacity:.55} 98%{opacity:1} 99%{opacity:.7} }
.boot-sub{ margin-top:8px; font-size:11px; letter-spacing:.24em; color:var(--ink-2); text-transform:uppercase; }
.boot-log{ margin:26px auto 14px; height:104px; text-align:left; font-family:var(--mono); font-size:11.5px;
  color:rgba(125,211,252,.72); overflow:hidden; }
.boot-log div{ animation:logIn .25s ease both; }
@keyframes logIn{ from{opacity:0; transform:translateX(-6px)} to{opacity:1; transform:none} }
.boot-bar{ height:2px; background:rgba(94,234,255,.14); border-radius:2px; overflow:hidden; }
.boot-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--blue),var(--cy));
  box-shadow:var(--glow); transition:width .4s ease; }

/* ============ ログイン ============ */
#login{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; }
#login[hidden]{ display:none; }
.login-card{ position:relative; z-index:1; width:min(420px,92vw); text-align:center;
  padding:34px 28px 30px; border-radius:22px;
  background:linear-gradient(180deg, rgba(13,25,46,.82), rgba(6,12,24,.9));
  border:1px solid var(--line); box-shadow:0 30px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px); animation:cardIn .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cardIn{ from{opacity:0; transform:translateY(18px) scale(.97)} to{opacity:1; transform:none} }
#login-core{ width:170px; height:170px; margin:-8px auto 4px; display:block; }
.login-card h1{ font-family:var(--mono); font-size:24px; letter-spacing:.3em; color:var(--cy);
  text-shadow:var(--glow); }
.login-lead{ margin:12px 0 22px; color:var(--ink-2); font-size:14px; }
.btn-primary{ display:inline-flex; align-items:center; gap:10px; width:100%; justify-content:center;
  padding:13px 18px; border-radius:12px; font-weight:600; letter-spacing:.02em;
  background:linear-gradient(135deg, rgba(34,211,238,.2), rgba(59,130,246,.24));
  border:1px solid var(--line-2); color:var(--ink);
  box-shadow:0 8px 26px rgba(34,211,238,.14), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .15s, box-shadow .25s, background .25s; }
.btn-primary:hover{ transform:translateY(-1px);
  background:linear-gradient(135deg, rgba(34,211,238,.3), rgba(59,130,246,.34));
  box-shadow:0 14px 34px rgba(34,211,238,.26); }
.btn-primary:active{ transform:translateY(0); }
.login-note{ min-height:20px; margin-top:12px; font-size:12.5px; color:var(--rose); }
.login-owner{ margin-top:16px; font-size:11px; letter-spacing:.16em; color:var(--muted); }

@media (prefers-reduced-motion:reduce){
  .bg-grid,.bg-glow,.boot-mark{ animation:none !important; }
}