:root{
  --ink: #0F1B22;
  --panel: #16262E;
  --panel-2: #1C313B;
  --line: #2B4653;
  --cellulose: #C9803F;
  --cellulose-light: #E3A868;
  --chalk: #E9EDE9;
  --ink-soft: #9FB2BA;
  --danger: #B4573F;
  --ok: #6B9B6E;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--ink);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  color: var(--chalk);
  font-family: 'IBM Plex Sans', -apple-system, sans-serif;
  min-height:100vh;
  display:flex; align-items:flex-start; justify-content:center;
  padding: 60px 20px;
}
.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:32px 30px;
  width:100%; max-width:400px;
}
.card.wide{max-width:640px;}
h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:1.4rem; margin:0 0 6px; color:var(--chalk);
}
p.sub{color:var(--ink-soft); font-size:.88rem; margin:0 0 24px;}
label{display:block; font-size:.82rem; color:var(--ink-soft); margin-bottom:6px;}
input[type=email], input[type=password], input[type=text], input[type=number]{
  width:100%; background:var(--ink); border:1px solid var(--line); color:var(--chalk);
  padding:11px 12px; border-radius:5px; font-size:.92rem; margin-bottom:16px; font-family:inherit;
}
input:focus{outline:none; border-color:var(--cellulose);}
button.primary{
  width:100%; padding:13px; border:none; border-radius:5px; cursor:pointer;
  background: var(--cellulose); color:#1A1006; font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:.95rem;
}
button.primary:hover{background:var(--cellulose-light);}
button.primary:disabled{opacity:.5; cursor:not-allowed;}
button.secondary{
  width:100%; padding:11px; border:1px solid var(--cellulose); border-radius:5px; cursor:pointer;
  background:transparent; color:var(--cellulose-light); font-weight:600; font-size:.88rem; font-family:inherit;
}
.error{background:rgba(180,87,63,.15); border:1px solid var(--danger); color:#E3A89C; padding:10px 12px; border-radius:5px; font-size:.85rem; margin-bottom:16px; display:none;}
.foot{text-align:center; margin-top:18px; font-size:.85rem; color:var(--ink-soft);}
.foot a{color:var(--cellulose-light); text-decoration:none;}
.foot a:hover{text-decoration:underline;}

.topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;}
.topbar .who{font-size:.85rem; color:var(--ink-soft);}
.topbar .who b{color:var(--chalk);}
.logout{background:none; border:none; color:var(--ink-soft); font-size:.82rem; cursor:pointer; text-decoration:underline;}

.token-badge{
  display:inline-flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; padding:14px 18px; margin-bottom:22px;
}
.token-badge .num{font-family:'Space Grotesk',sans-serif; font-size:1.8rem; font-weight:700; color:var(--cellulose-light);}
.token-badge .lbl{font-size:.82rem; color:var(--ink-soft);}

.qty-row{display:flex; gap:8px; margin-bottom:16px;}
.qty-row button{
  flex:1; padding:10px; border:1px solid var(--line); background:var(--ink); color:var(--chalk);
  border-radius:5px; cursor:pointer; font-family:inherit; font-size:.88rem;
}
.qty-row button.active{border-color:var(--cellulose); background:rgba(201,128,63,.15); color:var(--cellulose-light);}
.price-preview{text-align:center; color:var(--ink-soft); font-size:.85rem; margin-bottom:18px;}
.price-preview b{color:var(--chalk); font-size:1.1rem;}

.status-box{text-align:center; padding:20px;}
.status-box .icon{font-size:2.6rem; margin-bottom:10px;}