/* NBA Card Tracker — palette matched to the RAM Journey chart system.
   Tokens copied verbatim from flow-tools/journey-template.html so the site and the
   flow charts read as one product. Do not hand-pick new colours here; add a token. */
:root{
  --bg:#0b0d12; --card:#161922; --card2:#1b1f2a;
  --text:#f2f4f8; --muted:#9aa0ac; --border:#262b36;
  --orange:#FF7A18;                 /* primary accent, same as chart --p1 */
  --blue:#38bdf8; --violet:#a78bfa; --green:#34d399;
  --value:#fbbf24;                  /* prices, same token the chart uses for value */
  --gate:#e24b4a;                   /* errors / stop, same as chart gates */
  --radius:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 500px at 50% -10%, rgba(255,122,24,.10), transparent 60%);
  background-repeat:no-repeat; min-height:100vh;
}
.container{max-width:860px;margin:0 auto;padding:28px 20px 64px}
.hidden{display:none !important}

.brand{display:flex;align-items:center;gap:10px;justify-content:center;margin:36px 0 6px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 5px rgba(255,122,24,.15)}
h1{text-align:center;font-size:30px;letter-spacing:-.02em;font-weight:650}
h1 span{color:var(--orange)}
.sub{text-align:center;color:var(--muted);margin-bottom:28px;font-size:15px}
h2{font-size:17px;margin-bottom:14px;letter-spacing:-.01em}
h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}

.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;margin-bottom:18px}
.panel--quiet{background:var(--card2)}

input[type=password],input[type=text]{
  width:100%;max-width:320px;padding:12px 14px;background:var(--card2);
  border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:16px}
input::placeholder{color:var(--muted)}
input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,122,24,.18)}

button{font:inherit;font-weight:600;border:none;border-radius:10px;padding:12px 22px;
  cursor:pointer;transition:filter .15s ease,transform .05s ease}
button:active{transform:translateY(1px)}
button:hover{filter:brightness(1.08)}
.btn-primary{background:var(--orange);color:#140a02}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-danger{background:transparent;color:var(--gate);border:1px solid var(--border)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.camera-container{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  background:#000;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
video{width:100%;height:100%;object-fit:cover}

#cardImageContainer img{width:100%;max-width:300px;border-radius:var(--radius);
  border:1px solid var(--border);display:block;margin-bottom:18px}

.price{font-size:34px;font-weight:700;color:var(--value);letter-spacing:-.02em}
.price-note{color:var(--muted);font-size:13px}

ul#salesList{list-style:none}
ul#salesList li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--border);font-size:15px}
ul#salesList li:last-child{border-bottom:none}
ul#salesList .amt{color:var(--value);font-weight:600}
ul#salesList .meta{color:var(--muted);font-size:13px}

/* Honest states. The old build filled these with random numbers; anything unknown says so. */
.state{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radius);
  padding:16px;background:var(--card2);border:1px solid var(--border)}
.state .tag{flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:9px}
.state--pending .tag{background:var(--blue)}
.state--blocked .tag{background:var(--gate)}
.state p{font-size:14px;color:var(--muted)}
.state strong{color:var(--text);font-weight:600}
.error-message{color:var(--gate);font-size:14px;margin-top:10px;min-height:20px}
footer{text-align:center;color:var(--muted);font-size:12px;margin-top:32px}

pre.reading{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;line-height:1.65;color:var(--text);background:var(--card2);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px;overflow-x:auto}