/* Aureus page: the background before the app draws, the access lock and the phone note. The app styles itself. */
html { background: #0a0c0b; }
html.light { background: #fff; }
body { margin: 0; }

.lock { min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: #0a0c0b; color: #f1f4f2; font: 15px/1.55 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; }
.lock[hidden] { display: none; }
.lock-card { width: min(640px, 100%); box-sizing: border-box; padding: 40px; border-radius: 18px; background: #121513; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
.lock-brand { display: flex; align-items: center; gap: 14px; }
.lock-brand img { border-radius: 13px; }
.lock-name { font: 700 26px/1.1 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; letter-spacing: .01em; }
.lock-by { color: #d9b65e; font-weight: 600; font-size: 14px; }
.lock h1 { margin: 26px 0 8px; font: 700 36px/1.15 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; letter-spacing: -.02em; }
.lock-lead { margin: 0; color: #c3cbc7; font-size: 16px; }
.lock-points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lock-points li { position: relative; padding-left: 26px; color: #dfe5e2; }
.lock-points li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid #20d08f; border-bottom: 2px solid #20d08f; transform: rotate(-45deg); }
.lock-note { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(217,182,94,.1); color: #e8d6a4; font-size: 14px; }
.lock-buy { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lock-price { display: grid; }
.lock-price b { font: 700 40px/1 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif; letter-spacing: -.02em; }
.lock-price span { color: #a8b1ac; font-size: 14px; margin-top: 6px; }
.lock-price em { color: #20d08f; font-style: normal; font-weight: 600; margin-top: 2px; }
.store-badge { display: inline-flex; flex-direction: column; justify-content: center; padding: 10px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); color: #f1f4f2; font-weight: 600; line-height: 1.2; }
.store-badge small { color: #a8b1ac; font-weight: 500; font-size: 12.5px; }
.lock-code { margin-top: 24px; }
.lock-code label { display: block; font-weight: 600; margin-bottom: 8px; }
.lock-row { display: flex; gap: 10px; }
.lock-row input { flex: 1; min-width: 0; height: 48px; box-sizing: border-box; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: #171b19; color: #f1f4f2; font: 600 18px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.lock-row input::placeholder { color: #6f7a75; letter-spacing: .08em; }
.lock-row input:focus { outline: none; border-color: #20d08f; box-shadow: 0 0 0 3px rgba(32,208,143,.18); }
.lock-row button { height: 48px; padding: 0 22px; border: 0; border-radius: 10px; background: #20d08f; color: #03140c; font: 700 15px/1 "Segoe UI", system-ui, sans-serif; cursor: pointer; }
.lock-row button:hover { filter: brightness(1.07); }
.lock-row button:focus-visible, .lock a:focus-visible { outline: 2px solid #20d08f; outline-offset: 2px; }
.lock-err { margin: 10px 0 0; color: #ff8577; font-weight: 600; }
.lock-err[hidden] { display: none; }
.lock-foot { margin: 26px 0 0; color: #a8b1ac; font-size: 14px; }
.lock-foot a { color: #d9b65e; text-decoration: none; }
.lock-foot a:hover { text-decoration: underline; }
.lock-disc { margin: 8px 0 0; color: #8a948f; font-size: 13px; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 560px) { .lock-card { padding: 26px; } .lock h1 { font-size: 28px; } .lock-row { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .shake { animation: none; } }

.phone-note { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 100; display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 16px; border-radius: 12px; background: #171b19; color: #f1f4f2; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 12px 40px rgba(0,0,0,.5); font: 14px/1.4 "Segoe UI", system-ui, sans-serif; }
.phone-note span { flex: 1; }
.phone-note button { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: inherit; font-size: 22px; cursor: pointer; }