/* ===== ScanPod 系アプリ共通のサインイン画面（背景・待ち表示・アカウント選択） =====
   [SIGNIN_SHARED_2026_09_17] 以前は ScanPodWeb（06-login-home.css / 31-mobile-home.css）にだけあり、
   姉妹アプリは似た画面をそれぞれ書き写していたので見た目がずれていた。ここを唯一の定義にする。
   読み込み: <link rel="stylesheet" href="_content/ScanPod.Web.Ui/css/signin.css" />
   色はホストのデザイントークン（--color-*）があれば使い、無ければ ScanPodWeb の既定値に落ちる。
   スペース選択（.space-selector）は ScanPod.Web.Auth の SpaceSelector 側の CSS、
   開くセッション（SessionEntry）とスペースのアバタは ScanPod.Web.Ui の部品側の CSS が持つ。 */

@keyframes login-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}
@keyframes login-float2 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-2deg); }
}
@keyframes scanpod-signin-spin {
    to { transform: rotate(360deg); }
}

/* ---- 背景（SignInBackdrop） ---- */
.login-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding-top: 10vh;
    background: linear-gradient(160deg, #ecfdf5 0%, #f0fdf4 30%, #f5f3ff 65%, #eff6ff 100%);
    position: relative;
    overflow: hidden;
    /* 字形も ScanPodWeb の body（app.css）と同じにする。姉妹アプリは body の書体がアプリごとに違うため */
    font-family: -apple-system, 'Segoe UI Variable', 'Segoe UI', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', sans-serif;
    font-size: var(--font-base, 14px);
    line-height: 1.6;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}
.login-wrapper.is-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    overflow-y: auto;
}
.login-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.login-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.35;
}
.login-shape-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #6ee7b7 0%, transparent 70%);
    top: -10%; left: -10%;
    animation: login-float 12s ease-in-out infinite;
}
.login-shape-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #a7f3d0 0%, transparent 70%);
    bottom: -5%; right: -5%;
    animation: login-float2 10s ease-in-out infinite;
}
.login-shape-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #bef264 0%, transparent 70%);
    top: 40%; left: 50%;
    animation: login-float 14s ease-in-out infinite reverse;
}
@media (prefers-reduced-motion: reduce) {
    .login-shape { animation: none; }
}

