/* ================================================ */
/* AUTH CARD                                        */
/* ================================================ */

.auth-card {
  width: 100%; max-width: 390px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(0,0,0,.22)),
    linear-gradient(180deg, rgba(17,24,39,.96), rgba(11,18,30,.98));
  border: 1px solid rgba(214,220,232,.10); border-radius: var(--radius-lg);
  padding: 1.75rem; display: flex; flex-direction: column; gap: .9rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 24px 56px rgba(0,0,0,.30),
    0 0 48px rgba(201,162,77,.06);
  position: relative; overflow: hidden;
}

.auth-card::before {
  content: ""; position: absolute; top: -2rem; left: 50%;
  transform: translateX(-50%); width: 16rem; height: 8rem;
  background: radial-gradient(ellipse, rgba(201,162,77,.07), transparent 70%);
  pointer-events: none;
}

.auth-card-label {
  position: relative; z-index: 1;
  font-size: .68rem; font-weight: 700; letter-spacing: .20em;
  text-transform: uppercase; color: var(--accent-gold); text-align: center;
  text-shadow: 0 0 14px rgba(201,162,77,.20);
}

/* ================================================ */
/* AUTH FORM ELEMENTS                               */
/* ================================================ */

.auth-input {
  position: relative; z-index: 1; width: 100%; padding: .82rem 1rem;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.20));
  color: var(--text-primary); font: inherit; font-size: .95rem; outline: none;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none;
}

.auth-input::placeholder { color: rgba(174,182,198,.35); }

.auth-input:focus {
  border-color: var(--accent-gold-border);
  box-shadow: 0 0 0 3px rgba(201,162,77,.10);
}

.auth-label {
  position: relative; z-index: 1; font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: -.4rem;
}

.auth-btn-primary {
  position: relative; z-index: 1; width: 100%; padding: .9rem;
  border-radius: var(--radius-md); border: 1px solid rgba(201,162,77,.50);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(135deg, #c9a24d, #a8813a);
  color: #08101b; font-family: "Jost", sans-serif;
  font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; min-height: 0;
  transition: opacity .2s, transform .1s, box-shadow .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px rgba(201,162,77,.28), 0 6px 18px rgba(0,0,0,.28);
}

.auth-btn-primary:active   { transform: scale(.98); opacity: .88; }
.auth-btn-primary:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.auth-btn-ghost {
  position: relative; z-index: 1; width: 100%; padding: .75rem;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: transparent; color: var(--text-secondary);
  font-family: "Jost", sans-serif; font-weight: 600; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer; min-height: 0;
  transition: border-color .2s, color .2s;
}

.auth-btn-ghost:active { background: rgba(255,255,255,.04); }

.auth-divider {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: .75rem;
  font-size: .72rem; color: var(--text-muted);
}

.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(214,220,232,.10);
}

.auth-error {
  position: relative; z-index: 1; font-size: .78rem; color: #d48f83;
  text-align: center; display: none; line-height: 1.45;
}

.auth-success {
  position: relative; z-index: 1; font-size: .78rem; color: var(--state-green);
  text-align: center; display: none; line-height: 1.45;
}

.auth-link {
  position: relative; z-index: 1; font-size: .78rem; color: var(--accent-gold);
  text-align: center; cursor: pointer; text-decoration: none; transition: opacity .2s;
}

.auth-link:hover { opacity: .8; }

/* ================================================ */
/* PAIRING INPUT                                    */
/* ================================================ */

#pairingInput {
  position: relative; z-index: 1; width: 100%; padding: .88rem 1rem;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.20));
  color: var(--text-primary); font-size: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center; letter-spacing: .06em; outline: none;
  transition: border-color .2s, box-shadow .2s; -webkit-appearance: none;
}

#pairingInput::placeholder { color: rgba(174,182,198,.30); }
#pairingInput:focus { border-color: var(--accent-gold-border); box-shadow: 0 0 0 3px rgba(201,162,77,.10); }

#pairingBtn {
  position: relative; z-index: 1; width: 100%; padding: .95rem;
  border-radius: var(--radius-md); border: 1px solid rgba(201,162,77,.50);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(135deg, #c9a24d, #a8813a);
  color: #08101b; font-family: "Jost", sans-serif;
  font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; min-height: 0;
  transition: opacity .2s, transform .1s, box-shadow .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px rgba(201,162,77,.30), 0 6px 18px rgba(0,0,0,.28);
}

#pairingBtn:active   { transform: scale(.98); opacity: .88; }
#pairingBtn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

#pairingError {
  position: relative; z-index: 1; font-size: .78rem; color: #d48f83;
  text-align: center; display: none; line-height: 1.45;
}

/* ================================================ */
/* TOAST                                            */
/* ================================================ */

#message {
  position: fixed; top: calc(5.6rem + var(--safe-top)); left: 1rem; right: 1rem;
  z-index: 300; max-width: 42rem; margin: 0 auto;
  padding: .78rem 1rem; border-radius: var(--radius-md);
  background: rgba(201,162,77,.12); border: 1px solid rgba(201,162,77,.30);
  color: var(--accent-gold); text-align: center; font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 16px 36px rgba(0,0,0,.28), 0 0 24px rgba(201,162,77,.14);
  display: none; pointer-events: none;
}

