.caia-login{
    --base:var(--caia-base); --dark:var(--caia-dark);
    --ink2:#64748b; --ink3:#94a3b8; --line:#e2e8f0;
    min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;
    background:radial-gradient(1100px 620px at 50% -10%, #f3f5f8 0%, #e7ecf1 46%, #dfe5ec 100%);
    font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',ui-sans-serif,system-ui,sans-serif;}
  .caia-login *{box-sizing:border-box}
  .caia-login .card{background:#fff;border-radius:20px;
    box-shadow:0 1px 0 rgba(15,23,42,.04),0 20px 48px -12px rgba(15,23,42,.22);
    padding:34px 30px 30px;width:100%;max-width:392px}
  .caia-login .star{width:60px;height:60px;display:flex;align-items:center;justify-content:center;
    margin:2px auto 14px;opacity:.8;filter:drop-shadow(0 6px 14px rgba(139,125,194,.28))}
  .caia-login .wordmark{font-family:'Futura','Futura PT','Jost','Avenir Next','Century Gothic',sans-serif;
    text-align:center;letter-spacing:1.4px;font-size:27px;line-height:1;margin:0 0 6px}
  .caia-login .wordmark .c{color:var(--dark);font-weight:700}
  .caia-login .wordmark .p{color:var(--base);font-weight:500;margin-left:.32em}
  .caia-login .sub{text-align:center;font-size:12px;color:var(--ink2);margin:0 0 4px;letter-spacing:.3px}
  .caia-login .greet{text-align:center;font-size:18px;font-weight:800;color:#1e293b;margin:24px 0 28px;letter-spacing:.5px}
  .caia-login .err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;border-radius:10px;
    padding:10px 12px;font-size:13px;margin-bottom:14px}
  .caia-login .field{margin-bottom:13px}
  .caia-login .input{width:100%;border:1.5px solid var(--line);border-radius:11px;padding:13px 14px;
    font-size:16px;color:#1e293b;background:#fdfefe;transition:border-color .15s,box-shadow .15s}
  .caia-login .input::placeholder{color:#9aa6b2}
  .caia-login .input:focus{outline:none;border-color:var(--base);box-shadow:0 0 0 3px color-mix(in srgb, var(--base) 16%, transparent)}
  .caia-login .field.pw{position:relative}
  .caia-login .field.pw .input{padding-right:46px}
  .caia-login .pw-eye{position:absolute;top:50%;right:8px;transform:translateY(-50%);background:none;border:none;
    color:#9aa6b2;cursor:pointer;padding:6px;display:flex;align-items:center}
  .caia-login .pw-eye:hover{color:var(--base)}
  .caia-login .remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);margin:4px 0 20px;cursor:pointer}
  .caia-login .remember input{width:16px;height:16px;accent-color:var(--base)}
  .caia-login .btn{width:100%;background:var(--base);color:#fff;border:none;border-radius:12px;
    padding:14px;font-size:16px;font-weight:800;cursor:pointer;min-height:48px;letter-spacing:.4px;
    transition:filter .15s,transform .05s}
  .caia-login .btn:hover{filter:brightness(.92)}
  .caia-login .btn:active{transform:translateY(1px)}
  .caia-login .forgot{display:block;text-align:center;margin-top:14px;font-size:12px;
    color:var(--ink2);text-decoration:none}
  .caia-login .forgot:hover{color:var(--base);text-decoration:underline}
  .caia-login .or{display:flex;align-items:center;gap:12px;margin:16px 0 14px;color:var(--ink3);font-size:11px}
  .caia-login .or::before,.caia-login .or::after{content:"";flex:1;height:1px;background:var(--line)}
  .caia-login .gbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
    background:#fff;color:#3c4043;border:1.5px solid #dadce0;border-radius:12px;padding:12px;
    font-size:15px;font-weight:700;cursor:pointer;min-height:48px;font-family:inherit}
  .caia-login .gbtn:hover{background:#f8fafc;border-color:#cbd5e1}
  .caia-login .gbtn svg{width:18px;height:18px;flex:none}
  .caia-login .foot{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:7px;
    font-family:'Futura','Jost','Century Gothic',sans-serif;font-size:10.5px;letter-spacing:2px;color:var(--ink3)}
  .caia-login .foot .dot{width:4px;height:4px;border-radius:50%;background:#A99BD8;display:inline-block}

  /* ══ 暗い地のログイン ═══════════════════════════════════════════════
     <div class="caia-login" data-ground="dark"> で切り替える。
     常時表示面（サイネージ）を持つ製品など、暗い側で統一したい製品だけに使う。
     地・文字・罫線は製品色を混ぜず、キットのサイネージ面と同じ中立の暗色を使う。
     初出: CAIA TIMER（2026-09-02 古川さん指示） */
  .caia-login[data-ground="dark"]{
    --ink2:#A9B0B9; --ink3:#767E88; --line:#2B2F36;
    background:radial-gradient(1100px 620px at 50% -10%, #1E2126 0%, #171A1F 46%, #101216 100%)}
  .caia-login[data-ground="dark"] .card{background:#1E2126;
    box-shadow:0 1px 0 rgba(0,0,0,.3),0 20px 48px -12px rgba(0,0,0,.55)}
  /* 暗地系のワードマーク: CAIA=明色/700・製品名=明色/300・字間.1em（共通仕様の2系統） */
  .caia-login[data-ground="dark"] .wordmark{letter-spacing:.1em}
  .caia-login[data-ground="dark"] .wordmark .c{color:#E8EAEE}
  .caia-login[data-ground="dark"] .wordmark .p{color:#E8EAEE;font-weight:300}
  .caia-login[data-ground="dark"] .greet{color:#F2F4F7}
  .caia-login[data-ground="dark"] .input{background:#171A1F;color:#F2F4F7;border-color:#2B2F36}
  .caia-login[data-ground="dark"] .input::placeholder{color:#767E88}
  .caia-login[data-ground="dark"] .err{background:#3A1A15;color:#F0705C;border-color:#F0705C}
  /* base の上は白だと読めない製品があるため、暗地では黒字に固定する */
  .caia-login[data-ground="dark"] .btn{color:#1F2937}
  .caia-login[data-ground="dark"] .gbtn{background:#fff;color:#3c4043;border-color:#dadce0}
  .caia-login[data-ground="dark"] .pw-eye{color:#767E88}
  .caia-login[data-ground="dark"] .foot .dot{background:var(--base)}