/* public/styles.css
   Minimal PWA shell styles: reset, CJK-safe font stack, brand variables,
   bottom-nav layout primitives. Tasks 11-12 extend this per screen.
   NOTE: no inline-data-URI url() backgrounds anywhere in this file (CSP
   forbids inline-data-URI CSS backgrounds — img-src allows that scheme for
   canvas/SVG barcode rendering only, not CSS backgrounds). */

:root {
  --nw-red: #8b0000;
  --nw-black: #111;
  --nw-gold: #c9a227;
  --nw-white: #ffffff;
  --nw-gray-100: #f5f5f5;
  --nw-gray-300: #d9d9d9;
  --nw-gray-600: #666666;
  --nw-nav-height: 56px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'PingFang SC',
    'Hiragino Sans',
    'Hiragino Kaku Gothic ProN',
    'Noto Sans CJK SC',
    'Noto Sans CJK JP',
    'Noto Sans SC',
    'Noto Sans JP',
    sans-serif;
  background: var(--nw-gray-100);
  color: var(--nw-black);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--nw-nav-height) + 12px);
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* Bottom tab nav — shared across all pages that have it. */
.nw-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: var(--nw-nav-height);
  background: var(--nw-white);
  border-top: 1px solid var(--nw-gray-300);
  z-index: 100;
}

.nw-bottom-nav a,
.nw-bottom-nav button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 12px;
  background: none;
  border: none;
}

.nw-bottom-nav .nw-nav-active {
  color: var(--nw-red);
}

/* Version footer (populated by NW.injectFooter). */
footer#nw-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px;
  font-size: 12px;
  color: var(--nw-gray-600);
}

.nw-footer-version::before {
  content: 'v';
}

.nw-lang-toggle {
  background: none;
  border: 1px solid var(--nw-gray-300);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}

.nw-lang-toggle:active {
  background: var(--nw-gray-100);
}

/* ---------------------------------------------------------------------
   Task 11: login flow + card tab
   --------------------------------------------------------------------- */

/* Pages without a bottom nav (login) don't need the shell's reserved
   bottom padding. */
body.nw-no-nav {
  padding-bottom: 12px;
}

/* Buttons shared by login + card pages. */
.nw-btn-primary,
.nw-btn-secondary,
.nw-btn-link {
  display: block;
  width: 100%;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.nw-btn-primary {
  background: var(--nw-red);
  color: var(--nw-white);
  border: none;
}

.nw-btn-primary:disabled {
  background: var(--nw-gray-300);
  color: var(--nw-gray-600);
  cursor: not-allowed;
}

.nw-btn-secondary {
  background: var(--nw-white);
  color: var(--nw-black);
  border: 1px solid var(--nw-gray-300);
}

.nw-btn-secondary:disabled {
  color: var(--nw-gray-600);
  cursor: not-allowed;
}

.nw-btn-link {
  background: none;
  border: none;
  color: var(--nw-gray-600);
  font-weight: 400;
  text-decoration: underline;
}

.nw-busy {
  opacity: 0.6;
}

.nw-field-label {
  display: block;
  font-size: 13px;
  color: var(--nw-gray-600);
  margin-bottom: 6px;
}

.nw-field-error {
  color: var(--nw-red);
  font-size: 13px;
  margin: 8px 0;
}

.nw-error-banner {
  background: #fdecea;
  color: var(--nw-red);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  margin: 0 16px 12px;
}

/* --- Login page --- */

.nw-login-main {
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 20px;
}

.nw-login-brand {
  text-align: center;
  margin-bottom: 32px;
}

.nw-login-brand-zh {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--nw-black);
}

.nw-login-brand-en {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--nw-gold);
  margin-top: 4px;
}

.nw-login-step h1 {
  font-size: 18px;
  margin-bottom: 16px;
}

.nw-phone-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.nw-country-select {
  flex: 0 0 auto;
  border: 1px solid var(--nw-gray-300);
  border-radius: 6px;
  padding: 12px 8px;
  background: var(--nw-white);
}

