:root {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: #eef2ff;
  --secondary: #06b6d4;
  --success: #10b981;
  --success-light: #ecfdf5;
  --warning: #f59e0b;
  --warning-light: #fffbeb;
  --danger: #ef4444;
  --danger-light: #fef2f2;
  --dark: #0f172a;
  --slate: #334155;
  --muted: #64748b;
  --border: #e2e8f0;
  --bg: #f8fafc;
  --card-bg: #ffffff;
  --radius: 14px;
  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 20px 35px -5px rgba(15, 23, 42, 0.08), 0 10px 15px -7px rgba(15, 23, 42, 0.04);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --dark:#e5e7eb; --slate:#cbd5e1; --muted:#a6b2c3; --border:#334155;
  --bg:#0b1220; --card-bg:#111b2c; --primary-light:#20284b;
  --success-light:#12352d; --warning-light:#3a2b13; --danger-light:#3d2026;
  --shadow:0 10px 25px -5px rgba(0,0,0,.28),0 8px 10px -6px rgba(0,0,0,.2);
  --shadow-lg:0 20px 35px -5px rgba(0,0,0,.4),0 10px 15px -7px rgba(0,0,0,.28);
}
html[data-theme="dark"] body, html[data-theme="dark"] .admin-content-area { background:var(--bg); color:var(--dark); }
html[data-theme="dark"] header.site-header, html[data-theme="dark"] .admin-topbar,
html[data-theme="dark"] .claim-card, html[data-theme="dark"] .table-card,
html[data-theme="dark"] .modal-box, html[data-theme="dark"] .live-chat-panel,
html[data-theme="dark"] .admin-livechat-list-wrap, html[data-theme="dark"] .admin-livechat-conversation-wrap,
html[data-theme="dark"] .admin-livechat-item, html[data-theme="dark"] .form-control,
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
  background-color:var(--card-bg); color:var(--dark); border-color:var(--border);
}
html[data-theme="dark"] .admin-sidebar { background:var(--card-bg); }
html[data-theme="dark"] .admin-header, html[data-theme="dark"] .site-header,
html[data-theme="dark"] .admin-topbar, html[data-theme="dark"] .settings-pills-bar,
html[data-theme="dark"] .table-header, html[data-theme="dark"] .admin-livechat-list-header,
html[data-theme="dark"] .admin-livechat-conversation-header, html[data-theme="dark"] .live-chat-session-info,
html[data-theme="dark"] .live-chat-send { border-color:var(--border); }
html[data-theme="dark"] .data-table th, html[data-theme="dark"] .data-table td,
html[data-theme="dark"] .receipt-table td, html[data-theme="dark"] .receipt-table th { border-color:var(--border); }
html[data-theme="dark"] .data-table th, html[data-theme="dark"] .settings-pill-btn { background:#172338; color:var(--dark); }
html[data-theme="dark"] .live-chat-start p, html[data-theme="dark"] .live-chat-start form label,
html[data-theme="dark"] .live-chat-session-info small, html[data-theme="dark"] .live-chat-empty,
html[data-theme="dark"] .live-chat-message small { color:var(--muted); }
html[data-theme="dark"] .live-chat-message { background:#1e293b; color:var(--dark); }
html[data-theme="dark"] .live-chat-message.is-admin { background:#312e81; color:#eef2ff; }
html[data-theme="dark"] .admin-livechat-item:hover, html[data-theme="dark"] .admin-livechat-item.active { background:#20284b; }
html[data-theme="dark"] .live-chat-message:not(.is-admin) { background:#1e293b; color:var(--dark); }
html[data-theme="dark"] .theme-toggle { color:#fbbf24; }
.livechat-unread-badge { display:inline-flex; min-width:20px; height:20px; align-items:center; justify-content:center; padding:0 6px; border-radius:999px; background:#ef4444; color:#fff; font-size:12px; font-weight:800; line-height:1; }
.livechat-unread-badge[hidden] { display:none!important; }
.livechat-availability-form { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px; margin:16px 0; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.live-chat-widget { z-index:10000; }
.live-chat-panel:not([hidden]) { display:flex!important; }
.live-chat-panel[hidden] { display:none!important; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: var(--bg);
  color: var(--dark);
  line-height: 1.6;
  min-height: 100vh;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* Header & Nav */
header.site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}

.nav-wrapper {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--dark);
}

.logo-badge {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-nav {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-nav-outline {
  color: var(--slate);
  border: 1px solid var(--border);
  background: white;
}
.btn-nav-outline:hover {
  background: var(--bg);
  color: var(--dark);
}

.btn-nav-primary {
  background: var(--primary);
  color: white;
}
.btn-nav-primary:hover {
  background: var(--primary-hover);
}

/* Hero Section */
.hero-box {
  text-align: center;
  padding: 40px 20px 30px;
}

.hero-box h1 {
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--dark);
  margin-bottom: 12px;
}

.hero-box p {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
}

/* Access Claim Form Card */
.claim-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 680px;
  margin: 0 auto 40px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.claim-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate);
  margin-bottom: 8px;
}

.form-label span.step-pill {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.78rem;
  margin-right: 6px;
  font-weight: 700;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  color: var(--dark);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.token-input-wrapper {
  position: relative;
}

.token-input {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.form-hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-submit {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, var(--primary), #4338ca);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
}

.btn-submit:active {
  transform: translateY(1px);
}

/* Alert Boxes */
.alert {
  padding: 16px 18px;
  border-radius: 10px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.92rem;
}

.alert-danger {
  background: var(--danger-light);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #991b1b;
}

.alert-success {
  background: var(--success-light);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #065f46;
}

.alert-warning {
  background: var(--warning-light);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #92400e;
}

/* SUCCESS / CLAIM RESULT AREA */
#resultArea {
  display: none;
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Warranty Status Banner */
.warranty-banner {
  background: linear-gradient(135deg, #1e1b4b, #312e81);
  color: white;
  border-radius: var(--radius);
  padding: 32px 28px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.warranty-banner::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}

.banner-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.product-meta h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.product-meta p {
  color: #c7d2fe;
  font-size: 0.95rem;
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-active {
  background: #10b981;
  color: white;
}

.badge-expired {
  background: #ef4444;
  color: white;
}

/* LIVE COUNTDOWN TIMER */
.countdown-header {
  text-align: center;
  margin-bottom: 16px;
}

.countdown-header span {
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a5b4fc;
  font-weight: 600;
}

.timer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 580px;
  margin: 0 auto 20px;
}

.timer-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 16px 8px;
  text-align: center;
  backdrop-filter: blur(10px);
}

.timer-number {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.timer-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #c7d2fe;
  font-weight: 600;
}

.token-meta-bar {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 16px;
  font-size: 0.86rem;
  color: #e0e7ff;
  flex-wrap: wrap;
  gap: 12px;
}

.token-meta-item strong {
  color: white;
}

/* Section Title */
.section-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-header h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Steps Grid */
.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-bottom: 36px;
}

.step-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
  position: relative;
  transition: transform 0.2s;
}

.step-card:hover {
  transform: translateY(-2px);
}

.step-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.step-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}

.step-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Materials / Guide Cards */
.materials-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.material-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.material-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.material-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
}

.material-text {
  font-size: 0.98rem;
  color: var(--slate);
  white-space: pre-line;
  margin-bottom: 20px;
  line-height: 1.7;
}

.material-media {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.material-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.material-video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  margin-bottom: 20px;
}

.material-video-container iframe,
.material-video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.material-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-action-primary {
  background: var(--primary);
  color: white;
}
.btn-action-primary:hover {
  background: var(--primary-hover);
}

.btn-action-whatsapp {
  background: #25d366;
  color: white;
}
.btn-action-whatsapp:hover {
  background: #20ba5a;
}

/* Support Helpdesk Bar */
.support-card {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.support-info h4 {
  color: #166534;
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.support-info p {
  color: #15803d;
  font-size: 0.88rem;
}

/* ==========================================
   ADMIN PANEL STYLING
   ========================================== */
.admin-header {
  background: #0f172a;
  color: white;
  border-bottom: 1px solid #334155;
}

.admin-header .nav-wrapper {
  max-width: 1200px;
}

.admin-header .logo-brand {
  color: white;
}

.admin-badge {
  background: #f59e0b;
  color: #000;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.admin-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* Admin Tabs */
.tab-nav {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
}

.tab-btn {
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.tab-btn:hover {
  color: var(--dark);
}

.tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}

/* Admin Stats Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.stat-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.stat-title {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
}

/* Admin Table */
.table-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 28px;
}

.table-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

table.data-table th {
  background: #f8fafc;
  padding: 12px 18px;
  font-weight: 600;
  color: var(--slate);
  border-bottom: 1px solid var(--border);
}

table.data-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--slate);
  vertical-align: middle;
}

table.data-table tr:last-child td {
  border-bottom: none;
}

table.data-table tr:hover {
  background: #f8fafc;
}

/* Token pill & 1-click copy */
.token-badge-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--dark);
}

.btn-icon-copy {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  font-size: 0.85rem;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s;
}

.btn-icon-copy:hover {
  background: #e2e8f0;
}

/* Pill status */
.pill-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
}

.pill-pending {
  background: #fef3c7;
  color: #b45309;
}

.pill-active {
  background: #d1fae5;
  color: #065f46;
}

.pill-expired {
  background: #fee2e2;
  color: #b91c1c;
}

/* Action Buttons */
.btn-sm {
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.btn-sm-primary {
  background: var(--primary);
  color: white;
}
.btn-sm-primary:hover {
  background: var(--primary-hover);
}

.btn-sm-success {
  background: #10b981;
  color: white;
}
.btn-sm-success:hover {
  background: #059669;
}

.btn-sm-danger {
  background: #fee2e2;
  color: #b91c1c;
}
.btn-sm-danger:hover {
  background: #ef4444;
  color: white;
}

.btn-sm-outline {
  background: white;
  border: 1px solid var(--border);
  color: var(--slate);
}
.btn-sm-outline:hover {
  background: #f1f5f9;
}

/* Duration Preset Buttons */
.duration-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 8px;
}

.btn-preset {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: white;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  transition: all 0.15s;
}

.btn-preset:hover {
  background: #f1f5f9;
}

.btn-preset.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Modals */
.modal-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.6);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-box {
  background: white;
  border-radius: var(--radius);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--muted);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f172a;
  color: white;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 200;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Footer */
footer.site-footer {
  text-align: center;
  padding: 30px 20px;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  margin-top: 60px;
}

/* Responsive */
@media (max-width: 640px) {
  .hero-box h1 { font-size: 1.8rem; }
  .claim-card { padding: 20px; }
  .timer-grid { grid-template-columns: repeat(2, 1fr); }
  .timer-number { font-size: 1.8rem; }
  .warranty-banner { padding: 20px 16px; }
}

/* Drag & Drop Reordering for Materials */
tr.draggable-row {
  transition: background 0.15s ease, transform 0.15s ease;
}

tr.draggable-row:hover {
  background: #f8fafc;
}

tr.draggable-row.dragging {
  opacity: 0.45;
  background: #e0e7ff !important;
}

tr.draggable-row.drag-over-top {
  border-top: 3px solid var(--primary) !important;
}

tr.draggable-row.drag-over-bottom {
  border-bottom: 3px solid var(--primary) !important;
}

.drag-handle {
  cursor: grab;
  color: #94a3b8;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 4px;
}

.drag-handle:hover {
  color: var(--primary);
  background: #eef2ff;
}

.drag-handle:active {
  cursor: grabbing;
}

.btn-arrow-order {
  background: #f1f5f9;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--slate);
  transition: all 0.15s;
}

.btn-arrow-order:hover:not(:disabled) {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.btn-arrow-order:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Marketplace Order Badge */
.order-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fdf2f8;
  border: 1px solid #fbcfe8;
  color: #be185d;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 4px;
}

/* ==============================================
   MINI TOKO DIGITAL STYLING
   ============================================== */
.store-section {
  margin: 50px 0 30px;
}

.store-header {
  text-align: center;
  margin-bottom: 28px;
}

.store-header h2 {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 8px;
}

.store-header p {
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 600px;
  margin: 0 auto;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.store-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.store-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.store-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

.store-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
  background: #f1f5f9;
}

.store-card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.store-card-category {
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

.store-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 10px;
}

.store-pricing {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.store-price-main {
  font-size: 1.55rem;
  font-weight: 800;
  color: #059669;
}

.store-price-strike {
  font-size: 0.92rem;
  color: var(--muted);
  text-decoration: line-through;
}

.store-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  font-size: 0.88rem;
  color: var(--slate);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.store-features-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-features-list li::before {
  content: "✓";
  color: #10b981;
  font-weight: 800;
  background: #ecfdf5;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.store-actions-stack {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-store-web {
  width: 100%;
  padding: 11px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s;
}

.btn-store-web:hover {
  background: var(--primary-hover);
}

.store-sub-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.btn-store-wa {
  padding: 9px;
  background: #25d366;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s;
}

.btn-store-wa:hover {
  background: #1eb856;
}

.btn-store-tg {
  padding: 9px;
  background: #0088cc;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s;
}

.btn-store-tg:hover {
  background: #0077b5;
}

/* ==============================================
   EXTENSION / PERPANJANG BUTTON & MODAL
   ============================================== */
.btn-extend-warranty {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  margin-top: 10px;
}

.btn-extend-warranty:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.55);
}

/* Radio Package Option Cards */
.package-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.package-option-card {
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  background: #ffffff;
}

.package-option-card:hover {
  border-color: var(--primary);
  background: #f8fafc;
}

.package-option-card.selected {
  border-color: var(--primary);
  background: #eef2ff;
}

.package-badge-tag {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--primary);
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
}

.package-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.package-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: #059669;
}

/* Payment Method Choices */
.payment-methods-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.payment-method-row {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
  background: white;
}

.payment-method-row:hover {
  background: #f8fafc;
}

.payment-method-row.selected {
  border-color: var(--primary);
  background: #f5f3ff;
}

.payment-method-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: #e0e7ff;
  flex-shrink: 0;
}

.qris-display-box {
  text-align: center;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
}

.qris-image {
  max-width: 200px;
  height: auto;
  border-radius: 8px;
  margin: 10px auto;
  display: block;
}

/* Variant Selector in Store & Modals */
.variant-selector-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.variant-card-radio {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.15s;
  background: white;
}

.variant-card-radio:hover {
  border-color: var(--primary);
  background: #f8fafc;
}

.variant-card-radio.selected {
  border-color: var(--primary);
  background: #eef2ff;
}

.variant-card-radio input[type="radio"] {
  accent-color: var(--primary);
  margin-right: 8px;
}

.variant-info-left {
  display: flex;
  align-items: center;
}

.variant-price-tag {
  font-weight: 800;
  color: #059669;
  font-size: 0.95rem;
}

/* Email Type Selector */
.email-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 10px;
}

.email-type-pill {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: white;
  transition: all 0.15s;
}

.email-type-pill:hover {
  background: #f1f5f9;
}

.email-type-pill.selected {
  border-color: var(--primary);
  background: #eef2ff;
  color: var(--primary);
}

.email-type-pill input[type="radio"] {
  accent-color: var(--primary);
}

/* Comprehensive Order Invoice / Receipt Card */
.order-receipt-card {
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  text-align: left;
  padding: 20px;
  margin: 16px 0;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.receipt-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.receipt-title {
  font-weight: 800;
  color: var(--dark);
  font-size: 1.05rem;
}

.receipt-order-id {
  font-family: monospace;
  color: var(--primary);
  font-weight: 700;
}

.receipt-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}

.receipt-table td {
  padding: 5px 0;
  vertical-align: top;
}

.receipt-table td.label-col {
  color: var(--muted);
  width: 38%;
}

.receipt-table td.value-col {
  font-weight: 600;
  color: var(--dark);
  text-align: right;
}

.seller-message-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 0.88rem;
  color: #92400e;
  white-space: pre-line;
  line-height: 1.6;
  text-align: left;
}

.seller-message-box strong {
  display: block;
  margin-bottom: 6px;
  color: #b45309;
}

.token-highlight-box {
  background: #f5f3ff;
  border: 2px dashed #818cf8;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  margin: 16px 0;
}

.token-code-text {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 2px;
  font-family: monospace;
  color: #312e81;
  margin: 4px 0;
}

/* Upload input toggle styling */
.upload-toggle-box {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-top: 6px;
}

