:root {
  --rc-brand-dark: #1a2744;
  --rc-brand-sand: #c8b99a;
  --rc-brand-light: #f5f0e8;
  --rc-text-primary: #1a1a1a;
  --rc-text-secondary: #6b7280;
  --rc-bg-primary: #ffffff;
  --rc-bg-secondary: #f3f4f6;
  --rc-border: #d1d5db;
  --rc-border-light: #e5e7eb;
  --rc-radius-md: 8px;
  --rc-radius-lg: 12px;
  --rc-font-mono: 'SF Mono', 'Fira Code', monospace;
}

.rc-page {
  max-width: 420px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.rc-header { margin-bottom: 1rem; }
.rc-header h2 { font-size: 20px; font-weight: 500; color: var(--rc-text-primary); margin: 0 0 3px; }
.rc-header p { font-size: 13px; color: var(--rc-text-secondary); margin: 0; }

.rc-codes-list { display: flex; flex-direction: column; gap: 10px; }

.rc-code-card {
  background: var(--rc-bg-primary);
  border: 0.5px solid var(--rc-border-light);
  border-radius: var(--rc-radius-lg);
  padding: 12px 14px;
  border-left: 3px solid var(--rc-brand-dark);
}
.rc-code-card.rc-expiring { border-left-color: #BA7517; }
.rc-code-card.rc-permanent { border-left-color: #0F6E56; }

.rc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.rc-partner-name { font-size: 16px; font-weight: 600; color: var(--rc-text-primary); }
.rc-partner-desc { font-weight: 400; color: var(--rc-text-secondary); }
.rc-discount-badge {
  font-size: 12px;
  padding: 2px 9px;
  border-radius: var(--rc-radius-md);
  background: #E1F5EE;
  color: #0F6E56;
  font-weight: 500;
  flex-shrink: 0;
}

.rc-card-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rc-code-pill {
  font-family: var(--rc-font-mono);
  font-size: 15px;
  font-weight: 500;
  background: var(--rc-bg-secondary);
  border: 0.5px solid var(--rc-border);
  border-radius: var(--rc-radius-md);
  padding: 7px 10px;
  flex: 1;
  color: var(--rc-text-primary);
  letter-spacing: 0.06em;
}
.rc-copy-btn {
  padding: 7px 13px;
  border-radius: var(--rc-radius-md);
  border: none;
  background: var(--rc-brand-dark);
  cursor: pointer;
  font-size: 13px;
  color: var(--rc-brand-light);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: opacity 0.15s;
  white-space: nowrap;
  font-family: inherit;
}
.rc-copy-btn:hover { opacity: 0.85; }

.rc-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rc-expiry-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--rc-text-secondary);
}
.rc-expiry-row.rc-warning { color: #BA7517; }
.rc-expiry-row.rc-permanent-label { color: #0F6E56; }

.rc-shop-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--rc-radius-md);
  border: 0.5px solid var(--rc-border);
  background: var(--rc-bg-secondary);
  font-size: 12px;
  color: var(--rc-text-secondary);
  text-decoration: none;
  transition: all 0.15s;
}
.rc-shop-btn:hover { border-color: var(--rc-brand-dark); color: var(--rc-brand-dark); }

.rc-loading-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--rc-text-secondary);
}
.rc-loading-state i {
  font-size: 28px;
  display: block;
  margin-bottom: 10px;
  animation: rc-spin 1s linear infinite;
}
@keyframes rc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.rc-multi-codes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.rc-multi-row {
  background: var(--rc-bg-secondary);
  border-radius: var(--rc-radius-md);
  padding: 10px 12px;
}
.rc-multi-row .rc-code-pill {
  background: var(--rc-bg-primary);
}
.rc-multi-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rc-multi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rc-text-secondary);
}
.rc-multi-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rc-border-light);
}

.rc-empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--rc-text-secondary);
}
.rc-empty-state i { font-size: 36px; display: block; margin-bottom: 10px; }