/* /study/sign-in and /study/welcome: one night card in the IELTS game style (vidi-game.css), the otter on top. */
.si-body { margin: 0; min-height: 100vh; background: radial-gradient(900px 500px at 85% -10%, rgba(138, 114, 246, .35), transparent 60%),
  radial-gradient(700px 420px at -10% 110%, rgba(86, 218, 220, .22), transparent 60%), #0d0a22; color: var(--vg-text);
  font-family: 'Be Vietnam Pro', 'Familjen Grotesk', system-ui, sans-serif; }
.si-main { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 28px 16px 48px; }
.si-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--vg-text); text-decoration: none; font: 700 15px/1 var(--vg-display); letter-spacing: .3px; }
.si-card { box-sizing: border-box; width: 100%; max-width: 440px; padding: 30px 28px 26px; text-align: center; }
.si-otter { display: block; width: 112px; height: 112px; margin: -6px auto 6px; object-fit: contain; }
.si-card .vg-title { font-size: clamp(26px, 6vw, 32px); }
.si-lead { margin: 8px 0 22px; font-size: 15px; line-height: 1.55; }
.si-card form { display: grid; gap: 10px; text-align: left; }
.si-card form[hidden] { display: none; }
.si-label { font-size: 13px; font-weight: 600; color: var(--vg-text-2); }
.si-input { box-sizing: border-box; width: 100%; min-height: 50px; padding: 0 16px; border: 2px solid rgba(255, 255, 255, .16); border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: #fff; font: 500 16px/1.2 inherit; font-family: inherit; }
.si-input:focus { outline: none; border-color: var(--vg-aqua); background: rgba(255, 255, 255, .1); }
.si-input.code { text-align: center; font-size: 26px; letter-spacing: 10px; font-weight: 700; }
.si-card .vg-btn { width: 100%; min-height: 50px; border: 0; color: var(--vg-ink); font: 800 16px/1 var(--vg-display); }
.si-card .vg-btn[disabled] { opacity: .6; cursor: progress; }
.si-sent { margin: 0; font-size: 14px; line-height: 1.5; color: var(--vg-text-2); text-align: center; }
.si-sent strong { color: #fff; word-break: break-all; }
.si-links { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.si-links button { padding: 6px 0; border: 0; background: none; color: var(--vg-aqua); font: inherit; cursor: pointer; text-decoration: underline; }
.si-links button[disabled] { color: var(--vg-text-3); cursor: default; text-decoration: none; }
.si-error { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 99, 132, .14); color: #ffb3c4 !important; font-size: 14px; text-align: left; }
.si-error[hidden] { display: none; }
.si-note { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--vg-text-3) !important; }
.si-card .auth-or { color: var(--vg-text-3); }
/* Welcome: two questions as chips */
.si-q { margin: 0 0 6px; padding: 0; border: 0; }
.si-q legend { margin-bottom: 10px; font: 700 16px/1.3 var(--vg-display); color: #fff; }
.si-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.si-chip { position: relative; }
.si-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.si-chip > span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 2px solid rgba(255, 255, 255, .16); border-radius: 999px;
  background: rgba(255, 255, 255, .05); color: var(--vg-text); font-size: 14px; font-weight: 600; transition: border-color .15s, background .15s; }
.si-chip input:checked + span { border-color: var(--vg-gold); background: rgba(255, 200, 61, .16); color: #fff; }
.si-chip input:focus-visible + span { outline: 3px solid var(--vg-violet); outline-offset: 2px; }
.si-welcome form { gap: 18px; }
@media (max-width: 420px) { .si-card { padding: 26px 18px 22px; } }
/* The shared Google button is white; keep its dark label inside the night card (vidi-game.css tints card links aqua). */
.si-card a.google-auth { color: #1f1f1f !important; border-radius: 12px; min-height: 50px; }
/* Inside an app (TikTok, Facebook, Zalo): the emailed code comes first, Google only by reopening the page in a browser. */
.si-inapp { display: grid; gap: 10px; margin: 18px 0 0; padding: 16px; border: 1px dashed rgba(255, 255, 255, .18); border-radius: 14px; text-align: left; }
.si-inapp p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--vg-text-2); }
.si-inapp .si-inapp-tip { color: #fff; font-weight: 600; }
.si-inapp .si-inapp-menu { font-size: 13px; color: var(--vg-text-3); }
.si-card .vg-btn.si-open { min-height: 46px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; text-decoration: none; }

/* Calm, accessible Arena entry: one task per screen. */
body.si-body { --vg-text:#302745; --vg-text-2:#635a72; --vg-text-3:#70677c; background:radial-gradient(ellipse at top,#eee8ff,transparent 65%),#faf8f5; color:#302745; }
.si-main { justify-content:center; padding:32px 16px; gap:20px; }
.si-logo { color:#42305f; font-family:inherit; }
.si-card.vg-panel { background:#fff; border:1px solid #e6dfef; border-radius:28px; clip-path:none; box-shadow:0 16px 60px #3820520c; padding:28px 32px; color:#302745; }
.si-card.vg-panel::before,.si-card.vg-panel::after { display:none; }
.si-otter { width:88px; height:88px; margin:0 auto 8px; animation:none; filter:none; }
.si-card.vg-panel .vg-title { color:#302745!important; background:none; -webkit-text-fill-color:currentColor; text-shadow:none; font-family:'Be Vietnam Pro',sans-serif; font-weight:700; font-size:28px; line-height:1.35; }
.si-lead { color:#635a72!important; font-size:14px; margin:10px 0 24px; }
.si-input { border:1.5px solid #d6cde3; border-radius:14px; background:#faf9fc; color:#302745; font-size:16px; }
.si-input::placeholder { color:#82778e; }
.si-input:focus { background:#fff; border-color:#7045c4; outline:3px solid #7045c41c; }
.si-card .vg-btn { background:#6740b8; color:#fff!important; border-radius:14px; clip-path:none; font-family:inherit; font-weight:700; box-shadow:none; }
.si-card .vg-btn::before { display:none; }
.si-card .vg-btn:hover:not([disabled]) { background:#54309d; transform:none; }
.si-card a.google-auth { border:1.5px solid #d6cde3; font-family:inherit; box-shadow:none; }
.si-card .auth-or { margin:16px 0; font-size:13px; }
.si-sent strong,.si-q legend { color:#302745; }
.si-links button,.si-card a:not(.google-auth):not(.vg-btn) { color:#6740b8; }
.si-links button { min-height:44px; }
.si-error { background:#fff0f0; color:#a22435!important; }
.si-chip > span { background:#faf9fc; border:1.5px solid #ddd5e8; color:#51435f; min-height:44px; }
.si-chip input:checked + span { color:#513087; border-color:#7045c4; background:#f0e9ff; }
.si-q legend { font-family:inherit; font-size:15px; }
.si-inapp { background:#f6f3fc; border-color:#ded4ed; }
.si-inapp .si-inapp-tip { color:#302745; }
.si-card :is(button,a):focus-visible { outline:3px solid #9164d8; outline-offset:3px; }
@media(max-width:480px) { .si-main { justify-content:flex-start; padding:22px 14px; } .si-card.vg-panel { padding:24px 20px; border-radius:22px; } .si-card.vg-panel .vg-title { font-size:25px; } }