/* ================================================ */
/* CATEGORY HEADER                                  */
/* ================================================ */

.ah-category { display: flex; align-items: center; gap: .75rem; margin: 1.4rem 0 .65rem; }
.ah-category:first-child { margin-top: .65rem; }

.ah-category::before, .ah-category::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,77,.32), transparent);
}

.ah-category-text {
  flex-shrink: 0; font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic; font-weight: 600; font-size: 1.22rem; line-height: 1;
  color: var(--accent-gold); text-shadow: 0 0 18px rgba(201,162,77,.16);
}

/* ================================================ */
/* ITEM ROW                                         */
/* ================================================ */

.ah-item {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1rem .9rem .95rem; margin-bottom: .52rem;
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 14% 50%, rgba(255,255,255,.055), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.032), rgba(0,0,0,.22)),
    linear-gradient(180deg, rgba(17,24,39,.94), rgba(11,18,30,.97));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.028), inset 0 0 20px rgba(255,255,255,.014), var(--shadow-card);
  cursor: pointer;
  transition: border-color .18s, transform .12s, box-shadow .18s, opacity .18s;
  -webkit-tap-highlight-color: transparent; position: relative; overflow: hidden;
}

.ah-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .18s; }
.ah-item::after  { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 90% 50%, rgba(255,255,255,.018) 0%, transparent 55%); }
.ah-item:active  { transform: scale(.985); }

.ah-item.low {
  border-color: var(--state-amber-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.028), inset 0 0 20px rgba(255,255,255,.014), 0 0 0 1px rgba(201,162,77,.10), 0 4px 18px rgba(0,0,0,.22), 0 0 18px var(--state-amber-glow), 0 0 40px rgba(201,162,77,.18);
}
.ah-item.low::before { background: linear-gradient(180deg, rgba(201,162,77,1), rgba(201,162,77,.52)); }

.ah-item.out {
  border-color: var(--state-red-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.028), inset 0 0 20px rgba(255,255,255,.014), 0 0 0 1px rgba(186,101,91,.12), 0 4px 18px rgba(0,0,0,.24), 0 0 22px var(--state-red-glow), 0 0 48px rgba(186,101,91,.22);
}
.ah-item.out::before { background: linear-gradient(180deg, rgba(186,101,91,1), rgba(186,101,91,.55)); }

.ah-item.purchased {
  border-color: rgba(111,165,110,.28); opacity: .70;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.022), inset 0 0 16px rgba(255,255,255,.010), 0 0 0 1px rgba(111,165,110,.06), 0 4px 16px rgba(0,0,0,.18), 0 0 14px rgba(111,165,110,.22);
}
.ah-item.purchased::before { background: linear-gradient(180deg, rgba(111,165,110,.95), rgba(111,165,110,.48)); }

.ah-item-icon { width: 1.9rem; height: 1.9rem; object-fit: contain; flex-shrink: 0; position: relative; z-index: 1; filter: drop-shadow(0 0 4px rgba(0,0,0,.30)) drop-shadow(0 0 8px rgba(255,255,255,.02)); }

.ah-item.low .ah-item-icon       { filter: drop-shadow(0 0 3px rgba(0,0,0,.30)) drop-shadow(0 0 10px rgba(201,162,77,.55)) drop-shadow(0 0 22px rgba(201,162,77,.28)); }
.ah-item.out .ah-item-icon       { filter: drop-shadow(0 0 3px rgba(0,0,0,.30)) drop-shadow(0 0 12px rgba(186,101,91,.60)) drop-shadow(0 0 24px rgba(186,101,91,.32)); }
.ah-item.purchased .ah-item-icon { filter: drop-shadow(0 0 3px rgba(0,0,0,.26)) drop-shadow(0 0 10px rgba(111,165,110,.48)) drop-shadow(0 0 20px rgba(111,165,110,.22)); }

.ah-item-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .16rem; position: relative; z-index: 1; }

.ah-item-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.16rem; font-weight: 600; color: var(--text-primary); line-height: 1.16; min-width: 0; word-break: break-word; }

.ah-item-meta { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(174,182,198,.48); }

.ah-badge { flex-shrink: 0; font-size: .60rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding: .28rem .62rem; border-radius: 999px; border: 1px solid transparent; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); position: relative; z-index: 1; }

.ah-badge.low       { color: var(--state-amber); border-color: rgba(201,162,77,.34); background: rgba(201,162,77,.12); }
.ah-badge.out       { color: #d48f83; border-color: rgba(186,101,91,.34); background: rgba(186,101,91,.12); }
.ah-badge.purchased { color: var(--state-green); border-color: rgba(111,165,110,.30); background: rgba(111,165,110,.10); }

.ah-empty { padding: 2.8rem 1rem; text-align: center; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.1rem; color: var(--text-muted); }