.nw-phone-input,
.nw-otp-input,
.nw-claim-input {
  flex: 1 1 auto;
  width: 100%;
  border: 1px solid var(--nw-gray-300);
  border-radius: 6px;
  padding: 12px;
  font-size: 16px;
  margin-bottom: 4px;
}

.nw-otp-sent-to {
  font-size: 13px;
  color: var(--nw-gray-600);
  margin-bottom: 16px;
  word-break: break-all;
}

.nw-login-step .nw-btn-primary {
  margin-top: 12px;
}

.nw-login-step .nw-btn-secondary {
  margin-top: 10px;
}

.nw-login-step .nw-btn-link {
  margin-top: 10px;
}

.nw-agree-terms {
  margin-top: 20px;
  font-size: 12px;
  color: var(--nw-gray-600);
  text-align: center;
}

.nw-privacy-inline-link {
  text-decoration: underline;
}

.nw-claim-divider {
  text-align: center;
  color: var(--nw-gray-600);
  font-size: 13px;
  margin: 16px 0;
}

/* --- Card page --- */

.nw-page-header {
  padding: 16px;
}

.nw-page-header h1 {
  font-size: 18px;
}

.nw-card-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 16px;
}

.nw-card {
  background: var(--nw-black);
  color: var(--nw-white);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}

.nw-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.nw-card-brand-zh {
  display: block;
  font-size: 17px;
  font-weight: 700;
}

.nw-card-brand-en {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--nw-gold);
  margin-top: 2px;
}

.nw-card-tier {
  border: 1px solid var(--nw-gold);
  color: var(--nw-gold);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.nw-card-holder {
  font-size: 16px;
  margin-bottom: 8px;
}

.nw-card-member-row {
  font-size: 13px;
  color: var(--nw-gray-300);
  margin-bottom: 16px;
}

.nw-card-member-number {
  margin-left: 6px;
  letter-spacing: 0.05em;
}

.nw-card-barcode-wrap {
  min-height: 110px;
}

.nw-barcode-block {
  background: var(--nw-white);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  justify-content: center;
}

.nw-barcode-block canvas {
  max-width: 100%;
  height: auto;
}

.nw-barcode-pending {
  background: var(--nw-gray-300);
  min-height: 94px;
  align-items: center;
  color: var(--nw-gray-600);
  text-align: center;
}

.nw-pending-msg {
  font-size: 13px;
  padding: 8px;
}

.nw-claim-prompt {
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed var(--nw-gray-300);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
}

.nw-claim-prompt-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.nw-claim-prompt-body {
  font-size: 13px;
  color: var(--nw-gray-300);
  margin-bottom: 12px;
}

.nw-claim-prompt-cta {
  display: inline-block;
  width: auto;
  padding: 10px 20px;
}

.nw-card-scan-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--nw-gray-300);
  text-align: center;
}

.nw-points-summary {
  background: var(--nw-white);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
}

.nw-points-balance-label {
  font-size: 13px;
  color: var(--nw-gray-600);
}

.nw-points-balance {
  font-size: 36px;
  font-weight: 700;
  color: var(--nw-red);
  margin: 4px 0 8px;
}

.nw-points-rate-line {
  font-size: 13px;
  color: var(--nw-gray-600);
  margin-bottom: 8px;
}

.nw-points-expiry {
  font-size: 13px;
  color: var(--nw-gray-600);
}

.nw-points-expiry-risk {
  color: var(--nw-red);
  font-weight: 600;
}

.nw-history {
  background: var(--nw-white);
  border-radius: 14px;
  padding: 16px;
}

.nw-history h2 {
  font-size: 15px;
  margin-bottom: 10px;
}

.nw-history-list {
  display: flex;
  flex-direction: column;
}

.nw-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--nw-gray-100);
}

.nw-history-item:last-child {
  border-bottom: none;
}

