:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.footer { margin-top: 40px; padding: 14px 10px; border-top: 1px solid #243145; background: #0b0f14; font-size: 13px; color: #cfe2f8; }
.footerInner { max-width: 900px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footerLink { color: #9bd1ff; text-decoration: none; }
.footerLink:hover { text-decoration: underline; }

body { margin: 0; background: #0b0f14; color: #e8eef6; }
.wrap { max-width: 980px; margin: 0 auto; padding: 18px; }
h1, h2 { margin: 0 0 12px; }
a.link { color: #9bd1ff; text-decoration: none; }
a.link:hover { text-decoration: underline; }

.topbar { background: #0f1621; border-bottom: 1px solid #1f2a3a; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.grid2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.card { background: #0f1621; border: 1px solid #1f2a3a; border-radius: 12px; padding: 14px; }
label { display:block; margin: 10px 0 6px; font-weight: 600; }
input, textarea { width: 100%; box-sizing: border-box; background: #0b0f14; border: 1px solid #243145; border-radius: 10px; color: #e8eef6; padding: 10px; }
textarea { resize: vertical; }
button { margin-top: 12px; background: #2b72ff; color: white; border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 700; }
button:disabled { opacity: .45; cursor: not-allowed; }

.msg { padding: 10px; border-radius: 10px; margin-bottom: 12px; border: 1px solid; }
.msg.err { border-color: #6b1f28; background: #1b0f12; }
.msg.ok { border-color: #1f6b3b; background: #0f1b14; }

.note { color: #b7c7db; margin: 10px 0 0; }
.hint { color: #b7c7db; margin-top: 8px; min-height: 18px; }

.meter { height: 10px; border-radius: 999px; background: #1a2333; border: 1px solid #243145; margin-top: 10px; position: relative; overflow: hidden; }
.meter::after { content:""; position:absolute; left:0; top:0; bottom:0; width: 0%; background: #ff4d4d; transition: width .15s ease; }
.meter[data-score="1"]::after { width: 20%; }
.meter[data-score="2"]::after { width: 40%; background: #ff9a4d; }
.meter[data-score="3"]::after { width: 60%; background: #ffd24d; }
.meter[data-score="4"]::after { width: 80%; background: #9bff4d; }
.meter[data-score="5"]::after { width: 100%; background: #4dff88; }

.decks { display: grid; gap: 12px; }
.deck { border: 1px solid #243145; border-radius: 12px; padding: 12px; background: #0b0f14; }
.deckHead { display:flex; justify-content: space-between; align-items:flex-start; gap: 10px; }
.deckTitle { font-weight: 800; font-size: 18px; }
.deckMeta { display:flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill { border: 1px solid #243145; background: #0f1621; padding: 4px 8px; border-radius: 999px; font-size: 12px; color: #cfe2f8; }

.deckActions { display:flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn.small { padding: 8px 10px; border-radius: 10px; background: #2b72ff; }
.btn.small.lose { background: #ff3b3b; }
.btn.small.edit { background: #7b61ff; }
.btn.small.save { background: #27c46b; }
.btn.small.cancel { background: #3a465a; }
.hero { border: 1px solid #243145; border-radius: 12px; padding: 14px; background: #0b0f14; margin: 18px 0; }
.hero .lead { font-size: 16px; color: #e8eef6; line-height: 1.6; margin-bottom: 10px; }
.features { margin: 10px 0 6px 18px; color: #cfe2f8; font-size: 14px; }
.features li { margin-bottom: 4px; }
.cta { margin-top: 8px; font-weight: 600; color: #9bd1ff; }
.auth-grid { margin-top: 16px; }
@media (max-width: 768px) { .grid2 { grid-template-columns: 1fr; } h1 { font-size: 22px; text-align: center; } .hero { padding: 12px; } }