.upload-tabs-header {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.btn-upload-tab {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: white;
  cursor: pointer;
}

.btn-upload-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.img-preview-container {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.img-preview-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* ==============================================
   ADMIN SIDEBAR LAYOUT
   ============================================== */
.admin-layout-wrapper {
  display: flex;
  min-height: calc(100vh - 70px);
  max-width: 1380px;
  margin: 0 auto;
}

.admin-sidebar {
  width: 260px;
  background: #ffffff;
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.admin-content-area {
  flex-grow: 1;
  padding: 24px 30px;
  background: var(--bg);
  overflow-x: hidden;
}

.sidebar-nav-btn {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--slate);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s;
}

.sidebar-nav-btn:hover {
  background: #f1f5f9;
  color: var(--dark);
}

.sidebar-nav-btn.active {
  background: var(--primary);
  color: white;
}

.sidebar-badge {
  margin-left: auto;
  background: #ef4444;
  color: white;
  border-radius: 10px;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-weight: 700;
}

/* Sales Recap Cards */
.recap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.recap-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
}

.recap-period {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}

.recap-amount {
  font-size: 1.6rem;
  font-weight: 800;
  color: #059669;
}

.recap-count {
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 4px;
}

/* Product Filter Pills in Material Tab */
.product-pills-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.product-pill-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: white;
  color: var(--slate);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.product-pill-btn:hover {
  border-color: var(--primary);
  background: #f8fafc;
}

.product-pill-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Payment Maintenance State */
.payment-method-row.disabled {
  opacity: 0.6;
  background: #f8fafc;
  cursor: not-allowed;
  border-color: #e2e8f0;
}

.badge-maintenance {
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* Link Produk Button Styling in Receipt */
.btn-product-access {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #10b981;
  color: white;
  padding: 14px 20px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.98rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
  transition: transform 0.15s, background 0.15s;
}

.btn-product-access:hover {
  background: #059669;
  transform: translateY(-1px);
}

/* Responsive Sidebar */
@media (max-width: 900px) {
  .admin-layout-wrapper {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ==============================================
   SETTINGS FILTER PILLS & SUB-TABS
   ============================================== */
.settings-pills-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 12px;
}

.settings-pill-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: white;
  color: var(--slate);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}

.settings-pill-btn:hover {
  background: #f8fafc;
  border-color: var(--primary);
}

.settings-pill-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.settings-subpane {
  display: none;
}

.settings-subpane.active {
  display: block;
}

/* Stock Badges */
.badge-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}

.badge-stock-available {
  background: #ecfdf5;
  color: #065f46;
}

.badge-stock-empty {
  background: #fef2f2;
  color: #991b1b;
}

.btn-store-disabled {
  background: #cbd5e1 !important;
  color: #64748b !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Token Claim Alert Note */
.token-alert-note {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 16px 0 10px;
  font-size: 0.84rem;
  color: #3730a3;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

/* Calendar Date Range Filter Bar */
.calendar-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
}


/* WEB-GARANSI PATCH V2: konsistensi kartu dan ticker transaksi */
.store-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),320px));justify-content:start;align-items:stretch}
.store-card{width:100%;min-width:0;height:100%}
.store-card-img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;flex:0 0 auto}
.transaction-ticker{width:100%;overflow:hidden;white-space:nowrap;border:1px solid var(--border);border-radius:10px;background:var(--surface, #f8fafc);margin:14px 0;padding:10px 0}
.transaction-ticker-track{display:inline-flex;align-items:center;gap:28px;min-width:max-content;animation:wgTickerScroll 32s linear infinite}
.transaction-ticker:hover .transaction-ticker-track{animation-play-state:paused}
.transaction-ticker-item{display:inline-block;font-size:.85rem;color:var(--dark);padding:0 4px}
@keyframes wgTickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .transaction-ticker{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .transaction-ticker-track{animation:none!important;white-space:nowrap!important;flex-wrap:nowrap!important;min-width:max-content!important;width:max-content}
  .transaction-ticker-item{flex:0 0 auto;white-space:nowrap;overflow-wrap:normal}
}
@media(max-width:640px){.store-grid{grid-template-columns:minmax(0,1fr);justify-content:stretch}.store-card-img{aspect-ratio:1/1}}

/* Live customer support chat */
.live-chat-widget{position:fixed;right:20px;bottom:20px;z-index:1200;font-family:inherit}
.live-chat-toggle{display:flex;align-items:center;gap:9px;border:0;border-radius:999px;padding:13px 18px;background:linear-gradient(135deg,#4f46e5,#06b6d4);color:#fff;font-weight:800;box-shadow:0 10px 28px rgba(30,41,59,.25);cursor:pointer}
.live-chat-toggle span{font-size:1.15rem}
.live-chat-panel{position:absolute;right:0;bottom:62px;width:min(370px,calc(100vw - 28px));height:min(550px,calc(100vh - 110px));background:#fff;border:1px solid #dbe3ef;border-radius:16px;box-shadow:0 18px 55px rgba(15,23,42,.25);overflow:hidden;display:flex;flex-direction:column}
.live-chat-panel[hidden]{display:none}
.live-chat-header{background:linear-gradient(135deg,#4f46e5,#06b6d4);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.live-chat-header strong,.live-chat-header small{display:block}.live-chat-header small{font-size:.75rem;opacity:.9;margin-top:3px}
.live-chat-header button{border:0;background:transparent;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.live-chat-start,.live-chat-conversation{padding:14px;display:flex;flex-direction:column;min-height:0;flex:1}
.live-chat-start p{margin:0 0 12px;color:#334155}
.live-chat-choices{display:grid;gap:9px}
.live-chat-choices button,.live-chat-start form button,.live-chat-send button{border:0;border-radius:9px;background:#4f46e5;color:#fff;padding:11px 12px;font-weight:700;cursor:pointer}
.live-chat-choices button:nth-child(2){background:#0e7490}
.live-chat-start form{display:grid;gap:8px}.live-chat-start form label{font-size:.82rem;font-weight:700;color:#334155}
.live-chat-start input,.live-chat-start select,.live-chat-send textarea{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;padding:10px;font:inherit}
.live-chat-status{font-size:.78rem;color:#b45309;margin:8px 0 0;min-height:1em}
.live-chat-session-info{display:flex;justify-content:space-between;gap:10px;padding:0 0 10px;border-bottom:1px solid #e2e8f0;font-size:.82rem}.live-chat-session-info small{text-align:right;color:#64748b}
.live-chat-messages{display:flex;flex-direction:column;gap:9px;overflow-y:auto;flex:1;padding:12px 2px}
.live-chat-message{max-width:86%;padding:9px 11px;border-radius:12px;background:#f1f5f9;color:#1e293b;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.88rem;align-self:flex-start}
.live-chat-message.is-admin{background:#e0e7ff;align-self:flex-end}.live-chat-message small{display:block;font-size:.66rem;color:#64748b;margin-top:5px}
.live-chat-empty{color:#64748b;text-align:center;font-size:.84rem;margin:auto}
.live-chat-send{display:flex;align-items:flex-end;gap:8px;border-top:1px solid #e2e8f0;padding-top:10px}.live-chat-send textarea{resize:vertical;min-height:42px;max-height:110px}.live-chat-send button{min-height:42px}
@media(max-width:480px){.live-chat-widget{right:12px;bottom:12px}.live-chat-toggle{padding:12px 15px}.live-chat-panel{bottom:58px;height:min(540px,calc(100vh - 92px))}}
.admin-livechat-layout{display:grid;grid-template-columns:minmax(220px,310px) minmax(0,1fr);gap:14px;min-height:460px}
.admin-livechat-list-wrap,.admin-livechat-conversation-wrap{border:1px solid var(--border);border-radius:11px;overflow:hidden;display:flex;flex-direction:column;min-height:0;background:#fff}
.admin-livechat-list-header,.admin-livechat-conversation-header{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:10px}
.admin-livechat-list{overflow:auto;max-height:590px}.admin-livechat-item{width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);background:#fff;padding:12px;cursor:pointer;color:var(--dark)}.admin-livechat-item:hover,.admin-livechat-item.active{background:#eef2ff}.admin-livechat-item strong,.admin-livechat-item small{display:block}.admin-livechat-item small{color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-livechat-conversation-header{align-items:flex-start;flex-direction:column}.admin-livechat-conversation-header small{color:var(--muted)}.admin-livechat-messages{display:flex;flex-direction:column;gap:9px;overflow:auto;flex:1;min-height:250px;padding:14px}.admin-livechat-reply{display:flex;gap:8px;align-items:flex-end;padding:12px;border-top:1px solid var(--border)}.admin-livechat-reply textarea{flex:1;min-height:42px;max-height:120px;resize:vertical;border:1px solid var(--border);border-radius:8px;padding:9px;font:inherit}.admin-livechat-messages .live-chat-message.is-admin{align-self:flex-end}
@media(max-width:760px){.admin-livechat-layout{grid-template-columns:1fr;min-height:600px}.admin-livechat-list{max-height:230px}.admin-livechat-reply{flex-wrap:wrap}.admin-livechat-reply textarea{min-width:100%}}
.live-chat-panel [hidden],.admin-livechat-shell [hidden]{display:none!important}

/* Responsive layout pass: compact customer and admin pages on phones */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,video,iframe{max-width:100%}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:900px){
  .container{width:100%;max-width:100%;padding:20px 16px}
  .admin-layout-wrapper{width:100%;max-width:100%;flex-direction:column}
  .admin-sidebar{width:100%;max-width:100%;flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:10px 12px;border-right:0;border-bottom:1px solid var(--border);scrollbar-width:thin}
  .admin-sidebar>.sidebar-nav-btn{width:auto;min-width:max-content;flex:0 0 auto;padding:10px 12px}
  .admin-sidebar>div:last-child{display:flex;align-items:center;flex:0 0 auto;margin:0!important;padding:0!important;border:0!important}
  .admin-sidebar>div:last-child>div{display:none}
  .admin-sidebar>div:last-child .sidebar-nav-btn{width:auto;min-width:max-content;padding:10px 12px}
  .admin-content-area{width:100%;min-width:0;padding:20px 16px}
}

@media(max-width:640px){
  body{font-size:15px;line-height:1.5}
  .container{padding:14px 12px}
  .nav-wrapper{width:100%;padding:10px 12px;gap:8px}
  .logo-brand{min-width:0;gap:7px;font-size:clamp(.86rem,3.6vw,1.05rem);line-height:1.2}
  .logo-brand>span{min-width:0;overflow-wrap:anywhere}
  .logo-badge{width:34px;height:34px;flex:0 0 34px;border-radius:9px}
  .nav-links{min-width:0;gap:6px}
  .btn-nav{padding:7px 9px;font-size:.76rem;white-space:nowrap}
  .hero-box{padding:24px 8px 20px}
  .hero-box h1{font-size:clamp(1.45rem,6vw,1.8rem);line-height:1.2}
  .hero-box p{font-size:.92rem}
  .claim-card{width:100%;max-width:100%;margin-bottom:22px;padding:18px 15px;border-radius:12px}
  .form-group{margin-bottom:18px}
  .form-control{max-width:100%;font-size:16px}
  .warranty-banner{width:100%;padding:18px 14px;margin-bottom:20px;border-radius:12px}
  .banner-top{gap:10px;margin-bottom:18px}
  .product-meta{min-width:0;flex:1 1 100%}
  .product-meta h2{font-size:1.35rem;line-height:1.25;overflow-wrap:anywhere}
  .product-meta p{font-size:.88rem;overflow-wrap:anywhere}
  .badge-status{padding:5px 11px;font-size:.76rem}
  .countdown-header{margin-bottom:12px}
  .countdown-header span{font-size:.76rem;letter-spacing:.6px}
  .timer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:16px}
  .timer-box{min-width:0;padding:12px 6px;border-radius:10px}
  .timer-number{font-size:1.65rem}
  .timer-label{font-size:.68rem;letter-spacing:.6px}
  .token-meta-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;gap:8px;padding-top:12px;font-size:.76rem}
  .token-meta-item{min-width:0;text-align:center;overflow-wrap:anywhere}
  .token-meta-item strong{overflow-wrap:anywhere}
  .btn-extend-warranty{width:100%;min-width:0;padding:12px 10px;font-size:.82rem;line-height:1.35;text-align:center;white-space:normal}
  .transaction-ticker{max-width:100%;overflow:hidden;white-space:nowrap;padding:8px 0}
  .transaction-ticker-track{display:inline-flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:16px;min-width:max-content;animation:wgTickerScroll 32s linear infinite;white-space:nowrap;padding:0}
  .transaction-ticker-item{flex:0 0 auto;max-width:none;font-size:.72rem;line-height:1.4;white-space:nowrap;overflow-wrap:normal}
  .section-header{align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:14px}
  .section-header h3{font-size:1.12rem}
  .material-card{min-width:0;padding:14px}
  .material-header{gap:8px;flex-wrap:wrap}
  .material-header h3{font-size:1.08rem;overflow-wrap:anywhere}
  .material-actions{min-width:0}
  .material-actions>*{max-width:100%;overflow-wrap:anywhere}
  .modal-backdrop{padding:10px;align-items:center}
  .modal-box{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 20px);overflow:auto;border-radius:12px}
  .modal-body{padding:16px!important}
  .receipt-table{table-layout:fixed;width:100%}
  .receipt-table td{overflow-wrap:anywhere;word-break:break-word;padding:8px 6px}
  .admin-content-area{padding:14px 10px}
  .table-card,.claim-card{min-width:0}
  .table-header{gap:10px;flex-wrap:wrap}
  .data-table{min-width:680px}
  .admin-livechat-layout{grid-template-columns:minmax(0,1fr);min-height:0}
  .admin-livechat-list{max-height:210px}
}

/* Phone-only warranty card sizing. Desktop rules above remain unchanged. */
@media(max-width:480px){
  .warranty-banner{width:90%;max-width:390px;margin-left:auto;margin-right:auto;padding:14px 12px!important;border-radius:12px}
  .banner-top{gap:8px;margin-bottom:12px}
  .product-meta h2{font-size:1.08rem}
  .product-meta p{font-size:.78rem;line-height:1.4}
  .timer-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px;margin-bottom:12px}
  .timer-box{padding:8px 2px;border-radius:8px}
  .timer-number{font-size:clamp(.95rem,5vw,1.25rem)!important;line-height:1.15}
  .timer-label{font-size:.56rem;letter-spacing:0}
  .countdown-header{margin-bottom:8px}
  .countdown-header span{font-size:.66rem}
  .token-meta-bar{gap:5px;padding-top:9px;font-size:.67rem}
  .btn-extend-warranty{padding:10px 8px;font-size:.73rem}
}

@media(max-width:380px){
  .container{padding:12px 9px}
  .nav-wrapper{padding:9px}
  .logo-brand{font-size:.82rem}
  .btn-nav{padding:6px 7px;font-size:.7rem}
  .warranty-banner{padding:15px 11px}
  .timer-number{font-size:1.45rem}
  .token-meta-bar{font-size:.7rem}
  .admin-content-area{padding:12px 8px}
}

/* Keep customer support chat above page cards, tickers, and dialogs. */
.live-chat-widget{z-index:10000}
.live-chat-widget[hidden]{display:none!important}
.live-chat-panel:not([hidden]){display:flex!important;visibility:visible;opacity:1}
.live-chat-panel[hidden]{display:none!important}

/* Dark-mode refinements for admin panels with legacy fixed light colors. */
html[data-theme="dark"] .recap-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .product-pill-btn,
html[data-theme="dark"] .btn-sm-outline,
html[data-theme="dark"] .btn-nav-outline,
html[data-theme="dark"] .calendar-filter-bar,
html[data-theme="dark"] .payment-method-row.disabled,
html[data-theme="dark"] .token-badge-copy,
html[data-theme="dark"] .admin-livechat-list-wrap,
html[data-theme="dark"] .admin-livechat-conversation-wrap {
  background-color:#172338!important;
  color:#e2e8f0!important;
  border-color:#3b4b63!important;
}
html[data-theme="dark"] .recap-period,
html[data-theme="dark"] .recap-count,
html[data-theme="dark"] .stat-title,
html[data-theme="dark"] .btn-sm-outline,
html[data-theme="dark"] .btn-nav-outline,
html[data-theme="dark"] .product-pill-btn,
html[data-theme="dark"] .calendar-filter-bar,
html[data-theme="dark"] .calendar-filter-bar label,
html[data-theme="dark"] .table-header,
html[data-theme="dark"] .admin-content-area h1,
html[data-theme="dark"] .admin-content-area h2,
html[data-theme="dark"] .admin-content-area h3,
html[data-theme="dark"] .admin-content-area h4 {
  color:#e2e8f0;
}
html[data-theme="dark"] .btn-sm-outline:hover,
html[data-theme="dark"] .product-pill-btn:hover,
html[data-theme="dark"] .data-table tr:hover { background-color:#22314a!important; }
html[data-theme="dark"] table.data-table th { background:#1b2a40!important; color:#cbd5e1; }
html[data-theme="dark"] table.data-table td { color:#cbd5e1; }
html[data-theme="dark"] .settings-pills-bar { border-bottom-color:#334155; }
html[data-theme="dark"] .admin-sidebar .sidebar-nav-btn:disabled,
html[data-theme="dark"] .admin-sidebar .sidebar-nav-btn[disabled] {
  background:#263449!important; color:#aab7c8!important; opacity:.75;
}
html[data-theme="dark"] .admin-sidebar .sidebar-nav-btn:hover:not(.active) {
  background:#22314a!important; color:#e2e8f0!important;
}
html[data-theme="dark"] input[type="date"] { color-scheme:dark; background-color:#172338!important; color:#e2e8f0!important; border-color:#475569!important; }
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .alert.alert-success { background:#12352d; color:#a7f3d0; border-color:#166534; }
html[data-theme="dark"] .alert-info { background:#172554; color:#bfdbfe; border-color:#1d4ed8; }
html[data-theme="dark"] .admin-livechat-item { background:#111b2c!important; color:#e2e8f0!important; }
html[data-theme="dark"] .admin-livechat-item:hover,
html[data-theme="dark"] .admin-livechat-item.active { background:#263653!important; }
html[data-theme="dark"] #tabDashboard > div:first-child {
  background:#12352d!important; border-color:#166534!important; color:#bbf7d0!important;
}
html[data-theme="dark"] #tabDashboard > div:first-child > span:last-child {
  background:#14532d!important; color:#dcfce7!important;
}
html[data-theme="dark"] #tabProducts > div:first-child {
  background:#1e2a45!important; border-color:#334155!important; color:#c7d2fe!important;
}

/* Modal, extension-payment, product editor, and receipt surfaces. */
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .package-option-card,
html[data-theme="dark"] .payment-method-row,
html[data-theme="dark"] .variant-card-radio,
html[data-theme="dark"] .email-type-pill,
html[data-theme="dark"] .order-receipt-card,
html[data-theme="dark"] .upload-toggle-box,
html[data-theme="dark"] .qris-display-box,
html[data-theme="dark"] .variant-mode-option {
  background:#172338!important;
  color:#e2e8f0!important;
  border-color:#3b4b63!important;
}
html[data-theme="dark"] .package-option-card:hover,
html[data-theme="dark"] .payment-method-row:hover,
html[data-theme="dark"] .variant-card-radio:hover,
html[data-theme="dark"] .email-type-pill:hover { background:#202f49!important; }
html[data-theme="dark"] .package-option-card.selected,
html[data-theme="dark"] .payment-method-row.selected,
html[data-theme="dark"] .variant-card-radio.selected,
html[data-theme="dark"] .email-type-pill.selected { background:#252550!important; border-color:#6366f1!important; color:#eef2ff!important; }
html[data-theme="dark"] .package-title,
html[data-theme="dark"] .variant-card-radio,
html[data-theme="dark"] .email-type-pill,
html[data-theme="dark"] .receipt-title,
html[data-theme="dark"] .receipt-table td.value-col { color:#e2e8f0!important; }
html[data-theme="dark"] .package-price,
html[data-theme="dark"] .variant-price-tag { color:#34d399!important; }
html[data-theme="dark"] .receipt-table td.label-col { color:#a6b2c3!important; }
html[data-theme="dark"] .seller-message-box { background:#332a17!important; border-color:#78541b!important; color:#fde68a!important; }
html[data-theme="dark"] .seller-message-box strong { color:#fbbf24!important; }
html[data-theme="dark"] .token-highlight-box { background:#211d3e!important; border-color:#818cf8!important; }

/* Standalone buyer receipt page */
.receipt-page { min-height:100vh; background:var(--bg); color:var(--dark); }
.receipt-page [hidden] { display:none!important; }
.receipt-shell { width:min(100% - 32px, 920px); margin:0 auto; padding:28px 0 36px; }
.receipt-page-header { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.receipt-brand { display:flex; align-items:center; gap:11px; color:var(--dark); font-size:1.02rem; font-weight:750; text-decoration:none; }
.receipt-brand-mark,.receipt-brand-image { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; object-fit:contain; background:var(--card-bg); border:1px solid var(--border); color:var(--primary); font-size:.85rem; font-weight:900; }
.receipt-back-link { color:var(--primary); text-decoration:none; font-weight:650; font-size:.9rem; }
.receipt-card { background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:clamp(18px,3vw,30px); box-shadow:var(--shadow-lg); }
.receipt-page-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; padding-bottom:20px; border-bottom:1px solid var(--border); }
.receipt-eyebrow { display:block; color:var(--primary); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.receipt-page-heading h1 { margin:7px 0 3px; color:var(--dark); font-size:clamp(1.5rem,4vw,2rem); line-height:1.2; }
.receipt-page-heading p { margin:0; color:var(--muted); font-size:.92rem; }
.receipt-paid-badge,.receipt-inline-status { display:inline-flex; align-items:center; gap:5px; padding:7px 11px; border-radius:999px; background:var(--success-light); color:#059669; font-size:.8rem; font-weight:800; white-space:nowrap; }
.receipt-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 0; }
.receipt-order-copy { display:flex; align-items:center; min-width:0; gap:7px; }
.receipt-order-copy code { max-width:min(62vw,420px); overflow-wrap:anywhere; color:var(--primary); font-size:.9rem; font-weight:700; }
.receipt-icon-button,.receipt-secondary-button,.receipt-primary-button { min-height:42px; display:inline-flex; justify-content:center; align-items:center; gap:8px; border:1px solid var(--border); border-radius:9px; padding:9px 14px; font:inherit; font-size:.88rem; font-weight:700; text-decoration:none; cursor:pointer; }
.receipt-icon-button,.receipt-secondary-button { color:var(--dark); background:var(--card-bg); }
.receipt-icon-button { width:42px; padding:0; font-size:1.2rem; }
.receipt-primary-button { color:#fff; background:#2563eb; border-color:#2563eb; box-shadow:0 5px 14px rgba(37,99,235,.2); }
.receipt-primary-button:hover { background:#1d4ed8; border-color:#1d4ed8; }
.receipt-secondary-button:hover,.receipt-icon-button:hover { border-color:var(--primary); color:var(--primary); }
.receipt-notice { margin:0 0 14px; padding:10px 13px; border:1px solid #34d399; border-radius:9px; background:var(--success-light); color:#047857; font-size:.88rem; }
.receipt-access-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px 22px; margin:2px 0 21px; padding:20px; border:1px solid rgba(37,99,235,.35); border-radius:13px; background:linear-gradient(115deg,rgba(37,99,235,.13),rgba(37,99,235,.035)); }
.receipt-access-panel h2 { margin:6px 0 3px; font-size:1.15rem; }
.receipt-access-panel p { margin:0; color:var(--muted); font-size:.88rem; }
.receipt-access-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.receipt-token-panel { grid-column:1/-1; margin-top:0; }
.receipt-section { margin-top:18px; padding:19px; border:1px solid var(--border); border-radius:13px; }
.receipt-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.receipt-section-heading>div { display:flex; align-items:center; gap:10px; }
.receipt-section-heading>div>span { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:var(--primary); background:var(--primary-light); font-size:.76rem; font-weight:800; }
.receipt-section-heading h2,.receipt-message-panel h2 { margin:0; font-size:1rem; }
.receipt-section-heading>strong { color:var(--muted); font-size:.83rem; font-weight:600; }
.receipt-complete-note { margin-bottom:13px; padding:11px 13px; border-left:3px solid #10b981; border-radius:6px; background:var(--success-light); color:#047857; font-size:.88rem; }
.receipt-details-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 26px; margin:0; }
.receipt-details-grid>div { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.receipt-details-grid>div:nth-last-child(-n+2) { border-bottom:0; }
.receipt-details-grid dt { color:var(--muted); font-size:.87rem; }
.receipt-details-grid dd { margin:0; color:var(--dark); text-align:right; overflow-wrap:anywhere; font-size:.9rem; font-weight:650; }
.payment-details-grid { grid-template-columns:1fr; }
.payment-details-grid>div:nth-last-child(-n+2) { border-bottom:1px solid var(--border); }
.payment-details-grid>div:last-child { border-bottom:0; }
.payment-details-grid .receipt-total-row dd { color:var(--primary); font-size:1.14rem; font-weight:850; }
.receipt-token-panel { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; padding:15px; border:1px dashed rgba(37,99,235,.55); border-radius:11px; background:var(--primary-light); }
.receipt-token-panel strong { display:block; margin-top:5px; color:var(--primary); font:800 1.2rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.06em; overflow-wrap:anywhere; }
.receipt-message-panel { margin-top:16px; padding:16px 18px; border:1px solid var(--border); border-radius:12px; background:rgba(148,163,184,.06); }
.receipt-message-panel p { margin:9px 0 0; color:var(--slate); line-height:1.65; white-space:pre-line; overflow-wrap:anywhere; }
.receipt-warranty-note { border-color:rgba(245,158,11,.35); }
.receipt-warranty-note h2 { color:#b77908; }
.receipt-error { padding:38px 15px 24px; text-align:center; }
.receipt-error-icon { display:grid; place-items:center; width:42px; height:42px; margin:0 auto 12px; border-radius:50%; background:var(--warning-light); color:#b77908; font-size:1.35rem; font-weight:900; }
.receipt-error h2 { margin:0 0 7px; }
.receipt-error p { max-width:520px; margin:0 auto 18px; color:var(--muted); line-height:1.6; }
.receipt-page-footer { padding:18px 8px; color:var(--muted); text-align:center; font-size:.82rem; }
@media(max-width:640px) {
  .receipt-shell { width:min(100% - 20px, 920px); padding:12px 0 22px; }
  .receipt-page-header { margin-bottom:12px; }
  .receipt-brand { font-size:.9rem; }
  .receipt-brand-mark,.receipt-brand-image { width:36px; height:36px; }
  .receipt-back-link { font-size:.82rem; }
  .receipt-card { padding:16px 13px; border-radius:14px; }
  .receipt-page-heading { align-items:flex-start; }
  .receipt-paid-badge { padding:6px 8px; font-size:.7rem; }
  .receipt-toolbar { flex-wrap:wrap; }
  .receipt-order-copy { flex:1; }
  .receipt-order-copy code { max-width:calc(100vw - 125px); font-size:.78rem; }
  .receipt-secondary-button,.receipt-primary-button { min-height:42px; padding:9px 11px; font-size:.82rem; }
  .receipt-access-panel { display:grid; grid-template-columns:1fr; padding:16px 14px; }
  .receipt-access-actions { display:grid; grid-template-columns:1fr; margin-top:14px; }
  .receipt-access-actions .receipt-primary-button { width:100%; }
  .receipt-section { padding:14px 12px; }
  .receipt-details-grid { grid-template-columns:1fr; }
  .receipt-details-grid>div,.receipt-details-grid>div:nth-last-child(-n+2) { border-bottom:1px solid var(--border); }
  .receipt-details-grid>div:last-child { border-bottom:0; }
  .receipt-details-grid dt,.receipt-details-grid dd { font-size:.82rem; }
  .receipt-token-panel { align-items:flex-start; flex-direction:column; }
  .receipt-token-panel .receipt-secondary-button { width:100%; }
}
@media print {
  html[data-theme="dark"] { color-scheme:light; --dark:#0f172a; --slate:#334155; --muted:#64748b; --border:#e2e8f0; --bg:#fff; --card-bg:#fff; --primary-light:#eff6ff; }
  .receipt-page { background:#fff!important; color:#0f172a!important; }
  .receipt-shell { width:100%; max-width:none; padding:0; }
  .receipt-page-header,.receipt-toolbar,.receipt-page-footer,.receipt-token-panel button { display:none!important; }
  .receipt-card { padding:0; border:0; box-shadow:none; }
  .receipt-section,.receipt-message-panel,.receipt-access-panel { break-inside:avoid; }
  .receipt-access-actions a { color:#1d4ed8!important; background:#fff!important; box-shadow:none!important; }
}

/* Give the admin workspace the full desktop width; keep the sidebar flush left. */
@media(min-width:901px) {
  #dashboardScreen { width:100%; }
  .admin-layout-wrapper { width:100%; max-width:none; margin:0; }
  .admin-sidebar { width:280px; border-radius:0; }
  .admin-content-area { min-width:0; flex:1 1 auto; padding-inline:clamp(18px,2.2vw,42px); }
}
html[data-theme="dark"] .token-code-text { color:#c7d2fe!important; }
html[data-theme="dark"] .btn-preset { background:#172338!important; color:#cbd5e1!important; border-color:#3b4b63!important; }
html[data-theme="dark"] .btn-preset:hover { background:#22314a!important; }
html[data-theme="dark"] .btn-preset.active { background:var(--primary)!important; color:#fff!important; border-color:var(--primary)!important; }
html[data-theme="dark"] .payment-method-icon { background:#252d55!important; color:#e0e7ff!important; }
html[data-theme="dark"] .payment-method-row.disabled { background:#172338!important; color:#a6b2c3!important; opacity:.85; }
html[data-theme="dark"] .payment-method-row.disabled * { color:#a6b2c3!important; }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color:#334155!important; }

/* Recolor legacy inline light panels used throughout the admin forms/modals. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#eef2ff"],
html[data-theme="dark"] [style*="background: #eef2ff"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#f0fdf4"],
html[data-theme="dark"] [style*="background: #f0fdf4"],
html[data-theme="dark"] [style*="background:#ecfdf5"],
html[data-theme="dark"] [style*="background: #ecfdf5"],
html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background: #fffbeb"],
html[data-theme="dark"] [style*="background:#fef2f2"],
html[data-theme="dark"] [style*="background: #fef2f2"],
html[data-theme="dark"] [style*="background:#f5f3ff"],
html[data-theme="dark"] [style*="background: #f5f3ff"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background: #eff6ff"] {
  background-color:#172338!important;
  border-color:#3b4b63!important;
  color:#e2e8f0!important;
}
html[data-theme="dark"] [style*="color:#3730a3"],
html[data-theme="dark"] [style*="color: #3730a3"],
html[data-theme="dark"] [style*="color:#334155"],
html[data-theme="dark"] [style*="color: #334155"],
html[data-theme="dark"] [style*="color:#475569"],
html[data-theme="dark"] [style*="color: #475569"] { color:#cbd5e1!important; }
html[data-theme="dark"] [style*="color:#065f46"],
html[data-theme="dark"] [style*="color: #065f46"],
html[data-theme="dark"] [style*="color:#166534"],
html[data-theme="dark"] [style*="color: #166534"],
html[data-theme="dark"] [style*="color:#059669"],
html[data-theme="dark"] [style*="color: #059669"],
html[data-theme="dark"] [style*="color:#047857"],
html[data-theme="dark"] [style*="color: #047857"] { color:#a7f3d0!important; }
html[data-theme="dark"] [style*="color:#92400e"],
html[data-theme="dark"] [style*="color: #92400e"],
html[data-theme="dark"] [style*="color:#b45309"],
html[data-theme="dark"] [style*="color: #b45309"] { color:#fcd34d!important; }
html[data-theme="dark"] [style*="color:#4338ca"],
html[data-theme="dark"] [style*="color: #4338ca"],
html[data-theme="dark"] [style*="color:#312e81"],
html[data-theme="dark"] [style*="color: #312e81"] { color:#c7d2fe!important; }
html[data-theme="dark"] textarea[style*="#fffbeb"] { background:#332a17!important; border-color:#78541b!important; color:#fde68a!important; }
html[data-theme="dark"] textarea[style*="#eef2ff"] { background:#252550!important; border-color:#4f46e5!important; color:#e0e7ff!important; }

/* Buyer-facing guide cards and ticker in dark theme. */
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .material-card {
  background:#111b2c!important;
  border-color:#334155!important;
  color:#e2e8f0!important;
  box-shadow:0 10px 25px -8px rgba(0,0,0,.4);
}
html[data-theme="dark"] .store-card {
  background:#111b2c!important;
  border-color:#334155!important;
}
html[data-theme="dark"] .store-card-body { background:#111b2c!important; }
html[data-theme="dark"] .store-card-title { color:#f1f5f9!important; }
html[data-theme="dark"] .store-features-list { color:#cbd5e1!important; }
html[data-theme="dark"] .store-price-strike { color:#94a3b8!important; }
html[data-theme="dark"] .badge-stock-available { background:#12352d!important; color:#a7f3d0!important; }
html[data-theme="dark"] .badge-stock-empty { background:#3d2026!important; color:#fecaca!important; }
html[data-theme="dark"] .step-card h4,
html[data-theme="dark"] .material-title { color:#f1f5f9!important; }
html[data-theme="dark"] .step-card p,
html[data-theme="dark"] .material-text { color:#cbd5e1!important; }
html[data-theme="dark"] .step-badge,
html[data-theme="dark"] .material-header .badge,
html[data-theme="dark"] .material-header small {
  background:#252d55; color:#c7d2fe;
}
html[data-theme="dark"] .transaction-ticker {
  background:#172338!important;
  border-color:#334155!important;
}
html[data-theme="dark"] .transaction-ticker-item { color:#e2e8f0!important; }

/* Slow the ticker for easier reading, on desktop and mobile. */
.transaction-ticker-track { animation-duration:60s!important; }

/* Keep the ticker directly attached to the navigation bar. */
.ticker-header-slot { max-width:1120px; margin:0 auto; padding:0 20px; }
.site-header .ticker-header-slot .transaction-ticker {
  max-width:1080px; margin:0 auto; padding:6px 0 8px;
  border:0; border-top:1px solid var(--border); border-radius:0;
  background:transparent;
}
body.warranty-page-mode .hero-box,
body.warranty-page-mode #miniStoreSection { display:none!important; }
body.warranty-page-mode #landingView #claimFormCard { margin-top:24px; }

/* Payment Gateway settings: override inline light panels and labels in dark mode. */
html[data-theme="dark"] #subtabPayment [style*="background:#"],
html[data-theme="dark"] #subtabPayment [style*="background: #"] {
  background-color:#172338!important;
  border-color:#3b4b63!important;
  color:#e2e8f0!important;
}
html[data-theme="dark"] #subtabPayment #blockAulaaGateway,
html[data-theme="dark"] #subtabPayment #blockCustomGateway,
html[data-theme="dark"] #subtabPayment .upload-toggle-box {
  background:#172338!important;
  border-color:#3b4b63!important;
  color:#e2e8f0!important;
}
html[data-theme="dark"] #subtabPayment label,
html[data-theme="dark"] #subtabPayment p,
html[data-theme="dark"] #subtabPayment small,
html[data-theme="dark"] #subtabPayment h4,
html[data-theme="dark"] #subtabPayment h5,
html[data-theme="dark"] #subtabPayment span,
html[data-theme="dark"] #subtabPayment div {
  color:#cbd5e1!important;
}
html[data-theme="dark"] #subtabPayment .form-control {
  background-color:#111b2c!important;
  border-color:#3b4b63!important;
  color:#f1f5f9!important;
}
html[data-theme="dark"] #subtabPayment .form-control::placeholder { color:#94a3b8!important; }
html[data-theme="dark"] #subtabPayment select option { background:#111b2c; color:#f1f5f9; }
html[data-theme="dark"] #subtabPayment input[type="file"]::file-selector-button {
  background:#26344a; color:#e2e8f0; border:1px solid #475569; border-radius:5px;
}
html[data-theme="dark"] #subtabPayment [style*="color:#065f46"] { color:#a7f3d0!important; }

/* Product admin table and variant editor have inline light backgrounds. */
html[data-theme="dark"] #productTableBody > tr,
html[data-theme="dark"] #productTableBody > tr:nth-child(odd),
html[data-theme="dark"] #productTableBody > tr:nth-child(even),
html[data-theme="dark"] #productTableBody > tr > td {
  background:#172338!important;
  color:#e2e8f0!important;
  border-color:#334155!important;
}
html[data-theme="dark"] #productTableBody > tr:hover > td { background:#22314a!important; }
html[data-theme="dark"] #productTableBody strong,
html[data-theme="dark"] #productTableBody small { color:#e2e8f0!important; }
html[data-theme="dark"] #productTableBody span[style*="background:#e0e7ff"] {
  background:#252d55!important; color:#c7d2fe!important;
}
html[data-theme="dark"] .product-variant-row {
  background:#172338!important;
  border-color:#3b4b63!important;
  color:#e2e8f0!important;
  box-shadow:0 2px 7px rgba(0,0,0,.2)!important;
}
html[data-theme="dark"] .product-variant-row [style*="background:#f8fafc"],
html[data-theme="dark"] .product-variant-row [style*="background:#fff"],
html[data-theme="dark"] .product-variant-row [style*="background:#fff7ed"] {
  background:#111b2c!important;
  border-color:#3b4b63!important;
  color:#cbd5e1!important;
}
html[data-theme="dark"] .product-variant-row strong[style*="color:#0f172a"] { color:#f1f5f9!important; }
html[data-theme="dark"] .product-variant-row [style*="color:#0f172a"] { color:#cbd5e1!important; }
html[data-theme="dark"] .product-variant-row .form-label,
html[data-theme="dark"] .product-variant-row label { color:#cbd5e1!important; }
html[data-theme="dark"] .product-variant-row .form-control {
  background:#111b2c!important; border-color:#3b4b63!important; color:#f1f5f9!important;
}
html[data-theme="dark"] .product-variant-row .form-control::placeholder { color:#94a3b8!important; }
html[data-theme="dark"] .product-variant-row .variant-mode-option {
  background:#1e2a40!important; border-color:#475569!important; color:#e2e8f0!important;
}

/* Table pagination and a fixed horizontal-scroll dock for the token list. */
.admin-table-pagination {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 14px; border:1px solid var(--border); border-top:0;
  border-radius:0 0 10px 10px; background:var(--card-bg); color:var(--slate); font-size:.84rem;
}
.admin-page-size { display:inline-flex; align-items:center; gap:7px; }
.admin-page-size select {
  min-width:74px; padding:6px 9px; border:1px solid var(--border); border-radius:7px;
  background:var(--card-bg); color:var(--dark); font:inherit;
}
.admin-page-summary { margin-right:auto; }
.admin-page-buttons { display:flex; align-items:center; gap:4px; }
.admin-page-buttons button {
  min-width:34px; height:34px; padding:0 8px; border:1px solid var(--border); border-radius:7px;
  background:var(--card-bg); color:var(--dark); cursor:pointer; font:inherit;
}
.admin-page-buttons button:hover:not(:disabled) { border-color:var(--primary); color:var(--primary); }
.admin-page-buttons button.active { background:var(--primary); border-color:var(--primary); color:#fff; }
.admin-page-buttons button:disabled { opacity:.45; cursor:not-allowed; }
.admin-page-ellipsis { padding:0 3px; }
.token-horizontal-scroll-dock {
  position:fixed; z-index:1100; bottom:0; height:18px; overflow-x:auto; overflow-y:hidden;
  display:none; background:var(--card-bg); border:1px solid var(--border); border-bottom:0;
  border-radius:8px 8px 0 0; box-shadow:0 -3px 12px rgba(15,23,42,.18); scrollbar-width:auto;
  overscroll-behavior-x:contain;
}
.token-horizontal-scroll-dock > div { height:1px; }
html[data-theme="dark"] .admin-table-pagination,
html[data-theme="dark"] .admin-page-size select,
html[data-theme="dark"] .admin-page-buttons button,
html[data-theme="dark"] .token-horizontal-scroll-dock {
  background:#111b2c; border-color:#3b4b63; color:#e2e8f0;
}
html[data-theme="dark"] .admin-page-buttons button.active { background:var(--primary); border-color:var(--primary); color:#fff; }
@media(max-width:640px){
  .admin-table-pagination { justify-content:center; }
  .admin-page-summary { margin:0; }
  .admin-page-buttons { flex-wrap:wrap; justify-content:center; }
  .token-horizontal-scroll-dock { height:20px; }
}

@media(max-width:640px){
  .nav-wrapper{flex-wrap:wrap}
  .nav-wrapper>.logo-brand{flex:1 1 100%}
  .nav-wrapper>.nav-links{width:100%;justify-content:flex-end}
  .ticker-header-slot { padding:0 12px; }
  .site-header .ticker-header-slot .transaction-ticker { padding:5px 0 6px; }
}

/* Recent purchase toast, styled like a compact desktop notification. */
.recent-sale-toast {
  position:fixed; z-index:1100; left:20px; bottom:20px; width:min(320px, calc(100vw - 28px));
  display:grid; grid-template-columns:34px minmax(0,1fr) 18px; align-items:center; gap:9px;
  padding:10px 9px 10px 10px; border:1px solid #e2e8f0; border-top:3px solid #1997ff;
  border-radius:13px; background:#fff; color:#172033; box-shadow:0 10px 32px rgba(15,23,42,.2);
  opacity:0; transform:translateY(10px); transition:opacity .24s ease, transform .24s ease;
}
.recent-sale-toast[hidden] { display:none; }
.recent-sale-toast.is-visible { opacity:1; transform:translateY(0); }
.recent-sale-icon {
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  color:#168ce0; background:#e4f5ff; border:1px solid #b9e5ff; font-size:17px;
  overflow:hidden;
}
.recent-sale-icon img { width:100%; height:100%; object-fit:cover; }
.recent-sale-content { min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.25; }
.recent-sale-name { overflow:hidden; color:#172033; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
.recent-sale-product { display:-webkit-box; overflow:hidden; color:#334155; font-size:.74rem; line-height:1.3; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.recent-sale-meta { color:#64748b; font-size:.68rem; }
.recent-sale-close { align-self:start; padding:0; border:0; background:transparent; color:#475569; cursor:pointer; font-size:18px; line-height:1; }
html[data-theme="dark"] .recent-sale-toast { background:#172338; color:#e2e8f0; border-color:#334155; border-top-color:#38bdf8; }
html[data-theme="dark"] .recent-sale-name { color:#f8fafc; }
html[data-theme="dark"] .recent-sale-product { color:#cbd5e1; }
html[data-theme="dark"] .recent-sale-meta,
html[data-theme="dark"] .recent-sale-close { color:#94a3b8; }
html[data-theme="dark"] .recent-sale-icon { color:#7dd3fc; background:#102a43; border-color:#1e4968; }
/* Admin settings: dynamically-created instruction cards include inline light backgrounds. */
html[data-theme="dark"] #settingsClaimStepsContainer .settings-claim-step-row {
  background:#111b2c!important;
  border-color:#334155!important;
  color:#e2e8f0!important;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
html[data-theme="dark"] #settingsClaimStepsContainer .settings-claim-step-row .settings-step-title,
html[data-theme="dark"] #settingsClaimStepsContainer .settings-claim-step-row .settings-step-desc {
  background:#0b1220!important;
  border-color:#475569!important;
  color:#f1f5f9!important;
}
html[data-theme="dark"] #settingsClaimStepsContainer .settings-claim-step-row .settings-step-title::placeholder,
html[data-theme="dark"] #settingsClaimStepsContainer .settings-claim-step-row .settings-step-desc::placeholder { color:#94a3b8!important; }
@media(max-width:640px) {
  .recent-sale-toast { left:12px; bottom:calc(76px + env(safe-area-inset-bottom, 0px)); width:min(300px, calc(100vw - 24px)); }
}
@media(prefers-reduced-motion: reduce) {
  .recent-sale-toast { transition:none; transform:none; }
}

/* Storefront refresh: clean editorial home and compact marketplace catalog */
:root { --primary:#2563eb; --primary-dark:#1d4ed8; --primary-light:#eff6ff; --accent:#60a5fa; --surface:#fff; --bg:#f6f7f9; --text:#222b36; --muted:#75808d; --border:#e6e9ee; }
html[data-theme="dark"] { --primary:#60a5fa; --primary-dark:#3b82f6; --primary-light:#172b49; --accent:#93c5fd; }
.site-header { background:rgba(255,255,255,.94); border-bottom:1px solid #eceef1; box-shadow:0 5px 24px rgba(20,30,45,.045); backdrop-filter:blur(16px); }
html[data-theme="dark"] .site-header { background:rgba(15,23,42,.94); border-color:#263347; }
.site-header .nav-wrapper { max-width:1280px; }
.site-header .logo-brand { font-weight:850; letter-spacing:-.025em; }
.site-header .btn-nav-primary,.btn-submit { background:linear-gradient(135deg,#3b82f6,#1d4ed8); box-shadow:0 8px 18px rgba(37,99,235,.2); }
.site-header .btn-nav-outline { border-color:#e5e7eb; }
.storefront-home,.storefront-store { max-width:1280px; margin:22px auto 64px; }
.home-hero { position:relative; isolation:isolate; min-height:430px; overflow:hidden; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; padding:54px clamp(24px,6vw,80px); border-radius:28px; color:#fff; background:linear-gradient(112deg,rgba(22,36,66,.97),rgba(30,64,112,.88)),var(--home-hero-image,linear-gradient(135deg,#1e3a8a,#2563eb)); background-position:center; background-size:cover; box-shadow:0 24px 55px rgba(58,44,64,.17); }
.home-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 75% 40%,rgba(96,165,250,.3),transparent 44%),linear-gradient(90deg,rgba(15,23,42,.38),transparent 72%); }
.home-hero-content { max-width:610px; position:relative; z-index:1; }
.home-eyebrow,.store-page-heading>div>span,.admin-email-heading>div>span { display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:850; letter-spacing:.14em; color:#bfdbfe; }
.home-hero h1 { margin:18px 0 14px; color:white; font-size:clamp(2.5rem,5vw,4.5rem); letter-spacing:-.055em; line-height:1.02; }
.home-hero h1 em { color:#93c5fd; font-style:normal; }
.home-hero-content>p { max-width:470px; color:rgba(255,255,255,.77); font-size:1.05rem; line-height:1.7; }
.home-hero-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:28px; }
.home-primary-action,.home-secondary-action { min-height:48px; display:inline-flex; align-items:center; gap:18px; padding:0 20px; border-radius:12px; font-weight:800; text-decoration:none; transition:transform .2s,background .2s; }
.home-primary-action { color:#102a56; background:#bfdbfe; }.home-primary-action:hover,.home-secondary-action:hover { transform:translateY(-2px); }
.home-secondary-action { color:white; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.28); }
.home-trust-row { display:flex; gap:18px; flex-wrap:wrap; margin-top:28px; color:rgba(255,255,255,.75); font-size:.8rem; }
.home-hero-art { position:relative; min-height:290px; display:grid; place-items:center; }
.hero-orbit { position:absolute; width:285px; height:285px; border:1px solid rgba(255,255,255,.2); border-radius:50%; }.orbit-two { width:355px;height:355px;border-color:rgba(255,255,255,.11); }
.hero-product-card { position:relative; width:205px; min-height:250px; padding:22px; display:flex; flex-direction:column; justify-content:space-between; transform:rotate(5deg); border:1px solid rgba(255,255,255,.48); border-radius:20px; color:#fff; background:linear-gradient(145deg,rgba(255,255,255,.29),rgba(255,255,255,.09)); box-shadow:0 30px 60px rgba(20,15,30,.28); backdrop-filter:blur(12px); }
.hero-product-card span { font-size:.65rem; letter-spacing:.12em; font-weight:800; color:#bfdbfe; }.hero-product-card strong { font-size:1.8rem; line-height:1.05; letter-spacing:-.04em; }.hero-product-card i { position:absolute; right:16px; bottom:14px; font-size:2rem; color:#bfdbfe; }
.hero-floating-tag { position:absolute; right:5%; bottom:14%; padding:11px 15px; border-radius:12px; color:#1e3a8a; background:white; font-size:.82rem; font-weight:800; box-shadow:0 12px 30px rgba(10,10,20,.2); }
.home-section-title { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:42px 2px 18px; }.home-section-title>div>span { color:var(--primary); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }.home-section-title h2 { margin:6px 0 0; font-size:1.75rem; letter-spacing:-.04em; }.home-section-title>a { color:var(--primary); font-weight:750; text-decoration:none; }
.home-help-strip { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:28px; padding:20px 24px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }.home-help-strip>div { display:flex; align-items:center; gap:14px; }.home-help-icon { width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:var(--primary-light);font-size:1.35rem; }.home-help-strip strong,.home-help-strip small { display:block; }.home-help-strip small { margin-top:4px;color:var(--muted); }.home-help-strip>a { color:var(--primary);font-weight:800;text-decoration:none;white-space:nowrap; }
.store-page-heading { display:flex; justify-content:space-between; align-items:end; gap:18px; margin:34px 0 26px; }.store-page-heading>div>span { color:var(--primary); }.store-page-heading h1 { margin:9px 0 5px;font-size:clamp(1.8rem,3.3vw,2.8rem);letter-spacing:-.05em; }.store-page-heading p { margin:0;color:var(--muted); }.store-warranty-link { padding:10px 14px; border:1px solid var(--border);border-radius:11px;color:var(--text);background:var(--surface);font-weight:750;text-decoration:none;white-space:nowrap; }
.store-toolbar { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:14px; border:1px solid var(--border);border-radius:16px;background:var(--surface); }.store-search { flex:1 1 300px;display:flex;align-items:center;gap:10px;min-height:46px;padding:0 13px;border:1px solid var(--border);border-radius:11px;background:var(--bg); }.store-search>span {font-size:1.55rem;color:var(--muted)}.store-search input { flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit; }.store-search kbd { color:var(--muted);font-size:.8rem; }.store-categories { display:flex; gap:8px; flex-wrap:wrap; }.store-category-chip { padding:9px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font:inherit;font-size:.84rem;font-weight:750;cursor:pointer; }.store-category-chip.active { color:white;border-color:var(--primary);background:var(--primary); }.store-result-count { margin:18px 2px 12px;color:var(--muted);font-size:.84rem; }
.storefront-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }.storefront-grid .store-card { overflow:hidden;position:relative;display:flex;flex-direction:column;border:1px solid #e9ebee;border-radius:15px;background:var(--surface);box-shadow:0 3px 12px rgba(20,30,45,.045);transition:transform .2s,box-shadow .2s,border-color .2s; }.storefront-grid .store-card:hover { transform:translateY(-4px);border-color:#f1a18d;box-shadow:0 14px 34px rgba(40,34,45,.1); }.storefront-grid .store-card-img { width:100%;height:auto;aspect-ratio:1.16/1;object-fit:cover;background:#f1f3f5; }.storefront-grid .store-card-body { flex:1;display:flex;flex-direction:column;gap:9px;padding:13px; }.storefront-grid .store-card-category { color:var(--muted);font-size:.7rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em; }.storefront-grid .store-card-body>div:first-child { align-items:flex-start!important; }.storefront-grid .store-card-body>div:first-child>div:last-child { gap:4px!important; }.storefront-grid .badge-stock { padding:3px 6px;font-size:.62rem; }.storefront-grid .store-card-title { display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:.94rem;line-height:1.4;letter-spacing:-.015em; }.storefront-grid .store-pricing { margin:0; }.storefront-grid .store-price-main { color:var(--primary);font-size:1.03rem;font-weight:850; }.storefront-grid .store-price-strike { font-size:.72rem; }.storefront-grid .store-features-list { display:none; }.storefront-grid .store-actions-stack { margin-top:auto; }.storefront-grid .btn-store-web { width:100%;min-height:39px;border-radius:9px;background:var(--primary);font-size:.81rem; }.storefront-grid .store-sub-actions { display:none; }.storefront-grid .store-card-badge { top:9px;left:9px;padding:5px 8px;border-radius:7px;font-size:.66rem; }
.admin-sidebar { border-radius:16px; }.admin-content-area>.tab-pane>.claim-card,.admin-content-area>.tab-pane>.table-card { border-radius:16px;box-shadow:0 5px 22px rgba(20,30,45,.05); }.sidebar-nav-btn { border-radius:10px;transition:background .18s,transform .18s; }.sidebar-nav-btn:hover { transform:translateX(2px); }
.admin-email-heading,.admin-email-subheading { display:flex;justify-content:space-between;align-items:center;gap:16px; }.admin-email-heading h2 { margin:7px 0;font-size:1.6rem; }.admin-email-heading>div>span { color:var(--primary); }.admin-email-heading p,.admin-email-subheading p,.admin-send-product-email>div:first-child p { margin:0;color:var(--muted);font-size:.88rem; }.admin-email-lock { padding:8px 11px;border-radius:999px;background:#edfdf5;color:#047857;font-size:.75rem;font-weight:800;white-space:nowrap; }.admin-email-grid { display:grid;grid-template-columns:1.05fr .95fr;gap:20px;margin-top:24px; }.email-html-editor { min-height:290px;resize:vertical;font-family:Consolas,monospace;font-size:.82rem;line-height:1.5; }.admin-email-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }.admin-email-preview-area { min-width:0; }.admin-email-preview-area h3,.admin-email-subheading h3,.admin-send-product-email h3 { margin:0 0 7px; }.admin-email-preview-area iframe { width:100%;height:430px;border:1px solid var(--border);border-radius:12px;background:white; }.admin-email-saved { margin-top:26px;padding-top:20px;border-top:1px solid var(--border); }.email-template-list { display:grid;gap:8px;margin-top:14px; }.email-template-row { display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:11px; }.email-template-row>div:first-child { min-width:0; }.email-template-row strong,.email-template-row small { display:block;overflow-wrap:anywhere; }.email-template-row small { margin-top:3px;color:var(--muted); }.email-template-row>div:last-child { display:flex;gap:6px;flex-wrap:wrap; }.admin-send-product-email { margin-top:24px;padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--bg); }.admin-send-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin-top:12px; }.admin-send-product-email .admin-email-actions { margin-top:3px; }.home-background-upload { display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px; }.home-background-upload input { max-width:360px; }
#modalEditWarrantyToken .modal-box { overflow:hidden;border-radius:18px; }.email-template-row .btn-sm { min-height:34px; }
@media(max-width:1000px) { .storefront-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.home-hero { min-height:380px; }.home-hero-art { transform:scale(.85); } }
@media(max-width:720px) { .storefront-home,.storefront-store { margin:12px auto 36px; }.home-hero { grid-template-columns:1fr;min-height:445px;padding:32px 24px;border-radius:20px; }.home-hero-art { position:absolute;right:-50px;bottom:-110px;min-height:280px;opacity:.62;transform:scale(.72); }.home-hero-content { align-self:start; }.home-trust-row { gap:9px 14px;font-size:.7rem; }.home-section-title { margin-top:30px; }.home-section-title h2 { font-size:1.45rem; }.home-help-strip { align-items:flex-start;padding:16px; }.home-help-strip>div { align-items:flex-start; }.home-help-strip>a { align-self:center; }.store-page-heading { align-items:flex-start;flex-direction:column;margin:25px 0 18px; }.store-page-heading h1 { font-size:1.85rem; }.store-toolbar { padding:10px; }.store-categories { width:100%;overflow-x:auto;flex-wrap:nowrap;padding:1px 0 4px; }.store-category-chip { flex:0 0 auto; }.storefront-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }.storefront-grid .store-card { border-radius:12px; }.storefront-grid .store-card-body { padding:10px;gap:7px; }.storefront-grid .store-card-title { font-size:.84rem; }.storefront-grid .store-price-main { font-size:.91rem; }.storefront-grid .badge-stock { display:none; }.store-warranty-link { align-self:flex-start; }.admin-email-grid { grid-template-columns:1fr; }.admin-email-preview-area iframe { height:340px; }.admin-send-grid { grid-template-columns:1fr; }.email-template-row { align-items:flex-start;flex-direction:column; }.admin-email-heading { align-items:flex-start;flex-direction:column; } }
@media(max-width:380px) { .storefront-grid { gap:7px; }.storefront-grid .store-card-body { padding:8px; }.storefront-grid .store-card-img { aspect-ratio:1/1; }.storefront-grid .btn-store-web { min-height:36px;font-size:.74rem; } }

/* Compact, scannable product inventory for the admin panel. */
#tabProducts .table-responsive { overflow:visible; }
.product-admin-table { border-collapse:separate!important; border-spacing:0 10px!important; font-size:.84rem!important; }
.product-admin-table thead tr,
.product-admin-table tbody tr { display:grid; grid-template-columns:minmax(230px,1.55fr) minmax(130px,.8fr) minmax(255px,1.65fr) minmax(150px,1fr) minmax(145px,.9fr); align-items:stretch; }
.product-admin-table thead th { padding:10px 12px!important; background:transparent!important; border-bottom:1px solid var(--border)!important; font-size:.76rem; text-transform:uppercase; letter-spacing:.045em; }
.product-admin-table tbody tr { overflow:hidden; border:1px solid var(--border); border-radius:13px; background:var(--surface); box-shadow:0 2px 9px rgba(15,23,42,.035); transition:box-shadow .18s,border-color .18s,transform .18s; }
.product-admin-table tbody tr:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--primary) 35%,var(--border)); box-shadow:0 7px 20px rgba(15,23,42,.07); }
.product-admin-table tbody td { min-width:0; padding:13px 12px!important; border-bottom:0!important; vertical-align:middle; }
.product-admin-info { display:grid; grid-template-columns:36px 56px minmax(0,1fr); align-items:center; gap:9px; }
.product-admin-order { display:flex; align-items:center; gap:4px; color:var(--muted); font-size:.72rem; font-weight:800; }
.product-admin-order>div { display:grid; gap:3px; }
.product-admin-order .btn-arrow-order { padding:1px 4px; font-size:.62rem; }
.product-admin-thumb { display:grid; width:54px; height:54px; place-items:center; object-fit:cover; border:1px solid var(--border); border-radius:11px; background:var(--bg); font-size:1.4rem; }
.product-admin-name { min-width:0; display:grid; justify-items:start; gap:4px; }
.product-admin-name>strong { color:var(--text); line-height:1.35; overflow-wrap:anywhere; }
.product-admin-name>span { color:var(--muted); font-size:.74rem; }
.product-admin-name>div { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.product-admin-name .pill-status,.product-admin-name .badge-stock { font-size:.67rem; padding:3px 7px; }
.product-admin-name>small { color:var(--muted); font-size:.73rem; }
.product-admin-availability { display:grid; justify-items:start; gap:8px; }
.product-admin-availability .badge-stock { font-size:.75rem; }
.product-admin-variants { display:grid; gap:0; max-height:200px; overflow:auto; padding-right:3px; }
.product-variant-summary { padding:8px 0; border-bottom:1px solid var(--border); }
.product-variant-summary:first-child { padding-top:0; }
.product-variant-summary:last-child { padding-bottom:0; border-bottom:0; }
.product-variant-summary>div { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.product-variant-summary strong { color:var(--text); overflow-wrap:anywhere; }
.product-variant-price { flex:0 0 auto; color:var(--primary); font-size:.8rem; font-weight:850; }
.product-variant-summary small { display:block; margin-top:3px; color:var(--muted); font-size:.7rem; line-height:1.5; }
.product-variant-summary small span { color:var(--border); }
.product-admin-link { display:inline-flex; color:var(--primary); font-weight:750; text-decoration:none; line-height:1.45; overflow-wrap:anywhere; }
.product-admin-link:hover { text-decoration:underline; }
.product-admin-actions { display:grid; gap:6px; }
.product-admin-actions .btn-sm { width:100%; justify-content:center; white-space:normal; }
html[data-theme="dark"] #productTableBody > tr,
html[data-theme="dark"] #productTableBody > tr > td { background:#172338!important; color:#e2e8f0!important; border-color:#334155!important; }
html[data-theme="dark"] #productTableBody > tr:hover > td { background:#1d2b42!important; }
html[data-theme="dark"] .product-admin-name>strong,
html[data-theme="dark"] .product-variant-summary strong { color:#f1f5f9!important; }
html[data-theme="dark"] .product-admin-thumb-empty { background:#111b2c!important; }
@media(max-width:1050px) {
  .product-admin-table thead tr,.product-admin-table tbody tr { grid-template-columns:minmax(205px,1.4fr) minmax(115px,.75fr) minmax(220px,1.5fr) minmax(125px,.9fr) minmax(125px,.85fr); }
  .product-admin-table thead th,.product-admin-table tbody td { padding-left:8px!important; padding-right:8px!important; }
  .product-admin-info { grid-template-columns:30px 46px minmax(0,1fr); gap:6px; }
  .product-admin-thumb { width:44px;height:44px; }
}
@media(max-width:760px) {
  #tabProducts .table-responsive { overflow:visible; }
  .product-admin-table { display:block; }
  .product-admin-table thead { display:none; }
  .product-admin-table tbody { display:grid; gap:10px; }
  .product-admin-table tbody tr { grid-template-columns:minmax(0,1fr) minmax(125px,.7fr); border-radius:12px; }
  .product-admin-table tbody td { padding:11px!important; }
  .product-admin-table tbody td:first-child { grid-column:1/-1; }
  .product-admin-table tbody td:nth-child(3) { grid-column:1/-1; border-top:1px solid var(--border)!important; }
  .product-admin-table tbody td:nth-child(4) { grid-column:1/-1; padding-top:0!important; }
  .product-admin-table tbody td:last-child { grid-column:1/-1; border-top:1px solid var(--border)!important; }
  .product-admin-info { grid-template-columns:34px 54px minmax(0,1fr); }
  .product-admin-thumb { width:52px;height:52px; }
  .product-admin-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:430px) {
  .product-admin-table tbody tr { grid-template-columns:minmax(0,1fr) 115px; }
  .product-admin-info { grid-template-columns:27px 46px minmax(0,1fr); gap:5px; }
  .product-admin-thumb { width:44px;height:44px; }
  .product-admin-actions { grid-template-columns:1fr; }
  .product-admin-actions .btn-sm { min-height:34px; }
  .product-admin-availability .badge-stock,.product-admin-availability .badge-stock-empty { font-size:.67rem; }
}

/* Shopee-inspired sales period selector and summary metrics. */
.sales-period-panel { margin:0 0 24px; padding:22px; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:0 5px 22px rgba(20,30,45,.05); }
.sales-period-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.sales-period-heading>div:first-child>span { color:var(--primary); font-size:.7rem; font-weight:850; letter-spacing:.11em; }
.sales-period-heading h3 { margin:5px 0 3px; color:var(--text); font-size:1.35rem; letter-spacing:-.025em; }
.sales-period-heading p { margin:0; color:var(--muted); font-size:.84rem; }
.sales-period-control { display:grid; gap:5px; width:min(100%,250px); }
.sales-period-control label,.sales-custom-range label { color:var(--muted); font-size:.76rem; font-weight:750; }
.sales-period-control select { min-height:42px; font-weight:700; }
.sales-custom-range { display:flex; align-items:end; flex-wrap:wrap; gap:10px; padding:14px 0; border-bottom:1px solid var(--border); }
.sales-custom-range[hidden] { display:none; }
.sales-custom-range label { display:grid; gap:5px; }
.sales-custom-range input { min-height:38px; }
.sales-period-metrics { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(160px,1fr)); gap:12px; padding-top:16px; }
.sales-period-metrics article { display:grid; align-content:center; gap:5px; min-height:94px; padding:15px 17px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
.sales-period-metrics article>span { color:var(--muted); font-size:.78rem; font-weight:700; }
.sales-period-metrics article>strong { color:var(--text); font-size:1.42rem; line-height:1.2; }
.sales-period-metrics article>small { color:var(--muted); font-size:.74rem; }
.sales-period-metrics .sales-period-main { border-color:color-mix(in srgb,var(--primary) 35%,var(--border)); background:color-mix(in srgb,var(--primary) 6%,var(--surface)); }
.sales-period-metrics .sales-period-main>strong { color:var(--primary); font-size:1.7rem; }
.recap-table-heading { flex-direction:row!important; align-items:center!important; }
.recap-table-heading h4 { margin:0 0 4px; font-size:1.05rem; }
.recap-table-heading p { margin:0; color:var(--muted); font-size:.8rem; }
.sales-order-count { padding:6px 10px; border-radius:999px; background:var(--bg); color:var(--muted); font-size:.75rem; font-weight:800; white-space:nowrap; }
html[data-theme="dark"] .sales-period-panel { background:#172338; border-color:#334155; }
html[data-theme="dark"] .sales-period-heading h3,
html[data-theme="dark"] .sales-period-metrics article>strong { color:#f1f5f9; }
html[data-theme="dark"] .sales-period-metrics article { background:#111b2c; border-color:#334155; }
html[data-theme="dark"] .sales-period-metrics .sales-period-main { background:#192b49; border-color:#38598b; }
html[data-theme="dark"] .sales-period-metrics .sales-period-main>strong { color:#7db1ff; }
html[data-theme="dark"] .sales-order-count { background:#111b2c; color:#cbd5e1; }
@media(max-width:680px) {
  .sales-period-panel { padding:16px; }
  .sales-period-heading { align-items:stretch; flex-direction:column; }
  .sales-period-control { width:100%; }
  .sales-period-metrics { grid-template-columns:1fr 1fr; }
  .sales-period-metrics .sales-period-main { grid-column:1/-1; }
  .sales-period-metrics article { min-height:82px; padding:12px; }
  .sales-period-metrics article>strong { font-size:1.15rem; }
  .sales-period-metrics .sales-period-main>strong { font-size:1.5rem; }
  .recap-table-heading { align-items:flex-start!important; }
}

.homepage-editor-card { margin:18px 0 24px; padding:18px; border:1px solid var(--border); border-radius:14px; background:var(--bg); }
.homepage-editor-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.homepage-editor-heading h4 { margin:0 0 4px; color:var(--text); font-size:1rem; }
.homepage-editor-heading p { margin:0; color:var(--muted); font-size:.8rem; line-height:1.5; }
.homepage-editor-heading>span { flex:0 0 auto; padding:5px 8px; border-radius:999px; background:#eaf2ff; color:#2563eb; font-size:.65rem; font-weight:850; letter-spacing:.05em; }
.homepage-copy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
.homepage-copy-wide { grid-column:1/-1; }
.homepage-editor-card hr { margin:8px 0 18px; border:0; border-top:1px solid var(--border); }
.homepage-extra-heading { margin-bottom:10px; }
.homepage-html-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:9px; }
.homepage-html-tools input { flex:1 1 240px; max-width:420px; }
.homepage-html-source { min-height:150px; resize:vertical; font: .78rem/1.5 Consolas,monospace; }
.homepage-html-guidance { margin:9px 0 12px; padding:10px 12px; border:1px solid #bfdbfe; border-radius:9px; background:#eff6ff; color:#1e3a8a; font-size:.77rem; line-height:1.55; }
.homepage-html-height-label { display:block; margin-bottom:5px; color:var(--muted); font-size:.76rem; font-weight:700; }
#setHomepageExtraHtmlHeight { max-width:150px; }
.homepage-html-preview { display:block; width:100%; margin-top:12px; border:1px solid var(--border); border-radius:10px; background:white; }
.homepage-html-preview[hidden] { display:none; }
.homepage-image-tools[hidden],#homepageHtmlControls[hidden] { display:none; }
.homepage-image-preview-wrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.homepage-image-preview-wrap[hidden] { display:none; }
.homepage-image-preview-wrap img { max-width:min(100%,520px); max-height:220px; object-fit:contain; border:1px solid var(--border); border-radius:10px; background:white; }
.home-extra-html { width:100%; margin:0 0 28px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 8px 24px rgba(15,23,42,.06); }
.home-extra-html iframe { display:block; width:100%; border:0; background:#fff; }
.home-hero[hidden],.home-extra-html[hidden],.home-extra-html iframe[hidden],.home-extra-html img[hidden] { display:none!important; }
.home-section-title[hidden],#homeFeaturedGrid[hidden],.home-help-strip[hidden] { display:none!important; }
.home-extra-html img { display:block; width:100%; height:auto; max-height:900px; object-fit:contain; background:var(--surface); }
.expired-verify-button { margin-top:12px; }
html[data-theme="dark"] .homepage-editor-card { background:#111b2c; border-color:#334155; }
html[data-theme="dark"] .homepage-editor-heading h4 { color:#f1f5f9; }
html[data-theme="dark"] .homepage-editor-heading>span { background:#1e3357; color:#bfdbfe; }
html[data-theme="dark"] .homepage-html-guidance { background:#172a46; border-color:#38598b; color:#bfdbfe; }
@media(max-width:600px) {
  .homepage-editor-card { padding:13px; }
  .homepage-copy-grid { grid-template-columns:1fr; }
  .homepage-copy-wide { grid-column:auto; }
  .homepage-html-tools>* { width:100%; max-width:none!important; }
  .homepage-html-tools input { flex-basis:100%; }
  .homepage-editor-heading { align-items:flex-start; }
}

/* Preference update: return the site's accent palette to blue. */
:root { --primary:#2563eb; --primary-dark:#1d4ed8; --primary-light:#eff6ff; --accent:#60a5fa; }
html[data-theme="dark"] { --primary:#60a5fa; --primary-dark:#3b82f6; --primary-light:#172b49; --accent:#93c5fd; }
.site-header .btn-nav-primary,.btn-submit { background:linear-gradient(135deg,#3b82f6,#1d4ed8); box-shadow:0 8px 18px rgba(37,99,235,.2); }
.home-hero { background:linear-gradient(112deg,rgba(22,36,66,.97),rgba(30,64,112,.88)),var(--home-hero-image,linear-gradient(135deg,#1e3a8a,#2563eb)); }
.home-hero::before { background:radial-gradient(ellipse at 75% 40%,rgba(96,165,250,.3),transparent 44%),linear-gradient(90deg,rgba(15,23,42,.38),transparent 72%); }
.home-eyebrow,.store-page-heading>div>span,.admin-email-heading>div>span { color:#bfdbfe; }
.home-hero h1 em { color:#93c5fd; }
.home-primary-action { color:#102a56; background:#bfdbfe; }
.hero-product-card span,.hero-product-card i { color:#bfdbfe; }
.home-section-title>div>span,.home-section-title>a,.home-help-strip>a { color:var(--primary); }
.storefront-grid .store-card:hover { border-color:#93c5fd; }
.storefront-grid .store-price-main,.storefront-grid .btn-store-web { color:var(--primary); }
.storefront-grid .btn-store-web { color:#fff; background:var(--primary); }
.store-category-chip.active { background:var(--primary);border-color:var(--primary); }
.admin-email-lock { background:#eff6ff;color:#1d4ed8; }
.product-detail-backdrop { padding:20px; }
.product-detail-modal { width:min(940px,96vw);max-width:940px;border-radius:18px;overflow:hidden; }
.product-detail-modal .modal-header { justify-content:space-between; }
.product-detail-eyebrow { color:var(--primary);font-size:.75rem;font-weight:850;letter-spacing:.12em; }
.product-detail-content { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;padding:22px; }
.product-detail-image-wrap { position:relative;min-height:330px;overflow:hidden;display:grid;place-items:center;border-radius:14px;background:var(--bg); }
.product-detail-image-wrap img { width:100%;height:100%;max-height:520px;object-fit:contain; }
.product-detail-no-image { font-size:5rem; }
.product-detail-info { display:flex;flex-direction:column;gap:12px; }
.product-detail-info h2 { margin:0;font-size:1.7rem;line-height:1.15;letter-spacing:-.04em; }
.product-detail-stats { display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.82rem; }
.product-detail-price { padding:12px 14px;border-radius:10px;background:var(--primary-light);color:var(--primary);font-size:1.55rem;font-weight:900; }
.product-detail-info>p { margin:0;color:var(--muted);line-height:1.65;white-space:pre-line; }
.product-detail-info h3 { margin:3px 0 8px;font-size:.95rem; }
.detail-variant-list { display:grid;gap:8px;max-height:210px;overflow:auto; }
.detail-variant { width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--surface);text-align:left;cursor:pointer; }
.detail-variant.selected { border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 15%,transparent);background:var(--primary-light); }
.detail-variant:disabled { opacity:.55;cursor:not-allowed; }
.detail-variant strong,.detail-variant small { display:block; }.detail-variant small { margin-top:4px;color:var(--muted);font-size:.75rem; }.detail-variant>b { white-space:nowrap;color:var(--primary); }
.product-detail-buy { width:100%;margin-top:auto; }
.storefront-grid .store-card { cursor:pointer; }.storefront-grid .store-card:focus-visible { outline:3px solid #93c5fd;outline-offset:2px; }
@media(max-width:680px) { .product-detail-backdrop { padding:8px; }.product-detail-modal { width:100%;max-height:94dvh;overflow:auto; }.product-detail-content { grid-template-columns:1fr;gap:16px;padding:14px; }.product-detail-image-wrap { min-height:0;aspect-ratio:1/1;max-height:38vh; }.product-detail-info h2 { font-size:1.35rem; }.product-detail-price { font-size:1.3rem; }.detail-variant-list { max-height:170px; } }
body:not(.warranty-page-mode) #landingView { display:none!important; }

/* Complete the dark palette for storefront surfaces and detail selectors. */
html[data-theme="dark"] {
  --surface:var(--card-bg);
  --text:var(--dark);
}
html[data-theme="dark"] .home-help-strip,
html[data-theme="dark"] .store-toolbar,
html[data-theme="dark"] .storefront-grid .store-card,
html[data-theme="dark"] .detail-variant,
html[data-theme="dark"] .product-detail-store-features,
html[data-theme="dark"] .admin-email-simple,
html[data-theme="dark"] .simple-email-controls {
  background-color:var(--card-bg);
  border-color:var(--border);
  color:var(--dark);
}
html[data-theme="dark"] .store-search { background:#0b1220;border-color:var(--border); }
html[data-theme="dark"] .store-search input { color:var(--dark); }
html[data-theme="dark"] .detail-variant.selected { background:#172b49;border-color:var(--primary); }
html[data-theme="dark"] .product-detail-store-features li { color:var(--dark); }
html[data-theme="dark"] .simple-email-controls .form-control,
html[data-theme="dark"] .simple-email-controls input { background:#0b1220;color:var(--dark);border-color:var(--border); }
html[data-theme="dark"] .simple-email-note { color:var(--muted); }
.product-detail-content { align-items:start; }
.product-detail-media { display:flex;flex-direction:column;gap:14px;min-width:0; }
.product-detail-media .product-detail-image-wrap { width:100%; }
.product-detail-store-features { padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface); }
.product-detail-store-features h3 { margin:0 0 11px;font-size:.98rem; }
.product-detail-store-features ul { display:grid;gap:9px;list-style:none;padding:0;margin:0; }
.product-detail-store-features li { display:flex;gap:9px;align-items:flex-start;color:var(--text);font-size:.87rem;line-height:1.45; }
.product-detail-store-features li span { flex:0 0 20px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--primary-light);color:var(--primary);font-weight:900;font-size:.75rem; }
.product-detail-store-features .feature-empty { color:var(--muted); }
.admin-email-simple { max-width:100%; }
.simple-email-layout { display:grid;grid-template-columns:minmax(290px,370px) minmax(0,1fr);gap:22px;margin-top:20px; }
.simple-email-controls { padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--bg); }
.simple-email-controls .form-group { margin-bottom:13px; }
.simple-email-button-row,.simple-email-actions { display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px; }
.simple-email-button-row .btn-sm { flex:1;min-width:80px; }
.simple-email-actions .btn-submit { flex:1;min-width:125px;padding:10px 12px; }
.simple-email-preview { min-width:0; }
.simple-email-preview-heading { display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:2px 0 10px; }
.simple-email-preview-heading h3 { margin:0;font-size:1.08rem; }
.simple-email-preview-heading span { color:var(--muted);font-size:.78rem; }
.simple-email-preview iframe { display:block;width:100%;height:min(76vh,780px);min-height:520px;border:1px solid var(--border);border-radius:12px;background:#fff; }
.simple-email-note { margin:10px 0 0;color:var(--muted);font-size:.76rem;line-height:1.5; }
@media(max-width:900px) { .simple-email-layout { grid-template-columns:1fr; }.simple-email-preview iframe { height:68vh;min-height:430px; } }
@media(max-width:600px) { .simple-email-layout { gap:16px; }.simple-email-controls { padding:12px; }.simple-email-preview-heading { align-items:flex-start;flex-direction:column; }.simple-email-preview iframe { height:70vh;min-height:380px; }.product-detail-store-features { padding:13px; } }
/* Banner carousel and promotions */
.homepage-banner-carousel{position:relative;max-width:1200px;margin:22px auto 34px;padding-bottom:22px}
.homepage-banner-carousel[hidden],.home-flash-sale[hidden]{display:none!important}
.homepage-banner-window{overflow:hidden;border-radius:20px;background:#17243a;box-shadow:0 18px 42px rgba(0,0,0,.18);aspect-ratio:20/7;transition:height .35s ease}
.homepage-banner-track{display:flex;align-items:stretch;height:100%;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.homepage-banner-slide{flex:0 0 100%;position:relative;height:100%;overflow:hidden}
.homepage-banner-default-slide .home-hero{position:relative;width:100%;height:100%;min-height:0!important;padding:22px clamp(24px,4vw,48px);grid-template-columns:1fr;border-radius:0;box-shadow:none;background:linear-gradient(112deg,rgba(22,36,66,var(--home-hero-overlay-opacity,.82)),rgba(30,64,112,var(--home-hero-overlay-opacity,.82))),var(--home-hero-image,linear-gradient(135deg,#1e3a8a,#2563eb))}
.homepage-banner-default-slide .home-hero::before{opacity:var(--home-hero-overlay-opacity,.82)}
.homepage-banner-default-slide .home-hero-content{max-width:58%}
.homepage-banner-default-slide .home-hero h1{font-size:clamp(1.8rem,3.4vw,2.75rem);line-height:1.02;margin:10px 0 8px}
.homepage-banner-default-slide .home-hero-content>p{font-size:.94rem;line-height:1.45;margin:0}
.homepage-banner-default-slide .home-hero-actions{gap:10px;margin-top:16px}
.homepage-banner-default-slide .home-primary-action,.homepage-banner-default-slide .home-secondary-action{min-height:42px;padding:0 16px}
.homepage-banner-default-slide .home-trust-row{gap:14px;margin-top:15px;font-size:.73rem}
.homepage-banner-default-slide .home-hero-art{position:absolute;right:3%;top:50%;width:39%;height:88%;min-height:0;transform:translateY(-50%) scale(.76);transform-origin:center}
.homepage-banner-default-slide .hero-product-card{width:170px;min-height:205px;padding:17px}
.homepage-banner-slide>a,.homepage-banner-slide>div{display:block;width:100%;height:100%;position:relative}
.homepage-banner-slide img{display:block;width:100%;height:100%;object-fit:contain}
.homepage-banner-caption{position:absolute;left:24px;bottom:20px;padding:10px 15px;border-radius:12px;background:rgba(8,15,30,.75);color:#fff;font-weight:800;backdrop-filter:blur(8px)}
.homepage-banner-arrow{position:absolute;top:calc(50% - 14px);width:42px;height:42px;border:0;border-radius:50%;background:rgba(10,20,40,.65);color:white;font-size:27px;cursor:pointer}
.homepage-banner-arrow.prev{left:14px}.homepage-banner-arrow.next{right:14px}
.homepage-banner-dots{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:8px}
.homepage-banner-dots button{width:9px;height:9px;border:0;border-radius:99px;background:#94a3b8;padding:0;cursor:pointer}.homepage-banner-dots button.active{width:24px;background:#3b82f6}
.home-flash-sale{max-width:1240px;margin:32px auto 40px;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--card-bg,#fff)}
.home-flash-sale-heading{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.home-flash-sale-heading h2{font-size:1.25rem;font-style:italic;margin:0}.home-flash-sale-heading span:first-of-type{background:#fbbf24;color:#111827;border-radius:6px;padding:4px 8px;font-weight:800;font-variant-numeric:tabular-nums}.home-flash-sale-heading span:nth-of-type(2){color:var(--muted);font-size:.82rem}.home-flash-sale-heading a{margin-left:auto;color:#3b82f6;font-weight:700}
.home-flash-sale-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:12px}.home-flash-sale-card{min-width:0;display:flex;flex-direction:column;gap:5px;text-align:left;padding:0 0 10px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface,#fff);color:var(--text,#172033);cursor:pointer}.home-flash-sale-card img,.home-flash-sale-placeholder{width:100%;aspect-ratio:1/1;object-fit:cover;background:#eaf0fb}.home-flash-sale-placeholder{display:grid;place-items:center;font-size:2.2rem;color:#3b82f6}.home-flash-sale-card strong,.home-flash-sale-card small,.home-flash-sale-card b,.home-flash-sale-card del{margin:0 9px}.home-flash-sale-card strong{font-size:.82rem;line-height:1.3}.home-flash-sale-card small{color:var(--muted);font-size:.72rem}.home-flash-sale-card b{color:#e11d48;font-size:.95rem}.home-flash-sale-card del{color:var(--muted);font-size:.74rem}
.flash-sale-inline-badge{display:inline-block;padding:2px 6px;border-radius:5px;background:#fff0e7;color:#ea580c;font-size:.68rem;font-weight:800}.variant-price-tag del,.detail-variant del{color:var(--muted);font-size:.75em}.variant-price-tag small{color:#ea580c;font-weight:800}
.promo-checkout-box{margin:12px 0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface,#f8fafc)}.promo-code-row{display:flex;gap:8px}.promo-code-row .form-control{flex:1;min-width:0}.promo-checkout-summary{margin-top:8px;padding:8px 10px;border-radius:8px;background:#ecfdf5;color:#047857;font-size:.82rem;font-weight:700}.promo-checkout-summary[hidden]{display:none}
.banner-admin-panel,.promo-admin-panel{margin-bottom:18px}.banner-admin-body,.promo-form-grid{padding:18px}.banner-upload-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end;margin:16px 0}.banner-file-limit{display:block;margin-top:5px;color:var(--muted);font-size:.76rem}.banner-upload-preview{display:flex;align-items:center;gap:10px;min-height:62px;color:var(--muted);font-size:.8rem}.banner-upload-preview img{max-width:min(100%,520px);max-height:180px;width:auto;height:auto;object-fit:contain;border:1px solid var(--border);border-radius:8px}.banner-admin-footer{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-top:14px;border-top:1px solid var(--border)}.homepage-banner-admin-list{display:grid;gap:10px;margin-bottom:16px}.homepage-banner-admin-item,.promo-list-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface,#fff)}.homepage-banner-admin-item>img{width:130px;height:66px;object-fit:cover;border-radius:7px}.homepage-banner-admin-item>div{display:grid;gap:7px;flex:1}.banner-order-actions{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}.banner-order-actions button{min-width:82px}.banner-order-actions button:disabled{opacity:.45;cursor:not-allowed}.homepage-banner-admin-item label{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:8px;font-size:.78rem}.promo-form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}.promo-scope{display:flex;gap:14px;flex-wrap:wrap}.promo-list{padding:0 18px 16px;display:grid;gap:8px}.promo-list-item{justify-content:space-between}.promo-list-item>div:first-child{display:grid;gap:5px}.promo-list-item small{color:var(--muted)}
@media(max-width:700px){.homepage-banner-carousel,.home-flash-sale{margin-left:12px;margin-right:12px}.homepage-banner-window{aspect-ratio:auto}.homepage-banner-track{height:auto}.homepage-banner-slide{height:auto}.homepage-banner-default-slide{min-height:420px}.homepage-banner-default-slide .home-hero{height:auto;min-height:420px!important;padding:28px 22px}.homepage-banner-default-slide .home-hero-content{max-width:78%}.homepage-banner-default-slide .home-hero h1{font-size:clamp(2rem,9vw,2.7rem)}.homepage-banner-default-slide .home-hero-art{right:-13%;top:55%;width:55%;height:70%;min-height:0;opacity:.65;transform:translateY(-50%) scale(.72)}.homepage-banner-default-slide .hero-product-card{width:150px;min-height:180px}.homepage-banner-slide>a,.homepage-banner-slide>div{height:auto}.homepage-banner-slide img{height:auto}.homepage-banner-arrow{width:34px;height:34px}.home-flash-sale{padding:14px}.home-flash-sale-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.banner-upload-form,.promo-form-grid{grid-template-columns:1fr}.banner-admin-footer{align-items:stretch;flex-direction:column}.homepage-banner-admin-item{align-items:flex-start;flex-wrap:wrap}.banner-order-actions{flex-direction:row;width:100%;justify-content:flex-end}.banner-order-actions button{min-width:0}.homepage-banner-admin-item>div{min-width:calc(100% - 150px)}.homepage-banner-admin-item label{grid-template-columns:1fr}.promo-list-item{align-items:flex-start;flex-direction:column}}

/* Keep the default hero's desktop left/right composition on narrow screens without overlap. */
@media(max-width:700px){
  .homepage-banner-default-slide{min-height:370px}
  .homepage-banner-default-slide .home-hero{height:auto;min-height:370px!important;padding:24px 20px 48px;align-items:center}
  .homepage-banner-default-slide .home-hero-content{width:67%;max-width:67%;align-self:center}
  .homepage-banner-default-slide .home-eyebrow{font-size:.62rem;letter-spacing:.12em}
  .homepage-banner-default-slide .home-hero h1{font-size:clamp(1.55rem,6.2vw,2.1rem);line-height:1.04;margin:9px 0 8px;letter-spacing:-.045em}
  .homepage-banner-default-slide .home-hero-content>p{font-size:.78rem;line-height:1.45;margin:0}
  .homepage-banner-default-slide .home-hero-actions{gap:7px;margin-top:13px}
  .homepage-banner-default-slide .home-primary-action,.homepage-banner-default-slide .home-secondary-action{min-height:36px;padding:0 10px;font-size:.72rem;white-space:nowrap}
  .homepage-banner-default-slide .home-trust-row{max-width:100%;gap:5px 9px;margin-top:10px;font-size:.62rem;line-height:1.3}
  .homepage-banner-default-slide .home-hero-art{right:-3%;top:50%;width:36%;height:62%;min-height:0;opacity:.42;transform:translateY(-50%) scale(.55);transform-origin:center right}
  .homepage-banner-default-slide .hero-product-card{width:126px;min-height:154px;padding:12px;border-radius:18px}
  .homepage-banner-default-slide .hero-product-card strong{font-size:1.12rem}
  .homepage-banner-default-slide .hero-floating-tag{font-size:.66rem;padding:8px 10px}
  .homepage-banner-arrow{z-index:3;top:50%;transform:translateY(-50%)}
}
@media(max-width:420px){
  .homepage-banner-default-slide,.homepage-banner-default-slide .home-hero{min-height:390px!important}
  .homepage-banner-default-slide .home-hero{padding-left:17px;padding-right:17px}
  .homepage-banner-default-slide .home-hero-content{width:72%;max-width:72%}
  .homepage-banner-default-slide .home-hero h1{font-size:clamp(1.48rem,7vw,1.8rem)}
  .homepage-banner-default-slide .home-hero-art{right:-7%;width:34%;opacity:.34;transform:translateY(-50%) scale(.48)}
  .homepage-banner-default-slide .home-primary-action,.homepage-banner-default-slide .home-secondary-action{padding:0 8px;font-size:.68rem}
}

/* A fixed carousel canvas keeps every promo slide the same height. */
.homepage-banner-window{aspect-ratio:2/1}
.homepage-banner-track{height:100%}
.homepage-banner-slide{height:100%}
.homepage-banner-slide.has-banner-image{isolation:isolate;background:#17243a}
.homepage-banner-slide.has-banner-image::before{content:"";position:absolute;z-index:-1;inset:-14px;background-image:linear-gradient(rgba(10,20,40,.26),rgba(10,20,40,.26)),var(--banner-background-image);background-position:center;background-size:cover;filter:blur(14px);transform:scale(1.04)}
.homepage-banner-slide.has-banner-image>a,.homepage-banner-slide.has-banner-image>div{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.homepage-banner-slide.has-banner-image img{width:100%;height:100%;object-fit:contain;object-position:center}
@media(max-width:700px){
  .homepage-banner-window{height:auto;aspect-ratio:2/1}
  .homepage-banner-track,.homepage-banner-slide{height:100%}
  .homepage-banner-default-slide{height:100%;min-height:0}
  .homepage-banner-default-slide .home-hero{height:100%;min-height:0!important;padding:6px clamp(10px,2.8vw,24px);border-radius:0;align-items:center}
  .homepage-banner-default-slide .home-hero-content{width:67%;max-width:67%;align-self:center}
  .homepage-banner-default-slide .home-eyebrow{font-size:clamp(.38rem,1vw,.72rem);letter-spacing:.1em}
  .homepage-banner-default-slide .home-hero h1{font-size:clamp(.72rem,3.4vw,2.75rem);line-height:1.02;margin:3px 0;letter-spacing:-.045em}
  .homepage-banner-default-slide .home-hero-content>p{font-size:clamp(.48rem,1.15vw,.94rem);line-height:1.25;margin:2px 0}
  .homepage-banner-default-slide .home-hero-actions{gap:4px;margin-top:4px;flex-wrap:nowrap}
  .homepage-banner-default-slide .home-primary-action,.homepage-banner-default-slide .home-secondary-action{min-height:clamp(20px,3.5vw,42px);padding:0 clamp(5px,1.35vw,16px);gap:clamp(3px,.7vw,9px);border-radius:7px;font-size:clamp(.45rem,1.05vw,.82rem);white-space:nowrap}
  .homepage-banner-default-slide .home-trust-row{max-width:100%;gap:2px 6px;margin-top:4px;font-size:clamp(.4rem,.9vw,.68rem);line-height:1.15}
  .homepage-banner-default-slide .home-hero-art{right:-3%;top:50%;width:36%;height:70%;min-height:0;opacity:.5;transform:translateY(-50%) scale(.55);transform-origin:center right}
  .homepage-banner-default-slide .hero-product-card{width:clamp(70px,17vw,150px);min-height:clamp(85px,21vw,180px);padding:clamp(6px,1.4vw,14px);border-radius:12px}
  .homepage-banner-default-slide .hero-product-card span{font-size:clamp(.35rem,.55vw,.62rem)}
  .homepage-banner-default-slide .hero-product-card strong{font-size:clamp(.58rem,1.5vw,1.12rem)}
  .homepage-banner-default-slide .hero-product-card i{right:6px;bottom:5px;font-size:clamp(.7rem,1.4vw,1.4rem)}
  .homepage-banner-default-slide .hero-floating-tag{right:0;padding:5px 7px;border-radius:7px;font-size:clamp(.38rem,.7vw,.66rem)}
  .homepage-banner-slide.has-banner-image>a,.homepage-banner-slide.has-banner-image>div{height:100%}
  .homepage-banner-slide.has-banner-image img{height:100%;object-fit:contain}
}

.promo-status{display:inline-flex;width:max-content;align-items:center;margin-top:5px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:800}.promo-status-active{background:#dcfce7;color:#166534}.promo-status-upcoming{background:#dbeafe;color:#1d4ed8}.promo-status-ended{background:#fee2e2;color:#b91c1c}.promo-status-inactive{background:#e5e7eb;color:#475569}

/* Homepage hero scale and action placement across desktop and phone sizes. */
@media(min-width:701px){
  .homepage-banner-default-slide .home-hero-content{position:absolute;z-index:2;left:clamp(24px,4.5vw,52px);top:24px;bottom:24px;width:62%;max-width:none;padding:0}
  .homepage-banner-default-slide .home-hero h1{font-size:clamp(2.1rem,3.8vw,3.1rem);line-height:1.04;margin:12px 0 10px}
  .homepage-banner-default-slide .home-hero-content>p{font-size:1rem;line-height:1.5}
  .homepage-banner-default-slide .home-hero-actions{position:absolute;left:0;bottom:66px;gap:12px;margin:0;padding:0}
  .homepage-banner-default-slide .home-primary-action,.homepage-banner-default-slide .home-secondary-action{min-height:48px;padding:0 20px;font-size:.88rem}
  .homepage-banner-default-slide .home-trust-row{position:absolute;left:0;bottom:18px;gap:16px;margin:0;font-size:.78rem}
  .homepage-banner-default-slide .home-hero-art{transform:translateY(-50%) scale(.9)}
  .homepage-banner-default-slide .hero-product-card{width:188px;min-height:232px;padding:19px}
}
@media(max-width:700px){
  .homepage-banner-default-slide .home-hero-content{width:66%;max-width:66%}
  .homepage-banner-default-slide .home-hero h1{font-size:clamp(.92rem,4vw,1.55rem);line-height:1.04;margin:4px 0}
  .homepage-banner-default-slide .home-hero-content>p{font-size:clamp(.6rem,2.5vw,.82rem);line-height:1.25;margin:3px 0}
  .homepage-banner-default-slide .home-hero-actions{gap:6px;margin-top:6px;flex-wrap:nowrap}
  .homepage-banner-default-slide .home-primary-action,.homepage-banner-default-slide .home-secondary-action{min-height:34px;padding:0 9px;gap:5px;border-radius:8px;font-size:clamp(.62rem,2.25vw,.78rem);white-space:nowrap}
  .homepage-banner-default-slide .home-trust-row{gap:3px 7px;margin-top:6px;font-size:clamp(.48rem,1.8vw,.62rem);line-height:1.2}
  .homepage-banner-default-slide .home-hero-art{right:3%;top:50%;width:31%;height:84%;min-height:0;opacity:.92;transform:translateY(-50%)}
  .homepage-banner-default-slide .hero-product-card{width:clamp(92px,24vw,128px);min-height:clamp(112px,30vw,150px);padding:9px;border-radius:13px}
  .homepage-banner-default-slide .hero-product-card span{font-size:clamp(.43rem,1.55vw,.62rem)}
  .homepage-banner-default-slide .hero-product-card strong{font-size:clamp(.78rem,3.45vw,1.08rem);line-height:1.02}
  .homepage-banner-default-slide .hero-product-card i{right:7px;bottom:6px;font-size:1.1rem}
  .homepage-banner-default-slide .hero-floating-tag{right:0;bottom:4%;padding:5px 7px;font-size:clamp(.42rem,1.5vw,.62rem)}
  .homepage-banner-arrow{top:8px;transform:none;width:27px;height:27px;font-size:20px}
  .homepage-banner-arrow.prev{left:auto;right:42px}
  .homepage-banner-arrow.next{right:8px}
}

/* Collapsible left navigation and card-based product inventory on phones. */
.admin-sidebar-toggle,.admin-sidebar-backdrop{display:none}
@media(max-width:900px){
  .admin-sidebar-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:74px}
  .admin-sidebar-backdrop{display:block;position:fixed;z-index:1098;inset:0;background:rgba(6,13,25,.58);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  .admin-sidebar{position:fixed!important;z-index:1099;inset:0 auto 0 0;width:min(310px,84vw)!important;max-width:none!important;height:100dvh;max-height:100dvh;display:flex!important;flex-direction:column!important;align-items:stretch!important;overflow-x:hidden!important;overflow-y:auto!important;white-space:normal!important;padding:18px 12px!important;border:0!important;border-right:1px solid var(--border)!important;border-radius:0 16px 16px 0!important;box-shadow:16px 0 42px rgba(0,0,0,.25);transform:translateX(-105%);transition:transform .22s ease}
  .admin-sidebar>.sidebar-nav-btn{width:100%!important;min-width:0!important;flex:0 0 auto!important;padding:11px 13px!important;white-space:normal;text-align:left}
  .admin-sidebar>div:last-child{display:flex!important;flex-direction:column;align-items:stretch!important;flex:0 0 auto!important;margin:12px 0 0!important;padding:14px 0 0!important;border:0!important;border-top:1px solid var(--border)!important}
  .admin-sidebar>div:last-child>div{display:block!important}
  .admin-sidebar>div:last-child .sidebar-nav-btn{width:100%!important;min-width:0!important;padding:11px 13px!important}
  body.admin-sidebar-open{overflow:hidden}
  body.admin-sidebar-open .admin-sidebar{transform:translateX(0)}
  body.admin-sidebar-open .admin-sidebar-backdrop{opacity:1;visibility:visible}
  #tabProducts .table-responsive{overflow:visible!important;min-width:0}
  #tabProducts .product-admin-table{display:block;width:100%;min-width:0!important;table-layout:fixed}
  #tabProducts .product-admin-table tbody{display:grid;width:100%;gap:10px}
  #tabProducts .product-admin-table tbody tr{display:grid;width:100%;min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);overflow:hidden}
  #tabProducts .product-admin-table tbody td{min-width:0;overflow-wrap:anywhere}
  #tabProducts .product-admin-table tbody td:first-child,#tabProducts .product-admin-table tbody td:nth-child(3),#tabProducts .product-admin-table tbody td:nth-child(4),#tabProducts .product-admin-table tbody td:last-child{grid-column:1/-1}
  #tabProducts .product-admin-availability{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
  #tabProducts .product-admin-availability .badge-stock{max-width:100%;white-space:normal;line-height:1.25}
  #tabProducts .product-admin-variants{max-height:none;overflow:visible;padding-right:0}
  #tabProducts .product-variant-summary{padding:9px 0}
  #tabProducts .product-variant-summary>div{align-items:flex-start;flex-wrap:wrap}
  #tabProducts .product-admin-link{max-width:100%;overflow-wrap:anywhere}
  #tabProducts .product-admin-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #tabProducts .product-admin-actions .btn-sm{min-width:0;min-height:40px;padding:8px;font-size:.8rem;overflow-wrap:anywhere}
  #tabProducts .product-admin-actions .btn-sm:last-child{grid-column:1/-1}
}
@media(max-width:640px){
  .admin-header .nav-wrapper{align-items:center}
  .admin-header .nav-links{flex:0 0 auto}
  .admin-header .nav-links>a{display:none}
  .admin-header .nav-links .theme-toggle{min-width:38px}
  #tabProducts>.table-card>.table-header{align-items:stretch}
  #tabProducts>.table-card>.table-header>div{min-width:0;flex:1 1 100%}
  #tabProducts>.table-card>.table-header>button{width:100%;min-height:42px}
  #tabProducts .product-admin-info{grid-template-columns:28px 48px minmax(0,1fr);gap:7px}
  #tabProducts .product-admin-thumb{width:46px;height:46px}
  #tabProducts .product-admin-name>strong{font-size:.92rem}
  #tabProducts .product-admin-name>span,#tabProducts .product-admin-name>small{font-size:.73rem}
  #tabProducts .product-admin-table tbody td:nth-child(2){grid-column:1/-1}
  #tabProducts .product-admin-actions .btn-sm{font-size:.76rem}
}
@media(max-width:700px){
  .homepage-banner-default-slide .home-hero-art{right:4%;top:7%;width:38%;height:86%;display:block;transform:none}
  .homepage-banner-default-slide .hero-product-card{position:absolute;top:2%;right:0;width:clamp(88px,25vw,108px);height:clamp(104px,30vw,124px);min-height:0;padding:8px;transform:rotate(5deg)}
  .homepage-banner-default-slide .hero-product-card strong{font-size:clamp(.72rem,3vw,.98rem)}
  .homepage-banner-default-slide .hero-floating-tag{display:none}
}
.homepage-banner-default-slide .home-hero{background-position:center;background-size:100% 100%}

/* Increase contrast for inline light badges and prices in admin tables. */
html[data-theme="dark"] #tabPackages [style*="background:#e0e7ff"],
html[data-theme="dark"] #tabOrders [style*="background:#e0e7ff"] {
  background:#23385b!important;
  color:#c7ddff!important;
  border:1px solid #3b5b88;
}
html[data-theme="dark"] #tabOrders [style*="background:#fef3c7"] {
  background:#493719!important;
  color:#ffe08a!important;
  border:1px solid #80602b;
}
html[data-theme="dark"] #tabPackages td strong[style*="#059669"],
html[data-theme="dark"] #tabOrders td strong[style*="#059669"] {
  color:#6ee7b7!important;
}

/* Consistent readable contrast for the rest of the interface in dark mode. */
html[data-theme="dark"] :is(.form-hint,.form-text,.help-text,.empty-state,.data-table small,.table-card small,.admin-content-area small,.muted,.text-muted) {
  color:#b4c1d2!important;
}
html[data-theme="dark"] :is(.pill-status,.badge-stock,.order-pill,.package-badge-tag,.store-card-badge,.admin-badge,.sidebar-badge,.flash-sale-inline-badge,.promo-status) {
  font-weight:750;
  text-shadow:none;
}
html[data-theme="dark"] .pill-active,
html[data-theme="dark"] .badge-stock-available,
html[data-theme="dark"] .promo-status-active {
  background:#123c32!important;color:#a7f3d0!important;border:1px solid #23765d;
}
html[data-theme="dark"] .pill-pending,
html[data-theme="dark"] .promo-status-upcoming {
  background:#18385b!important;color:#bfdbfe!important;border:1px solid #35699a;
}
html[data-theme="dark"] .pill-expired,
html[data-theme="dark"] .badge-stock-empty,
html[data-theme="dark"] .promo-status-ended {
  background:#48242b!important;color:#fecaca!important;border:1px solid #8b3945;
}
html[data-theme="dark"] .promo-status-inactive {
  background:#293548!important;color:#d1d9e4!important;border:1px solid #48576b;
}
html[data-theme="dark"] .pill-status:not(.pill-active):not(.pill-pending):not(.pill-expired) {
  background:#263653!important;color:#d5e3f7!important;border:1px solid #405a7e;
}
html[data-theme="dark"] .btn-sm-outline,
html[data-theme="dark"] .btn-nav-outline,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-preset:not(.active),
html[data-theme="dark"] .settings-pill-btn {
  background:#1b2a40!important;color:#e2e8f0!important;border-color:#465a74!important;
}
html[data-theme="dark"] .btn-sm-outline:hover,
html[data-theme="dark"] .btn-nav-outline:hover,
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .settings-pill-btn:hover {
  background:#2a3d59!important;color:#f8fafc!important;border-color:#6380a4!important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#9aabc0!important;opacity:1; }
html[data-theme="dark"] .data-table a,
html[data-theme="dark"] .admin-content-area a:not(.btn):not(.sidebar-nav-btn),
html[data-theme="dark"] .table-card a:not(.btn) { color:#82b7ff; }
html[data-theme="dark"] .data-table a:hover,
html[data-theme="dark"] .admin-content-area a:not(.btn):not(.sidebar-nav-btn):hover,
html[data-theme="dark"] .table-card a:not(.btn):hover { color:#b6d5ff; }
html[data-theme="dark"] [style*="background:#e0e7ff"],
html[data-theme="dark"] [style*="background: #e0e7ff"],
html[data-theme="dark"] [style*="background:#eef2ff"],
html[data-theme="dark"] [style*="background: #eef2ff"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background: #eff6ff"] {
  background:#23385b!important;color:#c7ddff!important;border-color:#3b5b88!important;
}
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background: #fef3c7"],
html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background: #fffbeb"] {
  background:#493719!important;color:#ffe08a!important;border-color:#80602b!important;
}
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #dcfce7"],
html[data-theme="dark"] [style*="background:#ecfdf5"],
html[data-theme="dark"] [style*="background: #ecfdf5"] {
  background:#123c32!important;color:#a7f3d0!important;border-color:#23765d!important;
}
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background: #fee2e2"],
html[data-theme="dark"] [style*="background:#fef2f2"],
html[data-theme="dark"] [style*="background: #fef2f2"] {
  background:#48242b!important;color:#fecaca!important;border-color:#8b3945!important;
}
html[data-theme="dark"] [style*="color:#64748b"],
html[data-theme="dark"] [style*="color: #64748b"],
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color: #6b7280"] { color:#b4c1d2!important; }

/* Muted dark palette for navigation and action controls across buyer/admin pages. */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .admin-header,
html[data-theme="dark"] .admin-topbar { background:#111b2c!important;border-color:#334155!important; }
html[data-theme="dark"] .logo-brand,
html[data-theme="dark"] .admin-header .nav-wrapper>span,
html[data-theme="dark"] .admin-header .nav-wrapper>div>span { color:#e2e8f0!important; }
html[data-theme="dark"] .btn-nav-outline,
html[data-theme="dark"] .site-header .nav-links .btn-nav,
html[data-theme="dark"] .admin-header .nav-links .btn-nav {
  background:#1b2a40!important;color:#e2e8f0!important;border-color:#465a74!important;
}
html[data-theme="dark"] .btn-nav-outline:hover,
html[data-theme="dark"] .site-header .nav-links .btn-nav:hover,
html[data-theme="dark"] .admin-header .nav-links .btn-nav:hover { background:#2a3d59!important;color:#fff!important; }
html[data-theme="dark"] .sidebar-nav-btn { color:#cbd5e1; }
html[data-theme="dark"] .sidebar-nav-btn:hover:not(.active) { background:#22314a!important;color:#f1f5f9!important; }
html[data-theme="dark"] .sidebar-nav-btn.active { background:#315f9d!important;color:#fff!important; }
html[data-theme="dark"] :is(.btn-sm-primary,.btn-primary,.btn-store-web,.home-primary-action) {
  background:#376eb4!important;color:#f8fbff!important;border-color:#4a83c7!important;
}
html[data-theme="dark"] :is(.btn-sm-primary,.btn-primary,.btn-store-web,.home-primary-action):hover { background:#427dbf!important; }
html[data-theme="dark"] :is(.btn-sm-success,.btn-success) { background:#167355!important;color:#e7fff5!important;border-color:#278c6a!important; }
html[data-theme="dark"] :is(.btn-sm-success,.btn-success):hover { background:#1b8564!important; }
html[data-theme="dark"] :is(.btn-sm-danger,.btn-danger) { background:#48242b!important;color:#ffd7dc!important;border:1px solid #8b3945!important; }
html[data-theme="dark"] :is(.btn-sm-danger,.btn-danger):hover { background:#5a2b34!important;color:#fff!important; }
html[data-theme="dark"] :is(.home-secondary-action,.store-warranty-link,.store-category-chip) {
  background:#1b2a40!important;color:#d7e5f8!important;border-color:#465a74!important;
}
html[data-theme="dark"] .store-category-chip.active { background:#315f9d!important;color:#fff!important;border-color:#4a83c7!important; }
html[data-theme="dark"] .home-secondary-action:hover,
html[data-theme="dark"] .store-warranty-link:hover { background:#2a3d59!important;color:#fff!important; }
html[data-theme="dark"] .warranty-banner { background:linear-gradient(135deg,#172338,#26385b)!important;color:#f1f5f9!important; }
html[data-theme="dark"] .warranty-banner .product-meta p,
html[data-theme="dark"] .warranty-banner .token-meta-bar,
html[data-theme="dark"] .warranty-banner .countdown-header { color:#cbd5e1!important; }
html[data-theme="dark"] .claim-card,
html[data-theme="dark"] #claimFormCard,
html[data-theme="dark"] #resultArea,
html[data-theme="dark"] .store-toolbar,
html[data-theme="dark"] .home-help-strip { background:#111b2c!important;color:#e2e8f0!important;border-color:#334155!important; }
html[data-theme="dark"] .site-header .transaction-ticker { color:#cbd5e1!important; }
html[data-theme="dark"] .live-chat-widget .live-chat-button,
html[data-theme="dark"] .live-chat-widget button { color:#e2e8f0; }
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible { outline-color:#82b7ff; }
html[data-theme="dark"] .site-header .btn-nav-primary,
html[data-theme="dark"] .btn-nav-primary,
html[data-theme="dark"] .btn-submit,
html[data-theme="dark"] .btn-action-primary,
html[data-theme="dark"] .btn-extend-warranty {
  background:linear-gradient(135deg,#3b82f6,#2563eb)!important;
  color:#fff!important;border:1px solid #5794f4!important;
  box-shadow:0 5px 14px rgba(37,99,235,.24)!important;
}
html[data-theme="dark"] .site-header .btn-nav-primary:hover,
html[data-theme="dark"] .btn-nav-primary:hover,
html[data-theme="dark"] .btn-submit:hover,
html[data-theme="dark"] .btn-action-primary:hover,
html[data-theme="dark"] .btn-extend-warranty:hover { background:linear-gradient(135deg,#4a8cf4,#3473de)!important; }
html[data-theme="dark"] .badge-active,
html[data-theme="dark"] .pill-active {
  background:#174b40!important;color:#a7f3d0!important;border:1px solid #2f806b!important;
}
html[data-theme="dark"] .badge-expired,
html[data-theme="dark"] .pill-expired {
  background:#512b35!important;color:#ffd0d7!important;border:1px solid #914756!important;
}
html[data-theme="dark"] .warranty-banner.warranty-state-active { background:linear-gradient(135deg,#17334c,#1d3c5b)!important; }
html[data-theme="dark"] .warranty-banner.warranty-state-expired { background:linear-gradient(135deg,#292c42,#34334c)!important; }
html[data-theme="dark"] #expiredWarrantyNotice {
  background:#33252d!important;border-color:#71404c!important;color:#ffd0d7!important;
}
html[data-theme="dark"] #expiredWarrantyNotice div[style*="color:#b91c1c"],
html[data-theme="dark"] #expiredWarrantyNotice div[style*="color: #b91c1c"] { color:#ffd0d7!important; }
html[data-theme="dark"] #expiredWarrantyNotice div[style*="color:#7f1d1d"],
html[data-theme="dark"] #expiredWarrantyNotice div[style*="color: #7f1d1d"] { color:#d9bdc4!important; }
html[data-theme="dark"] .order-pill {
  background:#243b5d!important;border-color:#3d5d88!important;color:#d4e5ff!important;
}
html[data-theme="dark"] .order-pill .btn-icon-copy { color:#b8d5ff!important;background:#1b2f4a!important; }
html[data-theme="dark"] .btn-action-whatsapp { background:#17684d!important;color:#e6fff4!important; }
html[data-theme="dark"] .btn-action-whatsapp:hover { background:#1b7b5b!important; }

/* Final mobile refinements requested for the buyer header and warranty timer. */
.site-header .logo-brand { font-weight:650!important;letter-spacing:-.012em; }
.site-header .nav-links .theme-toggle { order:1; }
.site-header .nav-links a[href="/store"] { order:2; }
.site-header .nav-links .btn-nav-primary { order:3; }
.site-header .nav-links #homeNavLink { order:4; }
@media(max-width:640px){
  .warranty-banner .timer-grid { display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important; }
  .warranty-banner .timer-box { min-width:0;padding:7px 2px!important; }
  .warranty-banner .timer-number { font-size:clamp(.8rem,4.5vw,1.12rem)!important; }
  .warranty-banner .timer-label { font-size:clamp(.46rem,2.25vw,.58rem)!important;letter-spacing:0!important; }
}
@media(max-width:380px){
  .warranty-banner .timer-grid { gap:3px!important; }
  .warranty-banner .timer-box { padding:6px 1px!important; }
  .warranty-banner .timer-number { font-size:.82rem!important; }
  .warranty-banner .timer-label { font-size:.45rem!important; }
}
html[data-theme="dark"] .site-header .nav-links .btn-nav-primary,
html[data-theme="dark"] .site-header .nav-links .btn-nav-primary:hover {
  background:linear-gradient(135deg,#4b85d1,#376eb4)!important;
  color:#f7fbff!important;border-color:#6397d7!important;
  box-shadow:0 4px 12px rgba(44,96,164,.24)!important;
}
/* Keep the selected state visible above generic dark-mode button styling. */
html[data-theme="dark"] .product-pill-btn.active,
html[data-theme="dark"] .settings-pill-btn.active {
  background:#315f9d!important;
  color:#f7fbff!important;
  border:1px solid #79a9e8!important;
  box-shadow:inset 0 0 0 1px rgba(191,219,254,.12),0 3px 10px rgba(22,57,102,.28)!important;
}
html[data-theme="dark"] .product-pill-btn:not(.active):hover,
html[data-theme="dark"] .settings-pill-btn:not(.active):hover {
  background:#263b58!important;
  color:#f1f7ff!important;
  border-color:#5a78a0!important;
}
/* Let the desktop admin header and workspace use the full viewport width. */
@media(min-width:901px) {
  .admin-header .nav-wrapper { width:100%; max-width:none; padding-inline:clamp(18px,2.2vw,42px); }
  .admin-layout-wrapper { width:100%; max-width:none; margin:0; }
  .admin-sidebar { width:280px; border-radius:0; }
  .admin-content-area { min-width:0; flex:1 1 auto; padding-inline:clamp(18px,2.2vw,42px); }
}

/* Expand the remaining admin tools to use the full content column. */
#tabReceipts > .claim-card,
#tabButtonLinks > .claim-card,
#tabNotifications > .claim-card,
#tabLiveChat > .admin-livechat-shell,
#tabSettings > .claim-card {
  width:100%;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Restore contrast in the admin receipt editor when dark mode is active. */
html[data-theme="dark"] #modalOrderReceipt .form-group:has(#admRecSellerMessage) label,
html[data-theme="dark"] #modalOrderReceipt #admRecLinkProdukBlock > label,
html[data-theme="dark"] #modalOrderReceipt .form-group:has(#admRecWarrantyClaimNote) label {
  color:#dbeafe!important;
}
html[data-theme="dark"] #modalOrderReceipt #admRecSellerMessage {
  background:#332a17!important;
  border-color:#78541b!important;
  color:#fde68a!important;
}
html[data-theme="dark"] #modalOrderReceipt #admRecLinkProdukBlock {
  background:#142d2a!important;
  border-color:#26705c!important;
  color:#d1fae5!important;
}
html[data-theme="dark"] #modalOrderReceipt #admRecLinkProdukBlock > label,
html[data-theme="dark"] #modalOrderReceipt #admRecLinkProdukBlock label {
  color:#a7f3d0!important;
}
html[data-theme="dark"] #modalOrderReceipt #admRecWarrantyClaimNote {
  background:#20284b!important;
  border-color:#5968bd!important;
  color:#e0e7ff!important;
}
html[data-theme="dark"] #modalOrderReceipt .token-highlight-box > div:first-child {
  color:#c7d2fe!important;
}
html[data-theme="dark"] #modalOrderReceipt #admRecTotalAmount {
  color:#6ee7b7!important;
}
html[data-theme="dark"] #modalOrderReceipt .btn-product-access {
  background:#167355!important;
  color:#ecfdf5!important;
  border-color:#278c6a!important;
}

/* Give the product and guide editors more room on desktop. */
@media(min-width:901px) {
  #modalProduct .modal-box {
    width:min(1180px,96vw);
    max-width:1180px!important;
  }
  #modalMaterial .modal-box {
    width:min(1000px,94vw);
    max-width:1000px!important;
  }
}