/* =========================================================
     配色トークン
     余計な装飾を持たない、明るく静かな配色。
     色は必ずこのトークン経由で使う（直書きするとダークで破綻する）
     ========================================================= */
  :root{
    /* アクセント（唯一の主張色） */
    --accent:#3061D4; --accent-h:#2550B4; --accent-soft:rgba(48,97,212,.10);
    --accent-ink:#FFFFFF; --accent-line:rgba(48,97,212,.35);
    --accent-grad:#3061D4;              /* 旧グラデーション枠。デモでは単色 */
    --glow:rgba(48,97,212,.16);
    --gold:#3061D4; --gold-line:#C7D2EA; --gold-soft:rgba(48,97,212,.10);
    --teal:#0E9F87; --teal-b:#3061D4; --cyan:#3061D4;
    --shu:#C0453A;
    /* 面と文字 */
    --canvas:#F7F8FA; --card:#FFFFFF; --surface:#F4F5F8; --surface2:#ECEEF3;
    --ink:#141A22; --muted:#59616F; --faint:#8A92A1;
    --line:#E5E8EE; --line2:#D2D7E0;
    --sat:#F2F6FD; --sun:#FDF3F2; --off:#F1F3F6;
    --shadow:rgba(20,26,34,.10); --card-glass:#FFFFFF;
    /* サイドバー・ヘッダー */
    --side-bg:#FFFFFF; --side-ink:#3A4250; --side-ink2:#8A92A1; --side-line:#E5E8EE;
    --side-hover:#F4F5F8; --side-on-bg:rgba(48,97,212,.09); --side-on-ink:#1F3E8C;
    --radius:10px;
  }
  :root[data-theme="dark"]{
    --accent:#6D9BFF; --accent-h:#8FB4FF; --accent-soft:rgba(109,155,255,.14);
    --accent-ink:#0A1020; --accent-line:rgba(109,155,255,.4);
    --accent-grad:#6D9BFF; --glow:rgba(109,155,255,.20);
    --gold:#6D9BFF; --gold-line:rgba(109,155,255,.4); --gold-soft:rgba(109,155,255,.12);
    --teal:#3FC0A8; --teal-b:#6D9BFF; --cyan:#6D9BFF;
    --shu:#E4756A;
    --canvas:#0D1016; --card:#161A21; --surface:#1A1F27; --surface2:#222833;
    --ink:#E8ECF3; --muted:#9AA3B2; --faint:#727B8B;
    --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
    --sat:rgba(109,155,255,.07); --sun:rgba(224,110,98,.08); --off:rgba(255,255,255,.05);
    --shadow:rgba(0,0,0,.5); --card-glass:#161A21;
    --side-bg:#12151B; --side-ink:#C6CEDB; --side-ink2:#7E8798; --side-line:rgba(255,255,255,.08);
    --side-hover:rgba(255,255,255,.05); --side-on-bg:rgba(109,155,255,.14); --side-on-ink:#CFE0FF;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--canvas); color:var(--ink);
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',
      'Hiragino Sans','Noto Sans JP','Yu Gothic',Meiryo,sans-serif;
    font-feature-settings:"palt" 1;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  .mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;}
  /* ボタン・入力欄はブラウザ既定が黒文字。テーマに追従させる */
  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;background:var(--canvas);color:var(--ink);}
  #login::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(680px 320px at 50% -8%,var(--accent-soft),transparent 70%);}
  .lg-wrap{width:100%;max-width:392px;position:relative;
    animation:lgIn .5s cubic-bezier(.22,.8,.3,1) both;}
  @keyframes lgIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
  .lg-head{text-align:center;margin-bottom:26px;}
  .lg-head .logo{width:46px;height:46px;display:block;margin:0 auto 14px;border-radius:13px;}
  .co-name{font-size:21px;margin:0;font-weight:700;letter-spacing:.02em;color:var(--ink);}
  .co-en{font-size:9.5px;letter-spacing:.24em;color:var(--faint);margin-top:7px;}
  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 1px 2px var(--shadow);}
  .lg-card{padding:22px;box-shadow:0 18px 44px -30px var(--shadow),0 1px 2px var(--shadow);}
  .lg-lead{font-size:12.5px;color:var(--muted);text-align:center;margin-bottom:16px;line-height:1.6;}
  #login .hint{color:var(--faint);line-height:1.7;}

  .tabs{display:flex;gap:4px;padding:4px;background:var(--surface2);border-radius:9px;margin-bottom:20px;font-size:14px;}
  .tabs button{flex:1;padding:6px 0;border-radius:6px;font-weight:500;color:var(--muted);}
  .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);transition:border-color .15s,box-shadow .15s;}
  .fld:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
  .btn{width:100%;border-radius:9px;padding:10px 0;font-size:14px;font-weight:600;color:var(--accent-ink);
    background:var(--accent);transition:background .15s;}
  .btn:hover{background:var(--accent-h);} .btn:disabled{opacity:.5;cursor:default;}
  .err{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--shu);
    background:rgba(192,69,58,.09);border-radius:8px;padding:8px 12px;margin-top:12px;}
  .hint{text-align:center;font-size:11px;color:var(--faint);margin-top:16px;}

  /* デモのログインボタン（2種類のアカウント） */
  .gbtn{width:100%;display:flex;align-items:center;gap:12px;border:1px solid var(--line);
    border-radius:11px;padding:13px 14px;font-size:14px;font-weight:600;text-align:left;
    background:var(--card);color:var(--ink);transition:border-color .15s,background .15s,transform .12s;}
  .gbtn+.gbtn{margin-top:10px;}
  .gbtn:hover{border-color:var(--accent);background:var(--accent-soft);}
  .gbtn:active{transform:scale(.99);}
  .gbtn .gb-ic{width:32px;height:32px;flex-shrink:0;border-radius:9px;display:flex;
    align-items:center;justify-content:center;background:var(--surface2);color:var(--muted);}
  .gbtn.primary .gb-ic{background:var(--accent);color:var(--accent-ink);}
  .gbtn .gb-t{display:flex;flex-direction:column;gap:2px;line-height:1.35;}
  .gbtn .gb-t small{font-size:11px;font-weight:400;color:var(--faint);}
  .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;}

  @media(prefers-reduced-motion:reduce){ .lg-wrap{animation:none;} }