/* style.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --cinna: #C8622A;
  --cinna-light: #E8874E;
  --cinna-dark: #8B3D14;
  --cream: #FAF6F0;
  --warm-white: #FFF9F4;
  --bark: #3D2010;
  --spice: #6B3520;
  --muted: #9E7B62;
  --border: #E8D5C4;
  --green: #2d6a4f;
  --red: #c0392b;

  --bg-body: var(--cream);
  --text-primary: var(--bark);
  --text-muted: var(--muted);
  --card-bg: #ffffff;
  --card-border: var(--border);
  --dark-card-bg: var(--bark);
  --dark-card-text: #ffffff;
  --sidebar-bg: var(--bark);
  --input-bg: #ffffff;
}

[data-theme="dark"] {
  --cinna: #F2935D;
  --cinna-light: #F8B48B;
  --cinna-dark: #E8874E;
  --cream: #14110F;
  --warm-white: #1F1A17;
  --bark: #3D2010;
  --spice: #E8D5C4;
  --muted: #B8A394;
  --border: #332720;
  --green: #4ade80;
  --red: #ef4444;

  --bg-body: #120E0C;
  --text-primary: #FAF6F0;
  --text-muted: #B8A394;
  --card-bg: #1A1412;
  --card-border: #332720;
  --dark-card-bg: #231913;
  --dark-card-text: #ffffff;
  --sidebar-bg: #0B0807;
  --input-bg: #231B17;
}


html, body {
  min-height: 100%;
  font-family: 'DM Sans', sans-serif;
  background: var(--bg-body);
  color: var(--text-primary);
}

.app {
  display: flex;
  min-height: 100vh;
}

/* Sidebar Styling */
.sidebar {
  width: 240px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  padding: 32px 20px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
  padding: 0 8px;
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: var(--cinna);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

.logo-text {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  color: #fff;
}

.logo-text em {
  color: var(--cinna-light);
  font-style: italic;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 9px;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  border: none;
  background: none;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
  text-align: left;
}

.nav-item:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
}

.nav-item.active {
  color: #fff;
  background: rgba(200,98,42,0.3);
}

.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-bottom {
  margin-top: auto;
}

.user-card {
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 34px;
  height: 34px;
  background: var(--cinna);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

.user-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.user-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  padding: 3px;
  border-radius: 5px;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.user-action-btn:hover { color: rgba(255,255,255,0.75); }

.user-avatar.has-photo {
  background-color: transparent;
}

/* Layout Engine */
.main {
  margin-left: 240px;
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topbar {
  width: 100%;
  max-width: 520px;
  margin-bottom: 36px;
}

.topbar.wide {
  max-width: 560px;
}

.page-title {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.page-sub {
  font-size: 14px;
  color: var(--text-muted);
}

/* Global Cards */
@keyframes fadeUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Receive Content Layout */
.qr-card {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 24px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

.qr-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-align: center;
}

.qr-acct {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
  letter-spacing: 0.05em;
}

.qr-frame {
  background: #ffffff !important;
  border-radius: 16px;
  padding: 20px;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  margin: 12px 0;
}

.qr-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--cinna);
  border-style: solid;
}

.qr-corner.tl { top: -1px; left: -1px; border-width: 3px 0 0 3px; border-radius: 6px 0 0 0; }
.qr-corner.tr { top: -1px; right: -1px; border-width: 3px 3px 0 0; border-radius: 0 6px 0 0; }
.qr-corner.bl { bottom: -1px; left: -1px; border-width: 0 0 3px 3px; border-radius: 0 0 0 6px; }
.qr-corner.br { bottom: -1px; right: -1px; border-width: 0 3px 3px 0; border-radius: 0 0 6px 0; }
#qr-code canvas, #qr-code img { display: block; border-radius: 6px; }

.amount-section {
  width: 100%;
  margin-bottom: 20px;
}

.amount-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--spice);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: center;
}

.amount-row {
  display: flex;
  gap: 8px;
}

.amount-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.amount-input-wrap:focus-within {
  border-color: var(--cinna);
  box-shadow: 0 0 0 3px rgba(200,98,42,0.1);
}

.currency-prefix {
  padding: 0 12px;
  color: var(--text-muted);
}

.amount-input {
  flex: 1;
  padding: 12px 12px 12px 0;
  border: none;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text-primary);
  background: transparent;
}