/* ---- 待ち表示（SignInWaitPanel）とアカウント選択（AccountSelectStep） ---- */
.acct-panel { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto; background: var(--color-bg-base, #ffffff); border: 1px solid var(--color-border-default, #e8e8ef); border-radius: 20px; box-shadow: 0 12px 44px rgba(20,40,30,.14); padding: 24px 26px 22px; color: var(--color-text-primary, #1a1a2e); text-align: left; }
.acct-panel .sp-load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px 0 36px; }
.acct-panel .sp-load p { margin: 0; font-size: 13.5px; color: var(--color-text-secondary, #4a4a5e); }
.acct-panel .sp-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3.5px solid var(--color-border-default, #e8e8ef); border-top-color: var(--color-primary, #22BB80); animation: scanpod-signin-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .acct-panel .sp-spinner { animation-duration: 1.6s; } }
.acct-head { display: flex; align-items: center; justify-content: space-between; }
.acct-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--color-primary, #22BB80); }
.acct-brand svg { width: 26px; height: 26px; }
.acct-back { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--color-text-secondary, #4a4a5e); cursor: pointer; border-radius: 8px; }
.acct-back:hover { background: var(--color-primary-surface, #e6f9f0); color: var(--color-primary, #22BB80); }
.acct-back svg { width: 16px; height: 16px; }
.acct-title { font-size: 22px; font-weight: 700; margin: 16px 0 4px; color: var(--color-text-primary, #1a1a2e); }
.acct-sub { font-size: 13px; color: var(--color-text-secondary, #4a4a5e); margin: 0 0 18px; }
.acct-divider { height: 1px; background: var(--color-border-default, #e8e8ef); margin: 0 -26px 18px; }
.acct-divider-2 { height: 1px; background: var(--color-border-default, #e8e8ef); margin: 16px 0; }
.acct-section-2 { margin-top: 16px; }
.acct-label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--color-text-secondary, #4a4a5e); margin-bottom: 10px; }
.acct-badge { padding: 3px 9px; border-radius: 8px; background: var(--color-primary-surface-light, #F4FBF7); color: var(--color-primary-dark, #1AA46E); font-size: 11px; font-weight: 700; }
.acct-hint { font-weight: 400; color: var(--color-text-tertiary, #8b8b9e); font-size: 11.5px; }
.acct-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 1px solid var(--color-border-default, #e8e8ef); border-radius: 12px; background: var(--color-bg-base, #ffffff); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.acct-card:hover { background: var(--color-primary-surface-light, #F4FBF7); border-color: var(--color-primary, #22BB80); }
.acct-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 6px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 10px; font: inherit; color: inherit; }
.acct-row:hover { background: var(--color-primary-surface-light, #F4FBF7); }
.acct-rows { display: flex; flex-direction: column; }
.acct-row-wrap { position: relative; display: flex; align-items: center; }
.acct-row-wrap .acct-row { flex: 1; min-width: 0; }
.acct-row-remove { flex: none; margin-left: 4px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--color-text-tertiary, #8b8b9e); font-size: 11.5px; cursor: pointer; }
.acct-row-remove:hover { background: var(--color-danger-surface, #FDECEC); color: var(--color-danger, #DC2626); }
.acct-row-remove.is-confirm { color: var(--color-danger, #DC2626); font-weight: 700; }
.acct-avatar { width: 40px; height: 40px; border-radius: var(--radius-avatar, 4px); flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; }
.acct-avatar.self { background: linear-gradient(135deg, var(--color-primary, #22BB80), var(--color-primary-dark, #1AA46E)); }
.acct-avatar.proxy { background: #C8D2CC; color: #5B6A62; }
.acct-info { flex: 1; min-width: 0; }
.acct-name { font-size: 15px; font-weight: 700; color: var(--color-text-primary, #1a1a2e); }
.acct-addr { font-size: 12px; color: var(--color-text-secondary, #4a4a5e); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-error { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--color-error, #EF4444); }
.acct-powered { text-align: center; margin-top: 18px; font-size: 11px; color: var(--color-text-tertiary, #8b8b9e); letter-spacing: 1px; }

@media (max-width: 840px) {
    .login-wrapper { padding-top: 4vh; }
}

/* スマホ（768px 以下）。ScanPodWeb 31-mobile-home.css から移した */
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    .login-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }
    .acct-panel {
        padding: 18px 16px 16px;
    }
    .acct-divider {
        margin-left: -16px;
        margin-right: -16px;
    }
    .acct-back {
        width: 40px;
        height: 40px;
    }
    .acct-title {
        font-size: var(--font-xl, 20px);
    }
    .acct-label {
        flex-wrap: wrap;
        row-gap: 2px;
    }
    .acct-row-remove {
        min-height: 40px;
        padding: 0 10px;
    }
}

/* =====================================================================
   [HUBAKO_SPACE_SELECT_2026_10_16] Hubako のサインインと同じ見た目（承認済みモック
   docs/specs/features/mockups/HUBAKO_SPACE_SELECT_MOCK.html）。
   ⚠ `.hb-auth` の中だけに効く＝外枠（SignInBackdrop）が Hubako のサインインに切り替えているとき
   （SignIn:Provider=Hubako）だけ `.hb-auth` を付ける。姉妹アプリ（AccessPod 等）の見た目は 1 つも変えない。
   値は Hubako.Identity/wwwroot/css/hubako-auth.css と同じ（サインインの画面から続けて同じに見えるように）。
   ⚠ 中の部品は自分の scoped CSS を持つので、こちらは `.hb-auth .hb-form` で強めに上書きする。
   ===================================================================== */
.hb-auth{
  --brand:#22BB80; --brand-deep:#0F7A56; --brand-ink:#0b2a20; --mint:#bff2dc; --mint-soft:#e9fbf3;
  --panel:#ffffff; --field:#f6f8f7; --line:#e3e8e6; --line-strong:#cbd3cf;
  --text:#14201b; --text-2:#4b5a54; --text-3:#6c7a74; --error:#d0342c; --error-soft:#fdebea;
  --vis-1:#f4fff9; --vis-2:#dff7ec; --vis-3:#c9f0de; --vis-text:#0f2a20; --vis-text-2:#3f6656; --vis-em:#0F7A56;
  --vis-card:#ffffff; --vis-card-line:#cfe9dc; --vis-box:rgba(255,255,255,.55); --vis-box-line:#9fd8bf; --wm:#6b6b6b;
  --hb-display:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic UI",system-ui,sans-serif;
  --hb-body:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",system-ui,sans-serif;
  --hb-wordmark:"Outfit","Futura","Century Gothic",system-ui,sans-serif;
  --hb-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:var(--panel);color:var(--text);font-family:var(--hb-body);font-size:14px;line-height:1.6;overflow:auto;text-align:left;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hb-auth{
  --brand:#2fd197; --brand-deep:#1fa877; --brand-ink:#07170f; --mint:#1d4a38; --mint-soft:#11281f;
  --panel:#151c19; --field:#1b2420; --line:#26312c; --line-strong:#38463f;
  --text:#e8efec; --text-2:#b3c0ba; --text-3:#8d9b95; --error:#ff8b82; --error-soft:#3a1d1b;
  --vis-1:#15241e; --vis-2:#112019; --vis-3:#0e1a15; --vis-text:#e6f6ee; --vis-text-2:#9cc4b2; --vis-em:#5fe0aa;
  --vis-card:#1c2b24; --vis-card-line:#2a4036; --vis-box:rgba(255,255,255,.03); --vis-box-line:#2f5546; --wm:#c9cfcc; color-scheme:dark}}
:root[data-theme="dark"] .hb-auth{
  --brand:#2fd197; --brand-deep:#1fa877; --brand-ink:#07170f; --mint:#1d4a38; --mint-soft:#11281f;
  --panel:#151c19; --field:#1b2420; --line:#26312c; --line-strong:#38463f;
  --text:#e8efec; --text-2:#b3c0ba; --text-3:#8d9b95; --error:#ff8b82; --error-soft:#3a1d1b;
  --vis-1:#15241e; --vis-2:#112019; --vis-3:#0e1a15; --vis-text:#e6f6ee; --vis-text-2:#9cc4b2; --vis-em:#5fe0aa;
  --vis-card:#1c2b24; --vis-card-line:#2a4036; --vis-box:rgba(255,255,255,.03); --vis-box-line:#2f5546; --wm:#c9cfcc; color-scheme:dark}
.hb-auth *{box-sizing:border-box}
.hb-auth button{font:inherit;color:inherit}
.hb-auth .hb-logo{display:flex;align-items:center;gap:10px}
.hb-auth .hb-logo svg{width:38px;height:38px;flex:none}
.hb-auth .hb-logo span{font-family:var(--hb-wordmark);font-weight:600;font-size:28px;letter-spacing:-.03em;color:var(--wm);line-height:1}
/* 左の面（サインインの画面と同じ「仕分けの机」） */
.hb-auth .hb-visual{background:radial-gradient(110% 90% at 0% 0%,var(--vis-1),var(--vis-2) 60%,var(--vis-3));color:var(--vis-text);padding:44px 44px 36px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;position:relative;overflow:hidden;border-right:1px solid var(--line);min-height:100vh;min-height:100dvh}
.hb-auth .hb-tag{font-family:var(--hb-display);font-weight:900;font-size:34px;line-height:1.3;margin:0;color:var(--vis-text);text-wrap:balance}
.hb-auth .hb-tag em{font-style:normal;color:var(--vis-em)}
.hb-auth .hb-sub2{margin:10px 0 0;color:var(--vis-text-2);font-size:14px;max-width:34ch}
.hb-auth .hb-desk{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);height:234px}
.hb-auth .hb-lane{position:relative}
.hb-auth .hb-item{position:absolute;left:0;right:0;height:46px;padding:0 12px;border-radius:12px;background:var(--vis-card);border:1px solid var(--vis-card-line);box-shadow:0 6px 16px -10px rgba(11,42,32,.35);font-size:12px;color:var(--vis-text);display:flex;gap:8px;align-items:center;animation:hb-fly 9s cubic-bezier(.65,0,.35,1) infinite;z-index:2}
.hb-auth .hb-item svg{width:16px;height:16px;flex:none;color:var(--brand-deep)}
.hb-auth .hb-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-auth .hb-i1{top:36px;--dy:-36px;animation-delay:0s}.hb-auth .hb-i2{top:94px;--dy:22px;animation-delay:-6s}.hb-auth .hb-i3{top:152px;--dy:-94px;animation-delay:-3s}
@keyframes hb-fly{0%{transform:translateX(-14px);opacity:0}8%,58%{transform:none;opacity:1}74%{transform:translate(calc(100% + 54px),var(--dy)) scale(.96);opacity:1}82%,100%{transform:translate(calc(100% + 54px),var(--dy)) scale(.9);opacity:0}}
.hb-auth .hb-hub{position:relative}
.hb-auth .hb-hubline{position:absolute;left:50%;top:10px;bottom:10px;width:2px;transform:translateX(-50%);background:linear-gradient(transparent,var(--vis-em) 30%,var(--vis-em) 70%,transparent);opacity:.35}
.hb-auth .hb-aichip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--hb-mono);font-size:11px;font-weight:700;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#06281b}
.hb-auth .hb-boxes{display:flex;flex-direction:column;gap:12px}
.hb-auth .hb-theme{height:46px;padding:0 12px;border-radius:12px;background:var(--vis-box);border:1px dashed var(--vis-box-line);font-size:12.5px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.hb-auth .hb-theme b{font-weight:700;color:var(--vis-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-auth .hb-theme small{font-family:var(--hb-mono);color:var(--brand-deep);background:var(--vis-card);border-radius:999px;padding:1px 8px}
.hb-auth .hb-quote{font-size:12.5px;color:var(--vis-text-2);border-top:1px solid var(--vis-card-line);padding-top:14px;margin:0}
/* 右の欄 */
.hb-auth .hb-pane{display:flex;align-items:center;justify-content:center;padding:48px 32px}
.hb-auth .hb-form{width:100%;max-width:400px;min-width:0;display:flex;flex-direction:column;gap:18px;animation:hb-rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes hb-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 中に入る部品（スペースを選ぶ・誰として開く・待ち）の枠を外して、欄に溶け込ませる */
.hb-auth .hb-form .sess-panel,.hb-auth .hb-form .acct-panel,.hb-auth .hb-form .space-selector{max-width:none!important;width:100%;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;display:flex;flex-direction:column;gap:18px;color:var(--text)}
.hb-auth .hb-form .sess-head,.hb-auth .hb-form .acct-brand,.hb-auth .hb-form .sess-divider,.hb-auth .hb-form .acct-divider,.hb-auth .hb-form .acct-divider-2,.hb-auth .hb-form .sess-powered,.hb-auth .hb-form .acct-powered,.hb-auth .hb-form .space-sel-powered{display:none!important}
.hb-auth .hb-form .acct-head{display:flex;justify-content:flex-end;margin:0 0 -14px}
.hb-auth .hb-form .sess-title,.hb-auth .hb-form .acct-title,.hb-auth .hb-form .space-sel-title{font-family:var(--hb-display);font-weight:900;font-size:30px;line-height:1.25;margin:0!important;color:var(--text);text-align:left}
.hb-auth .hb-form .sess-sub,.hb-auth .hb-form .acct-sub,.hb-auth .hb-form .space-sel-sub{margin:-8px 0 0!important;color:var(--text-2);font-size:14px;text-align:left}
.hb-auth .hb-form .space-sel-head{text-align:left;margin:0}
/* 誰として（帯） */
.hb-auth .hb-form .sess-idband{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:var(--field);width:100%;text-align:left;cursor:pointer}
.hb-auth .hb-form .sess-idband:hover{border-color:var(--line-strong)}
.hb-auth .hb-form .sess-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#7fe0b8);display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--hb-display);flex:none;font-size:14px}
.hb-auth .hb-form .sess-avatar.off{background:#9aa8a2}
.hb-auth .hb-form .sess-who{min-width:0;flex:1;display:flex;flex-direction:column}
.hb-auth .hb-form .sess-who b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-auth .hb-form .sess-who span{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-auth .hb-form .sess-caret{font-size:12px;color:var(--brand-deep);font-weight:700;white-space:nowrap}
.hb-auth .hb-form .sess-drawer{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:8px;background:var(--panel)}
.hb-auth .hb-form .acct-slot{position:relative;border-top:1px solid var(--line)}
.hb-auth .hb-form .acct-slot:first-child{border-top:0}
.hb-auth .hb-form .acct-hit{display:flex;align-items:center;gap:12px;padding:11px 44px 11px 14px;width:100%;background:none;border:0;text-align:left;cursor:pointer;text-decoration:none;color:var(--text)}
.hb-auth .hb-form .acct-hit:hover{background:var(--field)}
.hb-auth .hb-form .acct-hit .sess-avatar{width:30px;height:30px;font-size:12px}
.hb-auth .hb-form .sess-name{font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-auth .hb-form .sess-act{font-size:11.5px;color:var(--brand-deep);white-space:nowrap}
.hb-auth .hb-form .sess-remove{background:none;border:0;color:var(--text-3);cursor:pointer;width:30px;height:30px;border-radius:8px}
.hb-auth .hb-form .sess-remove svg{width:14px;height:14px}
.hb-auth .hb-form .sess-add,.hb-auth .hb-form .hb-signout{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line);font-size:13.5px;text-decoration:none}
.hb-auth .hb-form .sess-add{font-weight:700;color:var(--brand-deep)}
.hb-auth .hb-form .hb-signout{font-weight:500;color:var(--text-2)}
.hb-auth .hb-form .sess-add:hover,.hb-auth .hb-form .hb-signout:hover{background:var(--field)}
/* 見出し・探す */
.hb-auth .hb-form .hb-sec{font-size:11.5px;font-weight:700;color:var(--text-3);letter-spacing:.06em;margin:0 0 -8px}
.hb-auth .hb-form .hb-search{position:relative}
.hb-auth .hb-form .hb-search input{width:100%;height:44px;border:1.5px solid var(--line);border-radius:12px;background:var(--field);padding:0 14px 0 38px;font:inherit;font-size:14px;color:var(--text)}
.hb-auth .hb-form .hb-search input:focus{outline:none;border-color:var(--brand);background:var(--panel)}
.hb-auth .hb-form .hb-search svg{position:absolute;left:13px;top:13px;width:18px;height:18px;color:var(--text-3)}
/* スペースの行（カードの格子をやめて行の一覧に） */
.hb-auth .hb-form .space-grid{display:flex!important;flex-direction:column;gap:0!important;border:1px solid var(--line);border-radius:16px;overflow:hidden;max-height:none!important;padding:0!important}
.hb-auth .hb-form .space-card{position:relative;display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center!important;column-gap:14px!important;row-gap:2px!important;padding:12px 40px 12px 14px!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:var(--panel)!important;text-align:left;width:100%;cursor:pointer;color:var(--text)}
.hb-auth .hb-form .space-card:first-child{border-top:0!important}
.hb-auth .hb-form .space-card:hover:not(:disabled){background:var(--mint-soft)!important}
.hb-auth .hb-form .space-card::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:18px}
.hb-auth .hb-form .space-card .sp-avatar{width:40px!important;height:40px!important;border-radius:11px!important;flex:none}
.hb-auth .hb-form .space-card-ic{width:40px;height:40px;border-radius:11px;background:var(--brand-deep);display:grid;place-items:center;flex:none}
.hb-auth .hb-form .space-card-name{font-size:14.5px!important;font-weight:700;text-align:left!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 calc(100% - 60px);min-width:0}
.hb-auth .hb-form .space-card-note{order:4;flex-basis:100%;padding-left:54px;font-size:11px;color:var(--text-3);text-align:left}
.hb-auth .hb-form .sess-pill,.hb-auth .hb-form .space-card-guestbadge,.hb-auth .hb-form .space-card-newbadge{position:static!important;order:3;margin-left:54px;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px;white-space:nowrap;transform:none!important}
.hb-auth .hb-form .sess-pill{background:var(--brand);color:#06281b}
.hb-auth .hb-form .sess-pill.muted{background:var(--mint);color:var(--brand-deep)}
.hb-auth .hb-form .space-card-guestbadge{background:#e6e9e8;color:#4b5a54}
.hb-auth .hb-form .space-card-newbadge{background:#fff1d6;color:#8a5a00}
.hb-auth .hb-form .space-card.is-open{background:var(--panel)!important}
.hb-auth .hb-form .hb-add-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--field);color:var(--brand-deep);border:1.5px dashed var(--line-strong);font-size:20px;flex:none}
.hb-auth .hb-form .hb-add .space-card-name{color:var(--brand-deep)}
/* 読み込み中（行の形の影に光が流れる＋一言）。地と同じ色にしない＝真っ白に見えたモック 1 版の反省 */
.hb-auth .hb-form .hb-skwrap{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.hb-auth .hb-form .hb-sk{display:flex;align-items:center;gap:14px;padding:12px 14px;border-top:1px solid var(--line)}
.hb-auth .hb-form .hb-sk:first-child{border-top:0}
.hb-auth .hb-form .hb-sk i,.hb-auth .hb-form .hb-sk b,.hb-auth .hb-form .hb-sk em{display:block;background:linear-gradient(90deg,var(--line) 0%,var(--field) 45%,var(--line) 90%);background-size:220% 100%;animation:hb-skm 1.2s ease-in-out infinite}
.hb-auth .hb-form .hb-sk b,.hb-auth .hb-form .hb-sk em{border-radius:8px}
.hb-auth .hb-form .hb-sk i{width:40px;height:40px;border-radius:11px;flex:none}
.hb-auth .hb-form .hb-sk span{flex:1;display:flex;flex-direction:column;gap:8px}
.hb-auth .hb-form .hb-sk b{height:13px;width:55%}.hb-auth .hb-form .hb-sk em{height:10px;width:30%}
@keyframes hb-skm{from{background-position:120% 0}to{background-position:-120% 0}}
.hb-auth .hb-form .hb-loadline{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-3);margin:0}
.hb-auth .hb-form .hb-loadline i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--brand);animation:scanpod-signin-spin .8s linear infinite;display:block}
/* 知らせ・空・誤り */
.hb-auth .hb-form .hb-toast{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--brand-ink);color:#fff;font-size:13px}
.hb-auth .hb-form .hb-why{display:flex;gap:10px;font-size:12.5px;color:var(--text-2);background:var(--field);border-radius:12px;padding:10px 12px;line-height:1.65;margin:0}
.hb-auth .hb-form .hb-btn{height:52px;border-radius:14px;border:1.5px solid var(--brand-ink);background:var(--brand-ink);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer}
.hb-auth .hb-form .sess-error,.hb-auth .hb-form .acct-error,.hb-auth .hb-form .space-sel-err{background:var(--error-soft);color:var(--error);border-radius:14px;padding:12px 14px;font-size:13px;margin:0;text-align:left}
.hb-auth .hb-form .hb-legal{display:flex;gap:14px;font-size:11.5px;color:var(--text-3);margin:0}
/* 誰として開く（代理があるとき） */
.hb-auth .hb-form .acct-back{background:none;border:0;color:var(--brand-deep);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:4px;padding:0}
.hb-auth .hb-form .acct-back svg{width:16px;height:16px}
.hb-auth .hb-form .acct-section,.hb-auth .hb-form .acct-section-2{display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.hb-auth .hb-form .acct-label{font-size:11.5px;font-weight:700;color:var(--text-3);letter-spacing:.04em;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.hb-auth .hb-form .acct-badge{font-size:11px;font-weight:700;border-radius:999px;padding:1px 8px;background:var(--brand);color:#06281b}
.hb-auth .hb-form .acct-hint{font-weight:500;letter-spacing:0}
.hb-auth .hb-form .acct-card,.hb-auth .hb-form .acct-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:16px;cursor:pointer;width:100%;text-align:left;color:var(--text)}
.hb-auth .hb-form .acct-row{background:var(--panel)}
.hb-auth .hb-form .acct-card{border-color:var(--brand);background:var(--mint-soft)}
.hb-auth .hb-form .acct-card:hover,.hb-auth .hb-form .acct-row:hover{border-color:var(--brand)}
.hb-auth .hb-form .acct-avatar{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:700;color:#fff;font-family:var(--hb-display);flex:none;background:#9aa8a2}
.hb-auth .hb-form .acct-avatar.self{background:linear-gradient(135deg,var(--brand),#7fe0b8)}
.hb-auth .hb-form .acct-name{font-size:14.5px;font-weight:700}
.hb-auth .hb-form .acct-addr{font-size:12px;color:var(--text-3)}
.hb-auth .hb-form .acct-rows{display:flex;flex-direction:column;gap:10px}
.hb-auth .hb-form .acct-row-wrap{position:relative;display:flex;align-items:center;gap:6px}
.hb-auth .hb-form .acct-row-remove{background:none;border:0;color:var(--text-3);font-size:12px;cursor:pointer;padding:6px;white-space:nowrap}
.hb-auth .hb-form .acct-row-remove.is-confirm{color:var(--error);font-weight:700}
.hb-auth .hb-form .hb-spot{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--field)}
.hb-auth .hb-form .hb-spot b{font-size:14.5px}
.hb-auth .hb-form .sp-load{padding:32px 0}
.hb-auth .hb-form .sp-spinner{border-top-color:var(--brand)}
/* スマホ（狭い画面）: 左の面は上の帯に縮める */
@media (max-width:760px){
  /* ⚠ 1fr は「中身より狭くならない」＝メールなど折り返さない文字に押されて欄が画面より広がり、右端が切れていた（2026-10-16 実測 397/390px） */
  .hb-auth{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .hb-auth .hb-visual{min-height:0;padding:28px 22px 22px;gap:12px}
  .hb-auth .hb-tag{font-size:22px}
  .hb-auth .hb-desk,.hb-auth .hb-quote,.hb-auth .hb-sub2{display:none}
  .hb-auth .hb-pane{padding:26px 18px 30px;align-items:flex-start}
  .hb-auth .hb-form .sess-title,.hb-auth .hb-form .acct-title,.hb-auth .hb-form .space-sel-title{font-size:26px}
}
@media (prefers-reduced-motion: reduce){.hb-auth *,.hb-auth *::before,.hb-auth *::after{animation:none!important;transition:none!important}}