/* ================= 配色トークン =================
     自社HP（tryelead.biz）と同じネイビー×ゴールドの近未来路線。
     既定はダーク。ライトはアイボリー地の同一アイデンティティ。
     色は必ずここのトークン経由で使う（直書きするとテーマが破綻する） */
  :root{
    /* 明るい面（アイボリー） */
    --canvas:#F4F1EA; --card:#FFFFFF; --surface:#FBF9F4; --surface2:#EFEADF;
    --ink:#0A1229; --muted:#5A5F6E; --faint:#6E7480;   /* 補足文字。白地で読めるところまで濃くする */
    --line:rgba(10,18,41,.12); --line2:rgba(10,18,41,.22);
    --shadow:rgba(10,18,41,.14); --card-glass:rgba(255,255,255,.76);
    /* 操作パネル（サイドバー／ヘッダー）は昼夜ともダーク */
    --shell:#050912; --shell2:#101B3A; --navy:#0A1229;
    /* ゴールド＝主役。シアン＝差し色 */
    --gold:#9C7C3F; --gold-line:#C6A15B; --gold-soft:#F3EBD9;
    --cyan:#2E9BC4;
    --accent-grad:linear-gradient(135deg,#E4C97E,#C6A15B 60%,#9C7C3F);
    --on-accent:#050912;
    --glow:rgba(198,161,91,.45);
    /* 旧名。ゴールドに寄せて互換を保つ（既存のCSSが参照している） */
    --teal:#9C7C3F; --teal-b:#C6A15B;
    --shu:#B23A2E;
    --sat:#EFF4FA; --sun:#FBECEC; --off:#F1EEE6;
    --font-en:"Rajdhani","Noto Sans JP",system-ui,sans-serif;
  }
  :root[data-theme="dark"]{
    --canvas:#050912; --card:#101B3A; --surface:rgba(10,18,41,.6); --surface2:rgba(24,38,80,.55);
    --ink:#F2F0EA; --muted:rgba(242,240,234,.64); --faint:rgba(242,240,234,.42);
    --line:rgba(198,161,91,.22); --line2:rgba(198,161,91,.40);
    --shadow:rgba(0,0,0,.7); --card-glass:rgba(16,27,58,.55);
    --gold:#E4C97E; --gold-line:#C6A15B; --gold-soft:rgba(198,161,91,.14);
    --cyan:#6FD6FF;
    --accent-grad:linear-gradient(135deg,#E4C97E,#C6A15B 60%,#9C7C3F);
    --glow:rgba(198,161,91,.55);
    --teal:#C6A15B; --teal-b:#E4C97E;
    --shu:#FF9F96;
    --sat:rgba(111,214,255,.07); --sun:rgba(255,107,94,.08); --off:rgba(242,240,234,.05);
  }

  /* ---------- 背景：グリッドフロア＋オーロラ（HPと同じ） ---------- */
  #bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
  #bg .aur{position:absolute;left:-10%;right:-10%;top:-20%;height:70vh;
    background:radial-gradient(420px 260px at 18% 40%,rgba(198,161,91,.22),transparent 65%),
      radial-gradient(460px 280px at 78% 20%,rgba(111,214,255,.16),transparent 65%),
      radial-gradient(400px 260px at 50% 80%,rgba(164,114,255,.12),transparent 65%);
    filter:blur(40px);animation:bgDrift 9s ease-in-out infinite alternate;}
  @keyframes bgDrift{to{transform:translate(40px,24px) scale(1.12);}}
  #bg .floor{position:absolute;left:0;right:0;bottom:0;height:44vh;
    background:repeating-linear-gradient(90deg,rgba(198,161,91,.14) 0 1px,transparent 1px 80px),
      repeating-linear-gradient(0deg,rgba(198,161,91,.14) 0 1px,transparent 1px 80px);
    transform:perspective(600px) rotateX(64deg) translateY(-10%);transform-origin:bottom center;
    mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent);
    -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent);
    animation:bgGrid 6s linear infinite;}
  @keyframes bgGrid{from{background-position:0 0,0 0}to{background-position:0 0,0 80px}}
  #bg .scan{position:absolute;left:0;right:0;height:140px;top:-140px;
    background:linear-gradient(180deg,transparent,rgba(111,214,255,.07),transparent);
    animation:bgScan 7s linear infinite;}
  @keyframes bgScan{to{top:120%}}
  /* 明るい面では背景演出を控えめに（文字が読みにくくなるため） */
  :root:not([data-theme="dark"]) #bg{opacity:.35;}
  @media(prefers-reduced-motion:reduce){ #bg .aur,#bg .floor,#bg .scan{animation:none;} #bg .scan{display:none;} }

  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--canvas); color:var(--ink);
    font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Hiragino Sans','Yu Gothic',Meiryo,sans-serif;
    -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;
  }
  #app,#login{position:relative;z-index:1;}
  /* 数字・英字は Rajdhani（HPの見出しと同じ）。桁が揃うようにタブular */
  .mono{font-family:var(--font-en);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
  /* ボタン・入力欄はブラウザ既定が黒文字。テーマに追従させる（ダークで見えなくなるのを防ぐ） */
  button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
  input,select,textarea{font-family:inherit;color:var(--ink);}
  select option{background:var(--card);color:var(--ink);}
  .hidden{display:none !important;}

  /* ---------- ログイン ---------- */
  /* 操作パネルと同じく常にダーク。オーロラ・光の粒・走査線で近未来に */
  #login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
    position:relative;overflow:hidden;color:#fff;
    background:linear-gradient(165deg,var(--shell2),var(--shell));}
  .lg-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
  .lg-aur{position:absolute;left:-15%;right:-15%;top:-14%;height:60%;
    background:radial-gradient(220px 150px at 20% 45%,rgba(198,161,91,.5),transparent 70%),
      radial-gradient(240px 160px at 80% 15%,rgba(111,214,255,.32),transparent 70%),
      radial-gradient(230px 150px at 55% 80%,rgba(164,114,255,.32),transparent 70%);
    filter:blur(26px);opacity:.85;animation:lgDrift 6s ease-in-out infinite alternate;}
  @keyframes lgDrift{to{transform:translate(30px,18px) scale(1.12);}}
  .lg-scan{position:absolute;left:0;right:0;height:110px;top:-110px;
    background:linear-gradient(180deg,transparent,rgba(198,161,91,.18),transparent);
    animation:lgScan 4.5s linear infinite;}
  @keyframes lgScan{to{top:110%;}}
  .lg-dots{position:absolute;inset:0;}
  .lg-dots i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--cyan);
    box-shadow:0 0 8px var(--cyan);opacity:.7;animation:lgRise linear infinite;}
  @keyframes lgRise{0%{transform:translateY(0);opacity:0;}15%{opacity:.85;}100%{transform:translateY(-260px);opacity:0;}}
  .lg-ring{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);border-radius:50%;
    border:1px solid rgba(198,161,91,.22);animation:lgRipple 3.8s ease-out infinite;}
  .lg-ring.r2{animation-delay:1.9s;}
  @keyframes lgRipple{0%{width:90px;height:90px;opacity:.7;}100%{width:520px;height:520px;opacity:0;}}
  .lg-wrap{width:100%;max-width:360px;position:relative;}
  /* 入場 */
  .lg-a{opacity:0;transform:translateY(16px) scale(.95);animation:lgPop .6s cubic-bezier(.2,1.5,.4,1) forwards;}
  @keyframes lgPop{to{opacity:1;transform:none;}}
  .lg-a.a1{animation-delay:.06s;} .lg-a.a2{animation-delay:.18s;}
  .lg-a.a3{animation-delay:.30s;} .lg-a.a4{animation-delay:.42s;}
  .lg-halo{width:130px;height:130px;margin:0 auto 4px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(circle,rgba(198,161,91,.34),transparent 62%);
    animation:lgHalo 2.8s ease-in-out infinite;}
  @keyframes lgHalo{50%{transform:scale(1.12);opacity:.78;}}
  .co-en{font-family:var(--font-en);font-size:10px;letter-spacing:.34em;color:#E4C97E;margin-top:4px;text-align:center;}
  .brand{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;
    padding:6px 12px;border-radius:6px;margin-bottom:16px;}
  .brand i{width:8px;height:8px;border-radius:2px;background:var(--shu);display:block;}
  .brand span{letter-spacing:.18em;font-size:12px;font-weight:600;}
  .lg-head{text-align:center;margin-bottom:24px;}
  .lg-head .logo{width:88px;height:auto;display:block;}
  .co-name{font-size:19px;margin:0;font-weight:700;letter-spacing:.02em;color:#fff;}
  .card{background:var(--card-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 70px -40px var(--shadow);}
  /* ログインのカードはガラス調＋光が横切る */
  .lg-card{padding:24px;position:relative;overflow:hidden;
    background:rgba(16,27,58,.55);border:1px solid rgba(198,161,91,.3);
    backdrop-filter:blur(6px);box-shadow:0 20px 50px -24px rgba(0,0,0,.7);}
  .lg-card::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(110deg,transparent 35%,rgba(198,161,91,.26),transparent 65%);
    transform:translateX(-100%);animation:lgSheen 4.8s ease-in-out infinite;}
  @keyframes lgSheen{0%,65%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
  #login .hint{color:#8fa3c8;}
  #login .err{background:rgba(255,107,94,.16);color:#FF9F96;}
  @media(prefers-reduced-motion:reduce){
    #login .lg-aur,#login .lg-scan,#login .lg-dots i,#login .lg-ring,
    .lg-halo,.lg-card::after{animation:none;}
    .lg-a{opacity:1;transform:none;animation:none;}
    .lg-dots,.lg-scan,.lg-ring{display:none;}
  }
  .tabs{display:flex;gap:4px;padding:4px;background:var(--surface2);border-radius:8px;margin-bottom:20px;font-size:14px;}
  .tabs button{flex:1;padding:6px 0;border-radius:6px;font-weight:500;color:var(--faint);}
  .tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px var(--shadow);}
  label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:6px;}
  .fld{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:14px;outline:none;
    background:var(--card);color:var(--ink);}
  .fld:focus{border-color:var(--teal-b);box-shadow:0 0 0 3px var(--glow);}
  .btn{width:100%;border-radius:10px;padding:11px 0;font-size:14px;font-weight:700;color:var(--on-accent);
    background:var(--accent-grad);box-shadow:0 8px 22px -10px var(--glow);transition:filter .15s,transform .15s;}
  .btn:hover{filter:brightness(1.05);transform:translateY(-1px);} .btn:disabled{opacity:.5;cursor:default;}
  .err{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--shu);
    background:rgba(178,58,46,.10);border-radius:8px;padding:8px 12px;margin-top:12px;}
  .hint{text-align:center;font-size:11px;color:var(--faint);margin-top:16px;}
  /* ログインボタンはゆっくり明滅して押したくなるように */
  .gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;border:none;
    border-radius:12px;padding:12px 0;font-size:14px;font-weight:700;background:#fff;color:#10203A;
    position:relative;z-index:1;transition:transform .15s;
    box-shadow:0 0 26px -6px rgba(198,161,91,.85);animation:gbGlow 2.6s ease-in-out infinite;}
  @keyframes gbGlow{50%{box-shadow:0 0 34px 0 rgba(198,161,91,.65);}}
  .gbtn:hover{transform:translateY(-1px);}
  .gbtn:active{transform:scale(.98);}
  @media(prefers-reduced-motion:reduce){.gbtn{animation:none;}}
  .orline{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:11px;color:var(--faint);}
  .orline span{height:1px;background:var(--line);flex:1;}