.btn-regen {
  padding: 12px 16px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-regen:hover {
  border-color: var(--cinna);
  color: var(--cinna);
}

.info-strip {
  width: 100%;
  padding: 12px 16px;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.btn {
  flex: 1;
  padding: 13px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary { background: var(--cinna); color: #fff; }
.btn-primary:hover { background: var(--cinna-dark); }
.btn-secondary {
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  color: var(--text-primary);
}
.btn-secondary:hover {
  border-color: var(--cinna);
  color: var(--cinna-light);
}

/* Transfer Content Layout */
.balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg);
  border: 1.5px solid var(--card-border);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 13px;
  color: var(--text-muted);
}
.balance-pill strong {
  color: var(--cinna-light);
  font-weight: 500;
}

.transfer-card {
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 36px;
  width: 100%;
  max-width: 520px;
  animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1) both;
}

.field {
  margin-bottom: 22px;
}

.field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--spice);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.input-row {
  display: flex;
  gap: 8px;
}

.field input {
  width: 100%;
  padding: 13px 16px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input::placeholder { color: var(--muted); opacity: 0.6; }
.field input:focus { border-color: var(--cinna); box-shadow: 0 0 0 3px rgba(200,98,42,0.1); }
.field input:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-lookup {
  padding: 13px 18px;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-lookup:hover { border-color: var(--cinna); color: var(--cinna); }
.btn-lookup:disabled { opacity: 0.5; cursor: not-allowed; }

.recipient-card {
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  animation: fadeUp 0.3s cubic-bezier(0.22,1,0.36,1) both;
}

.recipient-card.show { display: flex; }

.recipient-avatar {
  width: 38px;
  height: 38px;
  background: var(--cinna);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
}

.recipient-info { flex: 1; }
.recipient-name { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.recipient-acct { font-size: 12px; color: var(--muted); margin-top: 2px; }
.recipient-check { color: var(--green); }
.recipient-check svg { width: 18px; height: 18px; }

.amount-display {
  text-align: center;
  margin: 8px 0 24px;
}

.amount-big-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.amount-currency {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  color: var(--muted);
}

.amount-big {
  font-family: 'Playfair Display', serif;
  font-size: 52px;
  color: var(--text-primary);
  border: none;
  outline: none;
  background: transparent;
  width: 200px;
  text-align: center;
  font-weight: 400;
}

.amount-big::placeholder { color: var(--border); }
.amount-hint { font-size: 12px; color: var(--muted); }

.note-field {
  width: 100%;
  padding: 11px 14px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: none;
}

.note-field:focus { border-color: var(--cinna); box-shadow: 0 0 0 3px rgba(200,98,42,0.1); }
.note-field::placeholder { color: var(--muted); opacity: 0.6; }

.divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

.summary {
  background: var(--cream);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
  display: none;
}

.summary.show { display: block; }
.summary-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.summary-row:last-child { margin-bottom: 0; font-weight: 500; color: var(--text-primary); padding-top: 8px; border-top: 1px solid var(--border); }

.error-msg {
  font-size: 12px;
  color: var(--red);
  margin-top: 6px;
  display: none;
}

.error-msg.show { display: block; }

.btn-submit {
  width: 100%;
  padding: 15px;
  background: var(--cinna);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-submit:hover { background: var(--cinna-dark); }
.btn-submit:active { transform: scale(0.99); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-submit.loading { opacity: 0.7; cursor: not-allowed; }

.success-view {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
}

.success-view.show { display: flex; }

.success-icon {
  width: 72px;
  height: 72px;
  background: rgba(45,106,79,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.success-icon svg { width: 36px; height: 36px; stroke: var(--green); }
.success-title { font-family: 'Playfair Display', serif; font-size: 24px; color: var(--text-primary); margin-bottom: 8px; }
.success-sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; line-height: 1.6; }

.btn-back {
  padding: 12px 28px;
  background: var(--cinna);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-back:hover { background: var(--cinna-dark); }

/* Global Utilities */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bark);
  color: #fff;
  padding: 11px 22px;
  border-radius: 10px;
  font-size: 13px;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  z-index: 100;
  white-space: nowrap;
}

.toast.show { transform: translateX(-50%) translateY(0); }
.toast.success { background: var(--green); }
.toast.error { background: var(--red); }

@media(max-width: 700px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding: 24px 16px; }
  .amount-big { font-size: 40px; width: 160px; }
}

/* ==========================================================================
   AUTH LANDING LAYOUT (Split Screen Design)
   ========================================================================== */
body.auth-body {
  display: flex;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

body.auth-body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(200,98,42,0.08) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(200,98,42,0.06) 0%, transparent 40%);
  pointer-events: none;
}

/* Brand Panel (Left Sidebar) */
.brand-panel {
  width: 42%;
  background: var(--bark);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 52px;
  position: relative;
  overflow: hidden;
  animation: slideIn 0.7s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes slideIn {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.brand-panel::before {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,98,42,0.25) 0%, transparent 70%);
}

.brand-panel::after {
  content: '';
  position: absolute;
  top: -60px; left: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  border: 1px solid rgba(200,98,42,0.2);
}

.brand-icon {
  width: 52px; height: 52px;
  background: var(--cinna);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 48px;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #fff;
  font-weight: 700;
  letter-spacing: -1px;
  position: relative; z-index: 1;
}

.brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
  position: relative; z-index: 1;
}

.brand-name em {
  color: var(--cinna-light);
  font-style: italic;
}

.brand-tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  max-width: 280px;
  position: relative; z-index: 1;
  letter-spacing: 0.01em;
}

.brand-bottom {
  position: relative; z-index: 1;
}

.brand-features {
  list-style: none;
  display: flex; flex-direction: column; gap: 16px;
}

.brand-features li {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.01em;
}

.brand-features li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cinna);
  flex-shrink: 0;
}