.nw-history-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--nw-gray-100);
}

.nw-history-icon-pos {
  color: var(--nw-red);
}

.nw-history-icon-neg {
  color: var(--nw-gray-600);
}

.nw-history-main {
  flex: 1 1 auto;
  min-width: 0;
}

.nw-history-type {
  font-size: 14px;
}

.nw-history-date {
  font-size: 12px;
  color: var(--nw-gray-600);
}

.nw-history-points {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
}

.nw-history-points-pos {
  color: var(--nw-red);
}

.nw-history-points-neg {
  color: var(--nw-gray-600);
}

.nw-history-empty {
  font-size: 13px;
  color: var(--nw-gray-600);
  text-align: center;
  padding: 12px 0;
}

.nw-history-load-more {
  margin-top: 12px;
}

/* ---------------------------------------------------------------------
   Task 12: cellar tab, home tab, staff admin
   --------------------------------------------------------------------- */

/* --- Cellar page --- */

.nw-cellar-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 16px;
}

.nw-cellar-loading,
.nw-cellar-empty {
  text-align: center;
  color: var(--nw-gray-600);
  font-size: 13px;
  padding: 24px 0;
}

.nw-cellar-unlinked {
  background: var(--nw-white);
  border: 1px dashed var(--nw-gray-300);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}

/* .nw-claim-prompt-body's --nw-gray-300 text color was authored for the
   dark .nw-card background it originally shipped inside (card.js) — reusing
   the class here (a light-background box) needs a readable override rather
   than a near-invisible light-gray-on-white pairing. */
.nw-cellar-unlinked .nw-claim-prompt-body {
  color: var(--nw-gray-600);
}

.nw-cellar-list {
  display: flex;
  flex-direction: column;
}

.nw-cellar-month {
  font-size: 14px;
  font-weight: 700;
  color: var(--nw-gray-600);
  margin: 16px 0 8px;
}

.nw-cellar-month:first-child {
  margin-top: 0;
}

.nw-cellar-line-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nw-cellar-line-item {
  background: var(--nw-white);
  border-radius: 12px;
  overflow: hidden;
}

.nw-cellar-line-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

.nw-cellar-line-main {
  flex: 1 1 auto;
  min-width: 0;
}

.nw-cellar-line-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.nw-cellar-line-name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nw-cellar-vintage-badge {
  flex: 0 0 auto;
  border: 1px solid var(--nw-gold);
  color: var(--nw-gold);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
}

.nw-cellar-line-meta {
  font-size: 12px;
  color: var(--nw-gray-600);
}

.nw-cellar-line-amount {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--nw-red);
}

.nw-cellar-detail {
  padding: 0 14px 14px;
  border-top: 1px solid var(--nw-gray-100);
}

.nw-cellar-reactions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.nw-reaction-chip {
  flex: 1 1 0;
  border: 1px solid var(--nw-gray-300);
  border-radius: 999px;
  padding: 8px 4px;
  font-size: 12px;
  background: var(--nw-white);
  cursor: pointer;
}

.nw-reaction-chip-active {
  background: var(--nw-red);
  border-color: var(--nw-red);
  color: var(--nw-white);
}

.nw-cellar-detail-error {
  margin-top: 8px;
}

.nw-cellar-note-wrap {
  margin-top: 12px;
}

.nw-cellar-note {
  width: 100%;
  min-height: 72px;
  border: 1px solid var(--nw-gray-300);
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  resize: vertical;
}

.nw-cellar-note-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.nw-cellar-note-save {
  width: auto;
  padding: 8px 20px;
}

.nw-cellar-note-saved {
  font-size: 12px;
  color: var(--nw-gray-600);
}

/* --- Home page --- */

.nw-home-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nw-home-welcome p {
  font-size: 16px;
  font-weight: 600;
}

.nw-home-nudge {
  background: #fdecea;
  color: var(--nw-red);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}

