.auth { min-height: 100%; display: flex; flex-direction: column; }
.auth-main { flex: 1; display: grid; place-items: center; padding: 20px 20px 60px; }
.auth-card {
  width: 100%; max-width: 440px; padding: 34px 30px 26px; border-radius: var(--radius-xl);
  background: rgba(15, 15, 17, 0.85); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  animation: modal-in 0.6s var(--ease);
}
.auth-view { display: flex; flex-direction: column; animation: fade-in 0.4s ease; }
.auth-s .s-mark { width: 38px; height: 38px; margin-bottom: 20px; }
.auth-card h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.025em; font-weight: 600; color: var(--fg-strong); }
.auth-card > .auth-view > p { margin: 0; font-size: 13.5px; }

.auth-steps { list-style: none; margin: 24px 0 22px; padding: 0; display: grid; gap: 2px; }
.auth-steps li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.auth-steps li:first-child { border-top: 0; }
.auth-steps .n { width: 22px; height: 22px; flex: none; border-radius: 6px; display: grid; place-items: center; font: 500 11.5px var(--mono); color: var(--text-2); background: var(--bg-3); border: 1px solid var(--line); align-self: flex-start; margin-top: 1px; }
.auth-steps div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.auth-steps b { font-weight: 500; font-size: 13.5px; }
.auth-steps div span { color: var(--text-3); font-size: 12.5px; }
.auth-steps code { font-size: 11.5px; color: var(--text-2); word-break: break-all; }
.auth-steps .btn svg { width: 13px; height: 13px; }
.auth-step-plugin { flex-wrap: wrap; row-gap: 10px; }
.auth-path {
  flex: 0 0 calc(100% - 34px); margin: 0 0 0 34px; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg);
}
.auth-steps .auth-path code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; color: var(--text); }
.auth-path-copy {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 0; border-radius: 5px;
  background: transparent; color: var(--text-2); font: inherit; font-size: 12px; line-height: 1.3; cursor: pointer; transition: color 0.2s, background 0.2s;
}
.auth-path-copy:hover { color: var(--text); background: var(--bg-3); }
.auth-path-copy.ok { color: var(--green); }
.auth-path-copy svg { width: 13px; height: 13px; }
.auth-link { color: var(--sand); text-decoration: underline; text-decoration-color: rgba(216, 188, 146, 0.3); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.auth-link:hover { text-decoration-color: var(--sand); }

.code-input {
  width: 100%; height: 60px; text-align: center; font-size: 26px; letter-spacing: 0.22em; font-weight: 500;
  border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line-2); color: var(--fg-strong); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-transform: uppercase; padding-left: 0.22em;
}
.code-input::placeholder { color: var(--bg-4); }
.code-input:focus { border-color: rgba(216, 188, 146, 0.55); box-shadow: 0 0 0 4px rgba(216, 188, 146, 0.08); }
.code-input.shake { animation: shake 0.4s; border-color: rgba(240, 122, 115, 0.6); }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.auth-error { min-height: 20px; margin: 8px 0 10px; font-size: 12.5px; color: var(--red); text-align: center; }
.auth-note { margin: 16px 0 0 !important; font-size: 12px !important; text-align: center; }

.auth-done { align-items: center; text-align: center; padding: 10px 0; }
.done-avatar { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 18px; background: var(--bg-3) center/cover; border: 1px solid var(--line-2); position: relative; animation: pop 0.6s var(--ease); }
.done-avatar::after { content: ''; position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102015' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat; border: 3px solid var(--bg-1); }
@keyframes pop { from { transform: scale(0.8); opacity: 0; } }
.done-bar { width: 140px; height: 2px; border-radius: 2px; background: var(--bg-3); overflow: hidden; margin-top: 22px; }
.done-bar i { display: block; height: 100%; width: 100%; background: var(--sand); transform-origin: left; animation: bar 1.6s var(--ease) forwards; }
@keyframes bar { from { transform: scaleX(0); } }

@media (max-width: 480px) {
  .auth-main { min-width: 0; }
  .auth-card { min-width: 0; padding: 28px 22px 24px; }
  .auth-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 8px 12px; }
  .auth-steps .btn { grid-column: 2; justify-self: start; }
  .auth-path { grid-column: 2; margin: 0; }
  .auth-path-copy { padding: 0 7px; }
  .auth-path-copy span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .code-input { font-size: 24px; letter-spacing: 0.16em; padding-left: 0.16em; }
}