/* Form Panel (Right Side) */
.form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  animation: fadeUp 0.6s 0.2s cubic-bezier(0.22,1,0.36,1) both;
}

.form-card {
  width: 100%;
  max-width: 400px;
}

.form-header {
  margin-bottom: 36px;
}

.form-greeting {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.2;
}

.form-sub {
  font-size: 14px;
  color: var(--muted);
}

/* Auth Module Tabs */
.tabs {
  display: flex;
  background: var(--card-border);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 32px;
  gap: 4px;
}

.tab {
  flex: 1;
  padding: 9px;
  border: none;
  background: transparent;
  border-radius: 7px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}

.tab.active {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(61,32,16,0.1);
}

.form-footer {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 24px;
}

.user-joined{font-size:8px;color:rgba(255,255,255,0.3);margin-top:2px;}

/* Responsiveness fallback rules */
@media(max-width: 840px) {
  .brand-panel { display: none; }
  .form-panel { padding: 32px 24px; }
}

/* ==========================================================================
   CARD SKINS — single source of truth
   Used by: dashboard.html (.card-front / .card-back)
            store.html     (.debit-preview)
   To add a skin: add one block here + one entry in store-catalog.js. Done.
   ========================================================================== */

/* All skin containers must be position:relative so ::before/::after work */
[class*="skin-"] { position: relative; }

/*
  Skin containers set their own color directly.
  Child card elements (card-logo-small, card-number-row, etc.) use
  `color: inherit` so they pick this up automatically.
  --skin-back is used by .card-back[class*="skin-"] for the flip side.
*/
[class*="skin-"] {
  color: rgba(255,255,255,0.9); /* safe default — most skins are dark */
}

/* ── 1. Midnight Spice ─────────────────────────────────────────────────── */
.skin-midnight-spice {
  background: linear-gradient(135deg, #1a0a05 0%, #3D2010 45%, #6B3520 100%);
  color: #f5d7b8;
  --skin-back: linear-gradient(135deg, #0e0503 0%, #1a0a05 100%);
}
.skin-midnight-spice::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(200,98,42,0.3) 0%, transparent 60%);
  pointer-events: none;
}

/* ── 2. Cherry Blossom ─────────────────────────────────────────────────── */
.skin-cherry-blossom {
  background: linear-gradient(160deg, #fce4ec 0%, #f8bbd9 40%, #e91e8c 100%);
  color: #4a0020;
  --skin-back: linear-gradient(135deg, #880050 0%, #c0006e 100%);
}
.skin-cherry-blossom::after {
  content: '🌸';
  position: absolute;
  font-size: 80px; opacity: 0.12;
  bottom: -10px; right: -10px;
  line-height: 1; pointer-events: none;
}

/* ── 3. Ocean Deep ─────────────────────────────────────────────────────── */
.skin-ocean-deep {
  background: linear-gradient(145deg, #0d1b2a 0%, #1b4f72 50%, #148f77 100%);
  color: #aed9e0;
  --skin-back: linear-gradient(135deg, #071018 0%, #0d2f44 100%);
}
.skin-ocean-deep::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 20px,
    rgba(255,255,255,0.015) 20px, rgba(255,255,255,0.015) 40px
  );
  pointer-events: none;
}

/* ── 4. Neon Arcade ────────────────────────────────────────────────────── */
.skin-neon-arcade {
  background: #0d0221;
  color: #ffffff;
  --skin-back: #060112;
}
.skin-neon-arcade::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,0,200,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(0,200,255,0.25) 0%, transparent 50%);
  pointer-events: none;
}
.skin-neon-arcade::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent, transparent 2px,
    rgba(255,255,255,0.02) 2px, rgba(255,255,255,0.02) 4px
  );
  pointer-events: none;
}

