/* ===================== Account: login, register, profile ===================== */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 66px); }
.auth__art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 5vw, 64px);
  background: radial-gradient(80% 60% at 20% 20%, rgba(255, 61, 139, .45), transparent 70%), radial-gradient(70% 60% at 90% 80%, rgba(61, 214, 255, .3), transparent 70%), linear-gradient(160deg, #1d0f4a, #0e0826); }
.auth__art h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 16ch; }
.auth__art p { color: var(--muted); max-width: 42ch; }
.auth__tiles { position: absolute; inset: 40px 40px auto auto; display: grid; grid-template-columns: repeat(5, 54px); gap: 10px; transform: rotate(-8deg); opacity: .9; }
.auth__tiles span { height: 54px; border-radius: 14px; display: grid; place-items: center; font: 800 1.05rem/1 var(--font-display); background: rgba(255,255,255,.08); color: var(--muted); }
.auth__tiles span:nth-child(10) { background: var(--gold); color: #2a1300; box-shadow: 0 10px 30px -8px rgba(255,200,61,.8); }
.auth__tiles span:nth-child(9) { background: #ffe08a; color: #2a1300; }
.auth__form { display: grid; place-items: center; padding: clamp(24px, 5vw, 64px) var(--gutter); }
.auth__box { width: min(420px, 100%); }
.auth__box h1 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.auth__box .lead { font-size: 1rem; margin-bottom: 24px; }
.auth__alt { margin-top: 22px; color: var(--muted); font-size: .95rem; display: grid; gap: 6px; }
.field-error { color: var(--red); font-size: .86rem; font-weight: 600; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 76px; }
.password-wrap button { position: absolute; right: 6px; top: 6px; height: 32px; padding: 0 10px; border-radius: 8px; border: 0; background: rgba(255,255,255,.08); color: var(--muted); font: 600 .8rem/1 var(--font-body); cursor: pointer; }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth__art { min-height: 220px; } .auth__tiles { display: none; } }

/* profile */
.profile-head { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: clamp(24px, 4vw, 40px) 0; }
.profile-avatar { position: relative; width: 120px; height: 120px; }
.profile-avatar img { width: 120px; height: 120px; border-radius: 32px; object-fit: cover; border: 3px solid var(--line); }
.profile-avatar label { position: absolute; right: -6px; bottom: -6px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--pink); color: #fff; cursor: pointer; font-weight: 800; font-size: 1.2rem; box-shadow: var(--shadow); }
.profile-avatar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.profile-head h1 { margin: 0; }
.badge-dev { background: rgba(255,200,61,.16); color: var(--gold); border-color: rgba(255,200,61,.45); }
.points-card { display: flex; align-items: center; gap: 18px; }
.points-card__value { font: 800 2.4rem/1 var(--font-display); color: var(--gold); }
.timer-track { height: 12px; border-radius: 999px; background: var(--ink-2); overflow: hidden; margin: 10px 0 14px; }
.timer-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--pink)); border-radius: 999px; transition: width 1s linear; }
.slices { display: grid; grid-template-columns: repeat(25, 1fr); gap: 3px; margin: 12px 0; }
.slices i { height: 12px; border-radius: 3px; background: var(--ink-2); }
.slices i.on { background: var(--cyan); }
.settings-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); align-items: start; }
.danger-zone { border-color: rgba(255,90,106,.45); }
.danger-zone h2 { color: var(--red); }
.btn-google { --b-bg: #fff; --b-fg: #1f1f1f; --b-border: #dadce0; gap: 12px; }
.btn-google:hover { --b-border: #a8acb3; }
.auth__or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: .85rem; margin: 18px 0; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.notif-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.notif { display: grid; grid-template-columns: 12px 1fr; gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.notif p { margin: 4px 0; color: var(--muted); }
.notif a { color: var(--text); text-decoration: none; } .notif a:hover { text-decoration: underline; }
.notif__dot { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--line); }
.notif.is-new { border-color: rgba(255, 61, 139, .45); } .notif.is-new .notif__dot { background: var(--pink); }