:root{
      --amz-bg:#f5f6f6;
      --amz-card:#fff;
      --amz-border:#d5d9d9;
      --amz-text:#0f1111;
      --amz-link:#007185;
      --amz-link-hover:#c7511f;
      --amz-accent:#ffa41c; /* Amazonの黄寄りオレンジ */
      --amz-btn:#ffd814;    /* ボタン黄色 */
      --amz-btn-hover:#f7ca00;
      --amz-muted:#565959;
      --radius:14px;
      --shadow:0 2px 6px rgba(0,0,0,.06);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
      color:var(--amz-text); background:var(--amz-bg);
      display:grid; place-items:center;
    }
    .auth{
      width:min(420px, 100% - 32px);
    }
    .auth__logo{display:flex; justify-content:center; margin:18px 0 12px}
    .auth__card{
      background:var(--amz-card); border:1px solid var(--amz-border); border-radius:8px; box-shadow:var(--shadow);
      padding:20px 26px;
    }
    .auth__title{font-size:22px; font-weight:700; margin:4px 0 18px}

    /* モード切替（ラジオ・トグル風） */
    .mode{display:flex; gap:8px; margin-bottom:16px}
    .mode input{position:absolute; opacity:0; pointer-events:none}
    .mode__btn{
      flex:1; border:1px solid var(--amz-border); border-radius:999px; padding:10px 12px; text-align:center; cursor:pointer;
      user-select:none; transition:all .15s ease; background:#fff; font-weight:600; font-size:14px;
    }
    .mode__btn:hover{box-shadow:0 1px 0 rgba(0,0,0,.05)}
    .mode input:checked + .mode__btn{ border-color:#f59b0a; outline:2px solid rgba(255,180,40,.35)}

    /* フォーム */
    .field{margin-bottom:14px}
    .label{display:block; font-weight:600; font-size:13px; margin-bottom:6px}
    .input{width:100%; padding:10px 12px; border:1px solid var(--amz-border); border-radius:8px; font-size:16px;}
    .input:focus{outline:2px solid rgba(255,180,40,.35); border-color:#f59b0a}

    /* 補助行 */
    .assist{display:flex; align-items:center; gap:8px; margin:6px 0 14px; color:var(--amz-muted); font-size:14px}
    .checkbox{width:18px; height:18px}

    /* アクション */
    .btn{width:100%; border:1px solid #a88734; background:var(--amz-btn); border-radius:8px; padding:10px 12px; font-weight:600; cursor:pointer}
    .btn:hover{background:var(--amz-btn-hover)}

    .link{color:var(--amz-link); text-decoration:none;}
    .link:hover{color:var(--amz-link-hover); text-decoration:underline}

    .divider{display:flex; align-items:center; gap:12px; margin:18px 0}
    .divider::before,.divider::after{content:""; height:1px; background:var(--amz-border); flex:1}
    .note{font-size:12px; color:var(--amz-muted)}

    /* セカンダリカード（新規作成の案内） */
    .secondary{
      margin-top:12px; padding:14px; text-align:center; border:1px solid var(--amz-border); background:#fff; border-radius:8px;
    }

    /* エラー表示の雛形 */
    .error{display:none; background:#fef6f6; border:1px solid #e77600; color:#111; padding:10px 12px; border-radius:8px; margin-bottom:12px}

    /* Amazonヘッダー風（任意） */
    .amzbar{position:fixed; inset:0 0 auto 0; height:56px; background:#131921; display:flex; align-items:center; padding-inline:16px; gap:10px; color:#fff}
    .amzbar__logo{font-weight:800; letter-spacing:.2px}
    .amzbar__badge{font-size:11px; color:#f3a847; margin-left:6px}
    .amzbar + .spacer{height:56px}

    /* モードによる表示切替（JSが無くても最低限動くよう CSS でも制御） */
    /* 初期はサインイン */
    [data-mode="signin"] .only-create{display:none}
    [data-mode="create"] .only-signin{display:none}