/* ── 5. Latte Art ──────────────────────────────────────────────────────── */
.skin-latte-art {
  background: linear-gradient(150deg, #c8a87a 0%, #9e6b3c 40%, #6b3f1c 100%);
  color: #fff8ef;
  --skin-back: linear-gradient(135deg, #3d1f08 0%, #5c3018 100%);
}
.skin-latte-art::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 25px solid rgba(255,255,255,0.07);
  pointer-events: none;
}
.skin-latte-art::after {
  content: '';
  position: absolute;
  bottom: -30px; left: 30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 18px solid rgba(255,255,255,0.05);
  pointer-events: none;
}

/* ── 6. Mossy Forest ───────────────────────────────────────────────────── */
.skin-mossy-forest {
  background: linear-gradient(135deg, #1b2e1b 0%, #2d5a27 50%, #52b788 100%);
  color: #d8f3dc;
  --skin-back: linear-gradient(135deg, #0d1a0d 0%, #1a3318 100%);
}
.skin-mossy-forest::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 18px 18px;
  pointer-events: none;
}

/* ── 7. Rose Gold Elite ────────────────────────────────────────────────── */
.skin-rose-gold {
  background: linear-gradient(130deg, #b76e79 0%, #c9956c 35%, #d4af90 60%, #b87333 100%);
  color: #ffffff;
  --skin-back: linear-gradient(135deg, #6b3040 0%, #8b5040 100%);
}
.skin-rose-gold::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
  pointer-events: none;
}

/* ── 8. Stargazer ──────────────────────────────────────────────────────── */
.skin-stargazer {
  background: #080c18;
  color: #e8e8ff;
  --skin-back: #04060e;
}
.skin-stargazer::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 65%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 30%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 25% 45%, rgba(200,180,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 65% 55%, rgba(180,200,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(ellipse at 50% 50%, rgba(100,60,180,0.4) 0%, transparent 70%);
  pointer-events: none;
}

/* ── 9. Bubblegum Pop ──────────────────────────────────────────────────── */
.skin-bubblegum {
  background: linear-gradient(130deg, #ff9de2 0%, #a78bfa 50%, #6ee7f7 100%);
  color: #3b0764;
  --skin-back: linear-gradient(135deg, #7c3aad 0%, #5b21b6 100%);
}
.skin-bubblegum::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-conic-gradient(
    rgba(255,255,255,0.06) 0deg, transparent 1deg, transparent 10deg
  );
  pointer-events: none;
}

/* ── 10. Washi Paper ───────────────────────────────────────────────────── */
.skin-washi {
  background: #f7f0e6;
  color: #2c2018;
  --skin-back: #e8ddd0;
}
.skin-washi::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 14px, rgba(180,140,100,0.07) 14px, rgba(180,140,100,0.07) 15px),
    repeating-linear-gradient(90deg, transparent, transparent 14px, rgba(180,140,100,0.07) 14px, rgba(180,140,100,0.07) 15px);
  pointer-events: none;
}
.skin-washi::after {
  content: '和';
  position: absolute;
  font-size: 120px; opacity: 0.04;
  right: 10px; bottom: -10px;
  font-family: serif; color: #2c2018;
  pointer-events: none;
}

/* ── 11. Ember Glow ────────────────────────────────────────────────────── */
.skin-ember-glow {
  background: radial-gradient(ellipse at 30% 70%, #ff6a00 0%, #c0390b 40%, #6b1a00 100%);
  color: #fff5e0;
  --skin-back: linear-gradient(135deg, #3d0e00 0%, #6b1a00 100%);
}
.skin-ember-glow::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 10%, rgba(255,200,80,0.35) 0%, transparent 50%);
  pointer-events: none;
}
.skin-ember-glow::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,120,0,0.2) 0%, transparent 70%);
  pointer-events: none;
}