.nw-home-tier-explainer,
.nw-home-store-info {
  background: var(--nw-white);
  border-radius: 14px;
  padding: 16px;
}

.nw-home-tier-explainer h2,
.nw-home-store-info h2 {
  font-size: 15px;
  margin-bottom: 10px;
}

.nw-home-tier-list li {
  font-size: 13px;
  color: var(--nw-gray-600);
  padding: 4px 0;
}

.nw-home-store-info p {
  font-size: 13px;
  color: var(--nw-gray-600);
}

.nw-home-links {
  display: flex;
  gap: 10px;
}

.nw-home-links a {
  width: auto;
  flex: 1 1 0;
}

/* --- Staff admin page --- */

.nw-admin-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nw-admin-section {
  background: var(--nw-white);
  border-radius: 14px;
  padding: 16px;
}

.nw-admin-section h2 {
  font-size: 16px;
  margin-bottom: 12px;
}

.nw-admin-section h3 {
  font-size: 14px;
  margin: 16px 0 10px;
}

.nw-admin-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.nw-admin-search-input {
  flex: 1 1 auto;
  border: 1px solid var(--nw-gray-300);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
}

.nw-admin-search-btn {
  width: auto;
  padding: 10px 20px;
}

.nw-admin-empty {
  font-size: 13px;
  color: var(--nw-gray-600);
  padding: 8px 0;
}

.nw-admin-success {
  font-size: 13px;
  color: var(--nw-red);
  margin: 8px 0;
}

.nw-admin-table-wrap {
  overflow-x: auto;
}

.nw-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.nw-admin-table th,
.nw-admin-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--nw-gray-100);
  white-space: nowrap;
}

.nw-admin-table th {
  color: var(--nw-gray-600);
  font-weight: 600;
}

.nw-admin-row-clickable {
  cursor: pointer;
}

.nw-admin-row-clickable:active {
  background: var(--nw-gray-100);
}

.nw-admin-detail-balance-line {
  font-size: 14px;
  margin-bottom: 4px;
}

.nw-admin-detail-balance {
  font-weight: 700;
  color: var(--nw-red);
  margin-left: 6px;
}

.nw-admin-pending-actions {
  display: flex;
  gap: 8px;
}

.nw-admin-approve-btn,
.nw-admin-reject-btn {
  width: auto;
  padding: 6px 14px;
  font-size: 12px;
}

#nw-admin-export-link {
  width: auto;
  display: inline-block;
  padding: 10px 20px;
}

/* ---------------------------------------------------------------------
   Task 13: privacy policy page (public/privacy.html) — standalone, no
   NW shell (no login, no /api/* calls). Both zh and ja sections are
   always in the DOM; privacy.js toggles which one is visible via
   .nw-privacy-hidden.
   --------------------------------------------------------------------- */

.nw-privacy-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  line-height: 1.7;
}

.nw-privacy-lang-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.nw-privacy-lang-btn {
  background: none;
  border: 1px solid var(--nw-gray-300);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
}

.nw-privacy-lang-active {
  border-color: var(--nw-red);
  color: var(--nw-red);
}

.nw-privacy-hidden {
  display: none;
}

.nw-privacy-section h1 {
  font-size: 20px;
  margin-bottom: 12px;
}

.nw-privacy-section h2 {
  font-size: 15px;
  margin: 20px 0 6px;
}

.nw-privacy-section p {
  font-size: 14px;
  margin-bottom: 8px;
}

.nw-privacy-section ol {
  list-style: decimal;
  margin: 6px 0 10px 20px;
}

.nw-privacy-section ol li {
  font-size: 14px;
  margin-bottom: 4px;
}

.nw-privacy-meta {
  margin-top: 24px;
  color: var(--nw-gray-600);
  font-size: 13px;
}

.nw-privacy-back {
  margin-top: 24px;
  text-align: center;
}

.nw-privacy-back a {
  text-decoration: underline;
  font-size: 14px;
}