/* login + onboarding screens (the app itself uses the identical style.css) */
[hidden]{display:none !important;}   /* .screen sets display:flex, which would otherwise beat the hidden attr */
.screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.card{width:100%; max-width:440px; text-align:center;}
.card h1{font-family:'Archivo Narrow',sans-serif; font-weight:700; letter-spacing:.04em; font-size:30px; margin:0 0 6px; color:var(--ink);}
.card .sub{color:var(--muted); line-height:1.6; margin:0 0 26px;}
.card .field{width:100%; padding:13px 15px; border-radius:10px; border:1px solid #33281c; background:#191410; color:var(--ink); font-size:15px; margin-bottom:12px;}
.card .field:focus{outline:none; border-color:var(--accent);}
.card .go{width:100%; padding:13px; border-radius:10px; border:none; background:var(--accent); color:#241a0e; font-weight:700; font-size:15px; cursor:pointer;}
.card .go:hover{filter:brightness(1.06);}
.card .go:disabled{opacity:.5; cursor:default;}
.card .go.secondary{margin-top:10px; background:transparent; border:1px solid #33281c; color:var(--muted);}
.card .go.secondary:hover{border-color:var(--accent); color:var(--ink); filter:none;}
.card .note{margin-top:18px; font-size:12px; color:var(--dim); line-height:1.6;}
.card .ok{margin-top:18px; color:var(--positive,#a8b58f); font-size:14px; line-height:1.6;}
.card .err{margin-top:12px; color:#d99b8c; font-size:13px; min-height:16px;}

/* onboarding source picker */
.sources{display:flex; flex-direction:column; gap:12px; text-align:left;}
.source-opt{border:1px solid #33281c; border-radius:12px; padding:16px; cursor:pointer; background:#151210; transition:border-color .12s;}
.source-opt:hover{border-color:#5a4636;}
.source-opt.on{border-color:var(--accent); background:#1c1710;}
.source-opt h3{margin:0 0 3px; font-family:'Archivo Narrow',sans-serif; font-size:16px; color:var(--ink);}
.source-opt p{margin:0; font-size:12.5px; color:var(--muted); line-height:1.5;}
.source-body{margin-top:14px; text-align:left;}
.source-body label{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:10px 0 4px; font-family:'Courier Prime',monospace;}
.spotify-steps{font-size:13px; color:var(--muted); line-height:1.7; padding-left:18px; margin:0 0 14px;}
.spotify-steps code{background:#0e0b08; padding:2px 6px; border-radius:4px; color:#e7d9c4; font-size:12px;}
.topbar{position:fixed; top:0; right:0; padding:12px 16px; z-index:60; font-size:12px; color:var(--muted);}
.topbar a{color:var(--muted); text-decoration:none; margin-left:14px;}
.topbar a:hover{color:var(--ink);}