/* ── 12. Arctic Fog ────────────────────────────────────────────────────── */
.skin-arctic-fog {
  background: linear-gradient(140deg, #dce9f5 0%, #b8d4ea 40%, #8fb8d8 100%);
  color: #0d2233;
  --skin-back: linear-gradient(135deg, #6a9bbf 0%, #4a7a9f 100%);
}
.skin-arctic-fog::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.7) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, rgba(140,210,255,0.3) 0%, transparent 45%);
  pointer-events: none;
}
.skin-arctic-fog::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}

/* ── 13. Obsidian ──────────────────────────────────────────────────────── */
.skin-obsidian {
  background: #0a0a0a;
  color: #e0e0e0;
  --skin-back: #050505;
}
.skin-obsidian::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    120deg, transparent 0%, rgba(120,80,255,0.08) 25%,
    rgba(0,200,255,0.06) 50%, rgba(255,80,120,0.08) 75%, transparent 100%
  );
  pointer-events: none;
}
.skin-obsidian::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,140,255,0.5), rgba(0,200,255,0.5), transparent);
  pointer-events: none;
}

/* ── 14. Tropicana ─────────────────────────────────────────────────────── */
.skin-tropicana {
  background: linear-gradient(135deg, #ffe082 0%, #ff8f00 40%, #e65100 100%);
  color: #3d1200;
  --skin-back: linear-gradient(135deg, #bf5a00 0%, #8a3200 100%);
}
.skin-tropicana::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 90% 90%, rgba(255,255,255,0.2) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 10%, rgba(255,255,200,0.25) 0%, transparent 40%);
  pointer-events: none;
}
.skin-tropicana::after {
  content: '🌴';
  position: absolute;
  font-size: 90px; opacity: 0.08;
  bottom: -14px; right: -8px;
  line-height: 1; pointer-events: none;
}

/* ── 15. Velvet Dusk ───────────────────────────────────────────────────── */
.skin-velvet-dusk {
  background: linear-gradient(150deg, #1a0533 0%, #3b0764 35%, #6d28d9 70%, #db2777 100%);
  color: #f0d9ff;
  --skin-back: linear-gradient(135deg, #0d0220 0%, #2a0550 100%);
}
.skin-velvet-dusk::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,180,255,0.15) 0%, transparent 55%);
  pointer-events: none;
}
.skin-velvet-dusk::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    60deg, transparent, transparent 40px,
    rgba(255,255,255,0.015) 40px, rgba(255,255,255,0.015) 80px
  );
  pointer-events: none;
}

/* ── 16. Sand Dune ─────────────────────────────────────────────────────── */
.skin-sand-dune {
  background: linear-gradient(150deg, #f5e6c8 0%, #d4aa70 45%, #a0784a 100%);
  color: #2b1a08;
  --skin-back: linear-gradient(135deg, #7a5030 0%, #5a3820 100%);
}
.skin-sand-dune::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='none'/%3E%3Cpath d='M0 4L4 0ZM-1 1L1 -1ZM3 5L5 3Z' stroke='rgba(0,0,0,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  pointer-events: none;
}
.skin-sand-dune::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(to top, rgba(160,120,74,0.25) 0%, transparent 100%);
  pointer-events: none;
}

/* ── 17. Carbon Fiber ──────────────────────────────────────────────────── */
.skin-carbon-fiber {
  background: #1c1c1e;
  color: #d0d8e0;
  --skin-back: #111113;
}
.skin-carbon-fiber::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 4px);
  background-size: 8px 8px;
  pointer-events: none;
}
.skin-carbon-fiber::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
}

/* ── 18. Aurora Borealis ───────────────────────────────────────────────── */
.skin-aurora {
  background: #040d14;
  color: #e8fff8;
  --skin-back: #020810;
}
.skin-aurora::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 60% at 20% 60%, rgba(0,255,150,0.25) 0%, transparent 55%),
    radial-gradient(ellipse 100% 50% at 80% 40%, rgba(0,180,255,0.2) 0%, transparent 55%),
    radial-gradient(ellipse 80% 40% at 50% 80%, rgba(120,80,255,0.2) 0%, transparent 55%);
  pointer-events: none;
}
.skin-aurora::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent, transparent 60px,
    rgba(0,255,180,0.03) 60px, rgba(0,255,180,0.03) 120px
  );
  pointer-events: none;
}

/* ── 19. Sakura Ink ────────────────────────────────────────────────────── */
.skin-sakura-ink {
  background: linear-gradient(155deg, #0d1b3e 0%, #1a2f5a 50%, #2d1435 100%);
  color: #fce8f0;
  --skin-back: linear-gradient(135deg, #08102a 0%, #1a0a22 100%);
}
.skin-sakura-ink::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(255,150,180,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.skin-sakura-ink::after {
  content: '桜';
  position: absolute;
  font-size: 110px; opacity: 0.07;
  bottom: -16px; right: 4px;
  line-height: 1; font-family: serif; color: #ffc0d0;
  pointer-events: none;
}

/* ── 20. Copper Patina ─────────────────────────────────────────────────── */
.skin-copper-patina {
  background: linear-gradient(135deg, #7c4a1e 0%, #5a8a6a 40%, #3d7a6a 70%, #2d6a5a 100%);
  color: #fff8e8;
  --skin-back: linear-gradient(135deg, #2d4a3a 0%, #1e3328 100%);
}
.skin-copper-patina::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(100,200,160,0.2) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(180,120,60,0.2) 0%, transparent 40%);
  pointer-events: none;
}
.skin-copper-patina::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.03) 1px, transparent 0);
  background-size: 12px 12px;
  pointer-events: none;
}

/* ── Blue Archive Collab ───────────────────────────────────────────────── */

/* 21. Arona · Guide & Sensei */
.skin-ba-arona {
  background: #06122a;
  color: #ffffff;
  --skin-back: linear-gradient(135deg, #030e20 0%, #071830 100%);
}
.skin-ba-arona::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(112deg,
      transparent 0%, transparent 52%,
      rgba(56,180,255,0.18) 52%, rgba(56,180,255,0.18) 56%,
      transparent 56%
    ),
    linear-gradient(112deg,
      transparent 0%, transparent 57%,
      rgba(255,255,255,0.07) 57%, rgba(255,255,255,0.07) 59%,
      transparent 59%
    ),
    radial-gradient(ellipse at 90% 110%, rgba(56,180,255,0.3) 0%, transparent 45%);
  pointer-events: none;
}
.skin-ba-arona::after {
  content: '';
  position: absolute;
  top: 10px; left: 10px;
  width: 18px; height: 18px;
  border-top: 2px solid rgba(56,180,255,0.8);
  border-left: 2px solid rgba(56,180,255,0.8);
  box-shadow: calc(100% + 120px) calc(100% + 46px) 0 0 rgba(56,180,255,0.6);
  pointer-events: none;
}

/* 22. Shiroko · Desert Eagle */
.skin-ba-shiroko {
  background: #0e1a1f;
  color: #c8f0e8;
  --skin-back: linear-gradient(135deg, #080f12 0%, #0e1a1f 100%);
}
.skin-ba-shiroko::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(-68deg,
      transparent 0px, transparent 14px,
      rgba(0,210,170,0.04) 14px, rgba(0,210,170,0.04) 15px
    ),
    linear-gradient(-68deg,
      transparent 0%, transparent 62%,
      rgba(0,210,170,0.12) 62%, rgba(0,210,170,0.12) 72%,
      rgba(0,210,170,0.05) 72%, rgba(0,210,170,0.05) 78%,
      transparent 78%
    ),
    linear-gradient(160deg, #0e1a1f 0%, #162830 100%);
  pointer-events: none;
}
.skin-ba-shiroko::after {
  content: '';
  position: absolute;
  bottom: 14px; right: 14px;
  width: 16px; height: 16px;
  border-bottom: 2px solid rgba(0,210,170,0.9);
  border-right: 2px solid rgba(0,210,170,0.9);
  pointer-events: none;
}

/* 23. Hoshino · Problem Solver */
.skin-ba-hoshino {
  background: #1a0f18;
  color: #fceaf5;
  --skin-back: linear-gradient(135deg, #110a10 0%, #1a0f18 100%);
}
.skin-ba-hoshino::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(118deg,
      transparent 0%, transparent 48%,
      rgba(220,120,160,0.2) 48%, rgba(220,120,160,0.2) 100%
    ),
    linear-gradient(118deg,
      transparent 0%, transparent 46%,
      rgba(255,200,80,0.22) 46%, rgba(255,200,80,0.22) 48%,
      transparent 48%
    ),
    radial-gradient(ellipse at 100% 0%, rgba(220,100,150,0.2) 0%, transparent 50%);
  pointer-events: none;
}
.skin-ba-hoshino::after {
  content: '';
  position: absolute;
  bottom: 10px; left: 10px;
  width: 16px; height: 16px;
  border-bottom: 2px solid rgba(255,200,80,0.85);
  border-left: 2px solid rgba(255,200,80,0.85);
  pointer-events: none;
}

/* 24. Sensei · Tactical Log */
.skin-ba-sensei {
  background: #010a05;
  color: #00ff88;
  --skin-back: #010a05;
}
.skin-ba-sensei::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 5px,
      rgba(0,255,136,0.04) 5px, rgba(0,255,136,0.04) 6px
    ),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 11px,
      rgba(0,255,136,0.025) 11px, rgba(0,255,136,0.025) 12px
    ),
    linear-gradient(105deg,
      transparent 0%, transparent 70%,
      rgba(0,255,136,0.07) 70%, rgba(0,255,136,0.07) 74%,
      transparent 74%
    );
  pointer-events: none;
}
.skin-ba-sensei::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%, rgba(0,255,136,0.06) 48%,
    rgba(0,255,136,0.12) 50%, rgba(0,255,136,0.06) 52%, transparent 100%
  );
  animation: ba-scan 3s linear infinite;
  pointer-events: none;
}
@keyframes ba-scan {
  from { transform: translateY(-100%); }
  to   { transform: translateY(200%); }
}

/* 25. Plana · The Unforgettable */
.skin-ba-plana {
  background: #04000f;
  color: #ece8ff;
  --skin-back: linear-gradient(135deg, #02000a 0%, #04000f 100%);
}
.skin-ba-plana::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(127deg,
      transparent 0%, transparent 38%,
      rgba(255,255,255,0.55) 38%, rgba(255,255,255,0.55) 39.5%,
      rgba(180,140,255,0.15) 39.5%, rgba(180,140,255,0.15) 48%,
      transparent 48%
    ),
    linear-gradient(122deg,
      transparent 0%, transparent 44%,
      rgba(255,255,255,0.2) 44%, rgba(255,255,255,0.2) 44.8%,
      transparent 44.8%
    ),
    radial-gradient(ellipse at 42% 50%, rgba(120,60,255,0.35) 0%, transparent 55%),
    linear-gradient(160deg, #04000f 0%, #0d0025 100%);
  pointer-events: none;
}
.skin-ba-plana::after {
  content: '';
  position: absolute;
  bottom: 10px; right: 12px;
  width: 16px; height: 16px;
  border-bottom: 2px solid rgba(180,120,255,0.8);
  border-right: 2px solid rgba(180,120,255,0.8);
  box-shadow: -1px -1px 8px rgba(180,120,255,0.3);
  pointer-events: none;
}

/* ── Japanese Aesthetic Skins ──────────────────────────────────────────── */

/* 26. Koi Pond */
.skin-koi-pond {
  background: linear-gradient(160deg, #0a0f1a 0%, #0d1f2d 50%, #0a1520 100%);
  color: #ffeedd;
  --skin-back: linear-gradient(135deg, #060c12 0%, #0a1520 100%);
}
.skin-koi-pond::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 70%, rgba(220,80,40,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 75% 35%, rgba(255,140,60,0.12) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0,80,120,0.3) 0%, transparent 70%);
  pointer-events: none;
}
.skin-koi-pond::after {
  content: '鯉';
  position: absolute;
  font-size: 90px; opacity: 0.06;
  bottom: -10px; right: 8px;
  line-height: 1; font-family: serif; color: #ff6030;
  pointer-events: none;
}

/* 27. Torii Gate */
.skin-torii {
  background: linear-gradient(170deg, #c0392b 0%, #8b1a10 55%, #4a0e08 100%);
  color: #fff8f0;
  --skin-back: linear-gradient(135deg, #3a0a06 0%, #5a1008 100%);
}
.skin-torii::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 110%, rgba(255,220,180,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(255,255,200,0.07) 0%, transparent 45%);
  pointer-events: none;
}
.skin-torii::after {
  content: '鳥居';
  position: absolute;
  font-size: 64px; opacity: 0.08;
  bottom: -6px; right: 10px;
  line-height: 1; font-family: serif; color: #ffe8cc;
  letter-spacing: -4px;
  pointer-events: none;
}

/* 28. Indigo Shibori */
.skin-shibori {
  background: #1a2c5a;
  color: #e8f0ff;
  --skin-back: linear-gradient(135deg, #0e1a38 0%, #1a2c5a 100%);
}
.skin-shibori::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse 30% 50% at 20% 50%, rgba(255,255,255,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 25% 40% at 55% 25%, rgba(255,255,255,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 20% 35% at 80% 70%, rgba(255,255,255,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 15% 25% at 40% 80%, rgba(255,255,255,0.05) 0%, transparent 100%);
  pointer-events: none;
}
.skin-shibori::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 10px 10px;
  pointer-events: none;
}

/* 29. Matcha Ceremony */
.skin-matcha {
  background: linear-gradient(145deg, #2d4a2a 0%, #3d5c34 45%, #4a6e3f 100%);
  color: #f0f8e8;
  --skin-back: linear-gradient(135deg, #1e3018 0%, #2d4a2a 100%);
}
.skin-matcha::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(220,255,180,0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 90%, rgba(100,180,80,0.12) 0%, transparent 50%);
  pointer-events: none;
}
.skin-matcha::after {
  content: '抹茶';
  position: absolute;
  font-size: 70px; opacity: 0.06;
  bottom: -8px; right: 6px;
  line-height: 1; font-family: serif; color: #c8ffb0;
  letter-spacing: -2px;
  pointer-events: none;
}

/* 30. Edo Woodblock */
.skin-edo {
  background: linear-gradient(170deg, #f5efe0 0%, #e8d9be 60%, #d4c09a 100%);
  color: #1a2a4a;
  --skin-back: linear-gradient(135deg, #c8b48a 0%, #a89060 100%);
  --skin-text: #1a2a4a;
}
.skin-edo::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 16px,
      rgba(26,42,74,0.025) 16px, rgba(26,42,74,0.025) 17px
    );
  pointer-events: none;
}
.skin-edo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 55%;
  background:
    radial-gradient(ellipse 120% 40% at 20% 120%, rgba(26,42,74,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 80% 35% at 70% 130%, rgba(26,42,74,0.14) 0%, transparent 50%),
    radial-gradient(ellipse 60% 30% at 45% 140%, rgba(26,42,74,0.1) 0%, transparent 45%);
  pointer-events: none;
}

/* ── Card back skin: apply --skin-back as background ───────────────────── */
/*
  Dashboard's .card-back gets the same skin class as .card-front.
  This rule picks up the --skin-back variable set by the skin block above.
*/
.card-back[class*="skin-"] {
  background: var(--skin-back, linear-gradient(135deg, #3D2010 0%, #5C2D0A 100%));
}
/* Suppress ALL skin ::before/::after on the card back —
   they are front-face decorations and must never cover the magstripe or CVV. */
.card-back[class*="skin-"]::before,
.card-back[class*="skin-"]::after {
  display: none !important;
}

/* Special text overrides for card-back elements on light skins */
.card-back.skin-washi .card-sig-text { color: rgba(0,0,0,0.3); }
.card-back.skin-washi .card-back-logo { color: rgba(44,32,24,0.35); }
.card-back.skin-cherry-blossom .card-back-logo { color: rgba(255,255,255,0.4); }

/* Default card-front pattern (no skin) */
.card-front:not([class*="skin-"])::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.07) 0%, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,0.04) 0%, transparent 40%);
  pointer-events: none;
}

/* ==========================================================================
   Mobile Responsive Framework Styles
   ========================================================================== */

.mobile-header {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

@media (max-width: 1024px) {
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 0 16px;
    background: var(--bark);
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .mobile-menu-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.2s;
  }

  .mobile-menu-btn:hover, .mobile-menu-btn:active {
    background: rgba(255, 255, 255, 0.1);
  }

  .mobile-logo {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .logo-icon-small {
    width: 28px;
    height: 28px;
    background: var(--cinna);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    color: #fff;
    font-weight: 700;
  }

  .logo-text-small {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: #fff;
  }

  .logo-text-small em {
    color: var(--cinna-light);
    font-style: italic;
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.3s ease;
  }

  .sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  .sidebar {
    display: flex !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 101 !important;
    box-shadow: 10px 0 30px rgba(0,0,0,0.25);
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }

  .main, .card-main, .store-main {
    margin-left: 0 !important;
    padding-top: 80px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .app {
    flex-direction: column;
    overflow-x: hidden;
  }
}