@font-face {
  font-family: 'Zona Pro Bold';
  src: url('/assets/fonts/FontsFree-Net-ZonaPro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('/assets/fonts/HelveticaNowText-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('/assets/fonts/HelveticaNowText-RegIta.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('/assets/fonts/HelveticaNowText-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('/assets/fonts/HelveticaNowText-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Text';
  src: url('/assets/fonts/HelveticaNowText-Thin.ttf') format('truetype');
  font-weight: 100;
  font-display: swap;
}

:root {
  --font-primary: 'Zona Pro Bold', 'Helvetica Now Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-secondary: 'Helvetica Now Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #eeeeee;
  --bg-card: #ffffff;
  --text-primary: #111111;
  --text-secondary: #555555;
  --text-muted: #888888;
  --border: #e0e0e0;
  --border-light: #eeeeee;
  --brand: #000000;
  --brand-hover: #333333;
  --brand-light: #f5f5f5;
  --success: #16a34a;
  --success-bg: #dcfce7;
  --warning: #ca8a04;
  --warning-bg: #fef9c3;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --info: #2563eb;
  --info-bg: #dbeafe;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --drawer-bg: rgba(255,255,255,0.3);
}

html.dark {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #1a1a1a;
  --bg-card: #1a1a1a;
  --text-primary: #f0f0f0;
  --text-secondary: #aaaaaa;
  --text-muted: #666666;
  --border: #2a2a2a;
  --border-light: #222222;
  --brand: #ffffff;
  --brand-hover: #cccccc;
  --brand-light: #1a1a1a;
  --success: #22c55e;
  --success-bg: #052e16;
  --warning: #eab308;
  --warning-bg: #422006;
  --danger: #ef4444;
  --danger-bg: #450a0a;
  --info: #3b82f6;
  --info-bg: #172554;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --drawer-bg: rgba(10,10,10,0.3);
}

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

/* ==========================================================================
   Global overflow safety net
   Prevents any single oversized element (an image at native resolution, a
   long unbroken string, a fixed-width widget) from stretching the whole
   page and pushing content off the right edge on mobile. Elements that
   need their own horizontal scroll (mobile-tabs, table-wrap, carousels)
   already set overflow-x: auto on themselves, so this doesn't affect them.
   ========================================================================== */
html {
  width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* Media never exceeds its container, and keeps its aspect ratio */
img, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
svg { max-width: 100%; }

/* Long unbroken strings (emails, URLs, filenames) wrap instead of
   stretching their container */
.card-body, .card, table, td, th, p, .form-label, .empty-hint {
  overflow-wrap: break-word;
  word-break: break-word;
}

body {
  width: 100%;
  max-width: 100vw;
  font-family: var(--font-secondary);
  font-weight: 400;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: 700;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

.container { width: 95%; max-width: 1600px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }
@media (max-width: 767px) { .container { width: 95%; } }

.page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.content-wrap { flex: 1; }

.page-header { padding: 2rem 0; }
@media (max-width: 767px) { .page-header { padding: 1rem 0; } }
.page-header h1 { font-size: 1.875rem; }
@media (max-width: 767px) { .page-header h1 { font-size: 1.25rem; } }
.page-header p { color: var(--text-secondary); margin-top: 0.25rem; }

.section { padding: 4rem 0; }
.section-alt { background: var(--bg-secondary); }

.navbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
html.dark .navbar { background: rgba(10,10,10,0.3); border-bottom-color: rgba(255,255,255,0.07); box-shadow: 0 1px 8px rgba(0,0,0,0.15); }

.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 4rem; width: 95%; max-width: 1600px; margin: 0 auto; padding: 0 1rem;
}
.navbar-left { display: flex; align-items: center; gap: 2.5rem; }
.navbar-right { display: flex; align-items: center; gap: 0.75rem; }
@media (max-width: 767px) { .navbar-inner { width: 95%; } }

.navbar-logo { display: flex; align-items: center; flex-shrink: 0; }
.navbar-logo-img { height: 46px; width: auto; display: block; }
@media (max-width: 767px) { .navbar-logo-img { height: 44px; } }

.navbar-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .navbar-links { display: flex; } }
.navbar-links a, .nav-dropdown-trigger {
  font-size: 0.875rem; font-weight: 500; color: var(--text-secondary);
  transition: color 0.2s;
}
.navbar-links a:hover, .nav-dropdown-trigger:hover { color: var(--text-primary); }

.navbar-actions { display: flex; align-items: center; gap: 0.75rem; }

/* ===== NOTIFICATION BELL (left side, near logo) ===== */
.navbar-notif-wrap { position: relative; display: flex; align-items: center; }
.navbar-bell {
  background: none; border: none; color: var(--text-secondary); cursor: pointer;
  padding: 0.25rem; display: flex; align-items: center; position: relative;
  transition: color 0.2s;
}
.navbar-bell:hover { color: var(--text-primary); }
.notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  background: var(--danger); color: #fff; border-radius: 50%;
  font-size: 0.625rem; font-weight: 700; display: flex; align-items: center;
  justify-content: center; padding: 0 3px; pointer-events: none; display: none;
}
.notif-badge.show { display: flex; }

.notif-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 360px; max-width: calc(100vw - 2rem); max-height: 70vh; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15); overflow: hidden; flex-direction: column;
}
.notif-dropdown.open { display: flex; }
.notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
  font-size: 0.875rem; font-weight: 600;
}
.notif-mark-read {
  background: none; border: none; color: var(--brand); font-size: 0.75rem;
  cursor: pointer; font-weight: 500;
}
.notif-mark-read:hover { text-decoration: underline; }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
  display: flex; gap: 0.75rem; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light); cursor: pointer;
  transition: background 0.15s; text-decoration: none; color: inherit;
}
.notif-item:hover { background: var(--bg-secondary); }
.notif-item.unread { background: var(--bg-tertiary); }
.notif-item:last-child { border-bottom: none; }
.notif-item-icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
}
.notif-item-icon.admin { background: #dbeafe; color: #2563eb; }
.notif-item-icon.invoice { background: #dcfce7; color: #16a34a; }
.notif-item-icon.order { background: #fef3c7; color: #d97706; }
.notif-item-icon.system { background: #f3e8ff; color: #9333ea; }
.notif-item-icon.welcome { background: #dbeafe; color: #2563eb; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; }
.notif-item-msg { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-item.expanded .notif-item-msg { -webkit-line-clamp: unset; display: block; }
.notif-item-time { font-size: 0.6875rem; color: var(--text-muted); margin-top: 0.25rem; }
.notif-empty { padding: 2rem 1rem; text-align: center; font-size: 0.8125rem; color: var(--text-muted); }

/* ===== PROFILE AVATAR DROPDOWN ===== */
.navbar-avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Zona Pro Bold', sans-serif; font-size: 0.75rem; cursor: pointer;
  background: var(--bg-secondary); color: var(--text-primary); flex-shrink: 0;
  border: none; padding: 0; transition: opacity 0.2s;
}
.navbar-avatar:hover { opacity: 0.8; }
.navbar-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.navbar-profile-wrap { position: relative; display: flex; align-items: center; }

.profile-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 180px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15); overflow: hidden;
}
.profile-dropdown.open { display: block; }
.profile-dropdown-header {
  padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.profile-dropdown-item {
  display: block; padding: 0.625rem 1rem; font-size: 0.8125rem;
  color: var(--text-secondary); text-decoration: none; transition: background 0.15s;
}
.profile-dropdown-item:hover { background: var(--bg-secondary); color: var(--text-primary); }

.mobile-toggle {
  display: block; background: none; border: none; color: var(--text-secondary);
  padding: 0.5rem; cursor: pointer;
}
@media (min-width: 768px) { .mobile-toggle { display: none; } }

/* ===== MOBILE DRAWER (70% from right, push page-wrap) ===== */
.drawer-overlay {
  display: none; position: fixed; top: 4rem; left: 0; right: 0; bottom: 0; z-index: 45;
  background: rgba(0,0,0,0.3);
}
.drawer-overlay.open { display: block; }

.mobile-drawer {
  position: fixed; top: 4rem; right: -100vw; width: 100vw;
  height: 92vh; z-index: 50;
  background: var(--drawer-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transition: right 0.3s ease;
}
.mobile-drawer.open { right: 0; }

.mobile-drawer-links {
  flex: 1; overflow-y: auto; padding: 0.75rem 0;
}
.mobile-drawer-links a {
  display: block; padding: 0.75rem 1.25rem; font-size: 0.9375rem;
  font-weight: 500; color: var(--text-primary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-drawer-links .drawer-signin {
  margin: 0.5rem 1rem; padding: 0.75rem; text-align: center;
  background: var(--brand); color: var(--bg-primary); border-radius: var(--radius-sm);
}
.mobile-drawer-links .drawer-signin:hover { background: var(--brand-hover); color: var(--bg-primary); }

/* Push page-wrap when drawer is open */
@media (max-width: 767px) {
  .page-wrap.drawer-open { overflow: hidden; }
  .page-wrap.drawer-open .navbar { position: fixed; top: 0; left: 0; right: 0; background: var(--bg-card); backdrop-filter: none; -webkit-backdrop-filter: none; }
  html.dark .page-wrap.drawer-open .navbar { background: var(--bg-card); }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; font-size: 0.875rem; font-weight: 500;
  font-family: var(--font-secondary);
  padding: 0.5rem 1rem; border-radius: var(--radius-sm);
  border: none; cursor: pointer; transition: all 0.2s;
  text-decoration: none; line-height: 1.5;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--brand); color: var(--bg-primary); }
.btn-primary:hover { background: var(--brand-hover); color: var(--bg-primary); }
.btn-whatsapp { background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
.btn-whatsapp:hover { background: #20bd5a; color: #fff; }
@media (max-width: 576px) {
  .btn-label { display: none; }
  .btn-whatsapp { min-width: unset; padding: 0.75rem; }
}

.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); }
.btn-secondary:hover { background: var(--border); }

.btn-outline {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-primary);
}
.btn-outline:hover { background: var(--bg-secondary); }

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { opacity: 0.9; }

.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }

.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.card-header {
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: 1rem; }
.card-body { padding: 1.5rem; }
.card-footer {
  padding: 1rem 1.5rem; border-top: 1px solid var(--border);
}

.form-group { margin-bottom: 1rem; }
.form-label {
  display: block; font-size: 0.875rem; font-weight: 500;
  color: var(--text-primary); margin-bottom: 0.375rem;
}
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 0.5rem 0.75rem; font-size: 0.875rem;
  font-family: var(--font-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-primary); color: var(--text-primary);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}
html.dark .form-input:focus, html.dark .form-select:focus, html.dark .form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}
.form-input.error { border-color: var(--danger); }
.form-error { color: var(--danger); font-size: 0.8125rem; margin-top: 0.25rem; }
.form-textarea { resize: vertical; min-height: 100px; }

.badge {
  display: inline-flex; align-items: center;
  padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 500;
  border-radius: 9999px;
}
.badge-default { background: var(--bg-tertiary); color: var(--text-primary); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th {
  text-align: left; padding: 0.75rem 1rem; font-size: 0.75rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
td {
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
tr:hover td { background: var(--bg-secondary); }

.stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-card { padding: 1rem; }
.stat-card .stat-label { font-size: 0.75rem; color: var(--text-secondary); }
.stat-card .stat-value { font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem; }

.grid-2 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

.grid-3 { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.grid-4 { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.sidebar-layout { display: flex; flex: 1; min-width: 0; }
.sidebar {
  width: 16rem; flex-shrink: 0; display: none;
  border-right: 1px solid var(--border); padding: 1.5rem 1rem;
}
@media (min-width: 1024px) { .sidebar { display: block; } }

.sidebar-title {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); padding: 0 0.75rem; margin-bottom: 0.75rem;
}

.sidebar-nav { display: flex; flex-direction: column; gap: 0.125rem; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem; font-size: 0.875rem; font-weight: 500;
  border-radius: var(--radius-sm); color: var(--text-secondary);
  transition: all 0.2s;
}
.sidebar-nav a:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.sidebar-nav a.active {
  background: var(--brand-light); color: var(--brand);
}

.main-content { flex: 1; padding: 1.5rem 1rem; min-width: 0; }
@media (min-width: 640px) { .main-content { padding: 1.5rem; } }
@media (min-width: 1024px) { .main-content { padding: 2rem; } }

.mobile-tabs {
  display: flex; gap: 0.5rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 20px), transparent calc(100% - 4px));
  mask-image: linear-gradient(to right, black 0%, black calc(100% - 20px), transparent calc(100% - 4px));
}
.mobile-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 1023px) {
  .mobile-tabs { position: sticky; top: 4rem; z-index: 35; background: var(--bg-primary); padding: 0.5rem 0.75rem 0.5rem 0; margin-top: 0; }
  .mobile-tabs a { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
}
@media (max-width: 480px) {
  .mobile-tabs a { padding: 0.35rem 0.5rem; font-size: 0.75rem; gap: 0.35rem; }
}
@media (min-width: 1024px) { .mobile-tabs { display: none; } }

.mobile-tabs a {
  white-space: nowrap; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  border-radius: var(--radius-sm); background: var(--bg-tertiary);
  color: var(--text-secondary); transition: all 0.2s; flex-shrink: 0;
}
.mobile-tabs a:hover { background: var(--border); }
.mobile-tabs a.active { background: var(--brand); color: var(--bg-primary); }

.hero {
  padding: 6rem 0; text-align: center;
}
.hero h1 {
  font-size: 2.25rem; letter-spacing: -0.025em;
  max-width: 48rem; margin: 0 auto;
}
@media (min-width: 768px) { .hero h1 { font-size: 3.75rem; } }
.hero h1 span { color: var(--brand); }
.hero p {
  margin-top: 1.5rem; font-size: 1.125rem; color: var(--text-secondary);
  max-width: 36rem; margin-left: auto; margin-right: auto;
}
.hero-actions { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.footer {
  border-top: 1px solid var(--border); background: var(--bg-secondary);
  padding: 3rem 0; margin-top: auto;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-col h3 { font-size: 0.875rem; margin-bottom: 1rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { font-size: 0.875rem; color: var(--text-secondary); }
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom {
  margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border);
  text-align: center; font-size: 0.875rem; color: var(--text-muted);
}

.product-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); width: 100%; }
@media (min-width: 700px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  cursor: pointer; transition: box-shadow 0.2s, outline 0.2s;
  outline: 2px solid transparent; overflow: hidden;
}
.product-card:hover {
  box-shadow: var(--shadow-md); outline: 2px solid #A91414;
}
.product-card-img {
  width: 100%; aspect-ratio: 1/1; overflow: hidden;
  background: var(--bg-secondary); padding: 0.35rem;
}
.product-card-img img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit;
}
.product-card-body { padding: 0.6rem 0.5rem 0.75rem; }
.product-card-body h3 { font-size: 0.9rem; line-height: 1.25; margin: 0; }
.product-card-cta { display: block; margin-top: 0.2rem; font-size: 0.7rem; font-weight: 600; color: var(--service); }
.product-card p { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1rem; }
.product-card .price { color: var(--brand); font-weight: 600; font-size: 0.875rem; }

.variant-list { display: flex; flex-direction: column; gap: 0.75rem; }
.variant-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.2s; text-align: left; width: 100%;
  background: var(--bg-card); color: var(--text-primary); font-size: 0.875rem;
}
.variant-option:hover { border-color: var(--text-muted); }
.variant-option.selected {
  border-color: var(--brand); background: var(--brand-light);
}

.variant-name { font-weight: 500; }
.variant-attrs { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; }
.variant-price { font-weight: 700; color: var(--brand); }

.filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; }
.filter-btn {
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-tertiary); color: var(--text-secondary);
}
.filter-btn:hover { background: var(--border); }
.filter-btn.active { background: var(--brand); color: var(--bg-primary); }

/* ===== AUTH PAGES (full 100vh layout) ===== */
.auth-page {
  display: flex; min-height: calc(100vh - 4rem); flex: 1;
}
.auth-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 100%; min-height: calc(100vh - 4rem);
}
.auth-left { display: none; }
.auth-tagline { display: none; }

.auth-graphic {
  display: none; position: relative; overflow: hidden;
  background: var(--bg-secondary);
}
@media (min-width: 768px) { .auth-graphic { display: block; } }

.auth-slider {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.auth-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s ease;
}
.auth-slide.active { opacity: 1; }
.auth-slider-dots {
  position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.5rem; z-index: 2;
}
.auth-slider-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4); cursor: pointer;
  transition: background 0.2s, width 0.2s;
}
.auth-slider-dots span.active { background: #fff; width: 22px; border-radius: 4px; }
.auth-slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #fff; z-index: 2; cursor: pointer;
  transition: background 0.15s; padding: 0;
}
.auth-slider-arrow:hover { background: rgba(255,255,255,0.3); }
.auth-slider-arrow svg { width: 16px; height: 16px; }
.auth-slider-prev { left: 1rem; }
.auth-slider-next { right: 1rem; }

.auth-right {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 2rem;
}

@media (max-width: 767px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-right { justify-content: center; padding: 2rem 1rem; }
  .auth-card { max-width: 100%; min-width: 0; }
  .auth-card .card-body { padding: 2rem; }
}
.auth-card {
  width: 100%; max-width: 27rem; overflow: visible;
}
.auth-card .card-body {
  padding: 2.5rem;
}
.auth-card .form-group { margin-bottom: 1.25rem; }
.auth-divider {
  position: relative; text-align: center; margin: 1.75rem 0;
}
#googleButton { min-height: 44px; display: flex; justify-content: center; width: 100%; }
#googleButton > div { width: 100% !important; max-width: 100%; display: flex; justify-content: center; }
#googleButton iframe, #googleButton .g_id_signin { max-width: 100%; margin: 0 auto; }
.auth-divider::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--border);
}
.auth-divider span {
  position: relative; background: var(--bg-card); padding: 0 0.75rem;
  font-size: 0.75rem; text-transform: uppercase; color: var(--text-muted);
}

/* ===== PASSWORD EYEBALL TOGGLE ===== */
.password-wrap {
  position: relative;
}
.password-wrap .form-input {
  padding-right: 2.75rem;
}
.password-toggle {
  position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 0.375rem; cursor: pointer;
  color: var(--text-muted); line-height: 0;
}
.password-toggle:hover { color: var(--text-primary); }
.password-toggle svg { width: 1.125rem; height: 1.125rem; }
.password-toggle .eye-off { display: none; }
.password-toggle.visible .eye-on { display: none; }
.password-toggle.visible .eye-off { display: block; }

/* ===== PASSWORD STRENGTH INDICATOR ===== */
.strength-bar {
  display: flex; gap: 0.375rem; margin-top: 0.5rem;
}
.strength-segment {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--border-light); transition: background 0.2s;
}
.strength-segment.active.weak { background: var(--danger); }
.strength-segment.active.fair { background: var(--warning); }
.strength-segment.active.good { background: var(--info); }
.strength-segment.active.strong { background: var(--success); }

.strength-text {
  font-size: 0.75rem; margin-top: 0.25rem; min-height: 1rem;
}
.strength-text.weak { color: var(--danger); }
.strength-text.fair { color: var(--warning); }
.strength-text.good { color: var(--info); }
.strength-text.strong { color: var(--success); }

/* ===== PROFILE AVATAR SECTION ===== */
.profile-avatar-section {
  display: flex; align-items: center; gap: 1.25rem;
  padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.profile-avatar-wrap {
  position: relative; width: 80px; height: 80px; border-radius: 50%;
  cursor: pointer; flex-shrink: 0; overflow: hidden;
}
.profile-avatar {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Zona Pro Bold', sans-serif; font-size: 1.5rem;
  background: var(--bg-secondary); color: var(--text-primary); overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar-overlay {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s; color: #fff;
}
.profile-avatar-wrap:hover .profile-avatar-overlay { opacity: 1; }
.profile-avatar-info h4 { margin: 0 0 0.25rem; font-size: 0.9375rem; }
.profile-avatar-info p { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
.avatar-btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.profile-avatar-info .btn-sm { font-size: 0.75rem; }

/* ===== THEME TOGGLE IN PROFILE ===== */
.theme-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0; border-bottom: 1px solid var(--border);
}
.theme-toggle-row:last-child { border-bottom: none; }
.theme-toggle-label { font-size: 0.875rem; font-weight: 500; }
.theme-toggle-desc { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.125rem; }

.toggle-switch {
  position: relative; width: 3rem; height: 1.5rem; flex-shrink: 0;
  background: var(--border); border-radius: 9999px; cursor: pointer;
  transition: background 0.2s; border: none;
}
.toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--bg-primary); transition: transform 0.2s, background 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle-switch.active { background: var(--brand); }
.toggle-switch.active::after { transform: translateX(1.5rem); background: #fff; }
html.dark .toggle-switch { background: var(--bg-secondary); border: 1.5px solid var(--border); }
html.dark .toggle-switch.active { background: var(--brand); border-color: var(--brand); }

.toggle-switch-sm { width: 2.25rem; height: 1.25rem; }
.toggle-switch-sm::after { width: 0.9rem; height: 0.9rem; top: 1.75px; left: 1.75px; }
.toggle-switch-sm.active::after { transform: translateX(1rem); }

.theme-toggle-nav {
  display: flex !important; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
}
.drawer-theme-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0; cursor: pointer; user-select: none;
  font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary);
  transition: background 0.2s, color 0.2s;
}
.drawer-bottom .drawer-theme-toggle { border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
.nav-service-icon { width: 18px; height: 18px; vertical-align: middle; margin-right: 0.5rem; }
.sidebar-service-icon { width: 18px; height: 18px; vertical-align: middle; margin-right: 0.5rem; }

.btn-group { display: flex; gap: 0.5rem; }

.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 50;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.modal-content {
  position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  width: 100%; max-width: 32rem; max-height: 90vh; overflow-y: auto;
  padding: 1.5rem; margin: 1rem;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.modal-header h3 { font-size: 1.125rem; }
.modal-close {
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; padding: 0.25rem; font-size: 1.25rem;
}
.modal-close:hover { color: var(--text-primary); }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-muted { color: var(--text-muted); }
.text-brand { color: var(--brand); }
.fw-600 { font-weight: 600; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.divide-y > * + * { border-top: 1px solid var(--border); }

.spinner {
  width: 1.5rem; height: 1.5rem; border: 3px solid var(--border);
  border-top-color: var(--brand); border-radius: 50%; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-wrap { display: flex; align-items: center; justify-content: center; padding: 3rem; }

.alert {
  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  font-size: 0.875rem; margin-bottom: 1rem;
}
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-success { background: var(--success-bg); color: var(--success); }
.alert-warning { background: var(--warning-bg); color: var(--warning); }

.order-status-bar { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ===== HIDE / SHOW ON MOBILE ===== */
@media (max-width: 767px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .show-mobile { display: none !important; } }

.navbar-mobile-icons {
  display: flex; align-items: center; gap: 0.25rem;
  margin-right: 0.25rem;
}
.navbar-mobile-icons .navbar-cart-btn,
.navbar-mobile-icons .navbar-bell {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: var(--text-primary); background: none; border: none; cursor: pointer;
}
.navbar-mobile-icons .cart-badge,
.navbar-mobile-icons .notif-badge {
  position: absolute; top: 2px; right: 4px;
}
.navbar-actions .btn-ghost.show-mobile {
  font-size: 0.75rem; padding: 0.375rem 0.75rem; white-space: nowrap;
}

/* ===== DESKTOP SERVICES DROPDOWN ===== */
.nav-dropdown { position: relative; }
.nav-dropdown::after {
  content: ''; position: absolute; left: -2rem; right: -2rem;
  bottom: -2rem; height: 2rem;
}
.nav-dropdown-trigger { cursor: pointer; }
.nav-dropdown-arrow { font-size: 0.625rem; margin-left: 0.25rem; display: inline-block; }

.nav-dropdown-menu {
  display: none; position: fixed; top: 4rem; left: 0; right: 0;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  z-index: 100; padding: 1rem 1.5rem;
}
html.dark .nav-dropdown-menu {
  background: rgba(10,10,10,0.55);
  border-bottom-color: rgba(255,255,255,0.05);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover { display: block; }

.nav-dd-inner {
  max-width: 1600px; margin: 0 auto;
  display: flex; align-items: center; gap: 0;
}

.nav-dd-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm); text-decoration: none; color: inherit;
  transition: background .2s;
  flex: 1;
}
.nav-dd-item:hover { background: var(--bg-secondary); }

.nav-dd-icon {
  width: 32px; height: 32px; flex-shrink: 0;
}
.nav-dd-item span {
  font-size: 0.875rem; font-weight: 500; color: var(--text-primary);
  white-space: nowrap;
}

/* ===== MOBILE DRAWER SEARCH ===== */
.drawer-search {
  position: relative; margin: 0 1.25rem 0.75rem;
  display: flex; align-items: stretch; flex-wrap: wrap;
  border: 1.5px solid rgba(0,0,0,0.3); border-radius: var(--radius);
}
html.dark .drawer-search { border-color: rgba(255,255,255,0.35); }
.drawer-search-icon {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 40px;
  background: var(--bg-secondary); color: var(--text-muted);
  border-right: 1px solid rgba(0,0,0,0.1);
  border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px);
}
html.dark .drawer-search-icon { border-right-color: rgba(255,255,255,0.15); }
.drawer-search-input {
  flex: 1; padding: 0.7rem 0.75rem;
  font-size: 0.875rem; background: transparent; border: none;
  color: #111; outline: none;
  min-width: 0;
}
html.dark .drawer-search-input { color: #fff; }
.drawer-search-input::placeholder { color: #888; opacity: 0.8; }
html.dark .drawer-search-input::placeholder { color: #aaa; }

/* ===== SEARCH BAR (Desktop) ===== */
.navbar-search-wrap {
  position: relative; align-items: center;
  margin: 0 0.5rem;
  display: none;
}
@media (min-width: 768px) { .navbar-search-wrap { display: flex; } }
.navbar-search-icon {
  position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none; z-index: 1;
}
.navbar-search-input {
  width: 140px; padding: 0.375rem 0.5rem 0.375rem 1.875rem;
  font-size: 0.8125rem;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-sm);
  color: var(--text-primary); outline: none; transition: width 0.2s;
}
html.dark .navbar-search-input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
}
.navbar-search-input:focus {
  width: 220px; max-width: 40vw; border-color: var(--brand);
}

/* ===== SEARCH DROPDOWN (shared desktop + mobile) ===== */
.search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 999;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  max-height: 360px; overflow-y: auto; display: none; margin-top: 4px;
}
html.dark .search-dropdown {
  background: rgba(10,10,10,0.75);
  border-color: rgba(255,255,255,0.05);
}
.search-dropdown.open { display: block; }
.search-dropdown.mobile {
  position: static; flex-basis: 100%; width: 100%;
  margin-top: 0; box-shadow: none; border: none; border-radius: 0;
  max-height: 280px; top: auto; left: auto; right: auto; z-index: auto;
  background: var(--bg-card);
}
.search-dropdown-item-mobile { gap: 0.5rem; padding: 0.5rem 0.5rem; }
.search-dropdown-item-mobile .search-dropdown-img { width: 32px; height: 32px; }
.search-dropdown-item-mobile .search-dropdown-name { font-size: 0.8125rem; }
.search-dropdown-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem; cursor: pointer; text-decoration: none;
  color: var(--text-primary); border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.search-dropdown-item:last-child { border-bottom: none; }
.search-dropdown-item:hover, .search-dropdown-item.highlighted { background: var(--bg-secondary); }
.search-dropdown-img {
  width: 40px; height: 40px; border-radius: 4px; object-fit: cover;
  flex-shrink: 0; background: var(--bg-secondary);
}
.search-dropdown-info { flex: 1; min-width: 0; }
.search-dropdown-name { font-size: 0.875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-dropdown-cat { font-size: 0.75rem; color: var(--text-muted); }
.search-dropdown-empty { padding: 0.75rem; text-align: center; color: var(--text-muted); font-size: 0.8125rem; }

/* ===== MOBILE DRAWER BOTTOM ===== */
.drawer-bottom {
  border-top: 1px solid var(--border); padding: 0.75rem;
  flex-shrink: 0; position: sticky; bottom: 0;
  background: var(--bg-card);
}
html.dark .drawer-bottom {
  background: var(--bg-card);
}
.drawer-bottom-user {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.drawer-bottom-avatar {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Zona Pro Bold', sans-serif; font-size: 1rem;
  background: var(--bg-secondary); color: var(--text-primary);
  text-decoration: none;
}
.drawer-bottom-avatar img { width: 100%; height: 100%; object-fit: cover; }
.drawer-bottom-info { flex: 1; min-width: 0; }
.drawer-bottom-name { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.drawer-bottom-link {
  display: inline-block; font-size: 0.75rem; color: var(--text-muted);
  text-decoration: none; margin-right: 0.75rem;
}
.drawer-bottom-link:hover { color: var(--brand); }
.drawer-signin {
  display: block; padding: 0.75rem; text-align: center;
  background: var(--brand); color: var(--bg-primary); border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600;
}
.drawer-signin:hover { background: var(--brand-hover); color: var(--bg-primary); }

/* ===== DRAWER ACCORDION ===== */
.drawer-accordion { border-bottom: none; }
.drawer-accordion-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.75rem 1.25rem; font-size: 0.9375rem;
  font-weight: 500; color: var(--text-primary);
  background: none; border: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.drawer-accordion-arrow { font-size: 0.625rem; transition: transform 0.2s; }
.drawer-accordion-trigger.open .drawer-accordion-arrow { transform: rotate(180deg); }
.drawer-accordion-body {
  display: none; background: transparent;
}
.drawer-accordion-body.open { display: block; }
.drawer-accordion-body a {
  padding-left: 2rem !important; font-size: 0.875rem !important;
}

/* ===== DRAWER NOTIFICATION OVERLAY ===== */
.drawer-notif-overlay {
  display: none; position: absolute; inset: 0; z-index: 10;
  background: var(--bg-card); flex-direction: column;
}
.drawer-notif-overlay.open { display: flex; }
.drawer-notif-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  font-weight: 600; font-size: 0.9375rem;
}
.drawer-notif-mark-read {
  margin-left: auto; background: none; border: none;
  font-size: 0.75rem; color: var(--brand); cursor: pointer;
  padding: 0.25rem;
}
.drawer-notif-close {
  background: none; border: none; font-size: 1.25rem;
  color: var(--text-muted); cursor: pointer; padding: 0 0.25rem;
  line-height: 1;
}
.drawer-notif-close:hover { color: var(--text-primary); }
.drawer-notif-list {
  flex: 1; overflow-y: auto; padding: 0.5rem 0;
}
.drawer-notif-list .notif-item:first-child { border-top: none; }

/* ===== CART ICON / BADGE ===== */
.navbar-cart-wrap { position: relative; }
.navbar-cart-btn {
  display: flex; align-items: center; color: var(--text-secondary);
  text-decoration: none; padding: 0.375rem; position: relative;
}
.navbar-cart-btn:hover { color: var(--text-primary); }
.cart-badge {
  display: none; position: absolute; top: -2px; right: -4px;
  min-width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); color: var(--bg-primary);
  font-size: 0.625rem; font-weight: 700;
  align-items: center; justify-content: center; padding: 0 3px;
}
.cart-badge.show { display: flex; }

/* ===== STORE PAGE ===== */
.store-categories {
  display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 1rem;
  margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch;
}
.store-cat-btn {
  white-space: nowrap; padding: 0.5rem 1rem; font-size: 0.875rem;
  font-weight: 500; border-radius: var(--radius-sm);
  background: var(--bg-tertiary); color: var(--text-secondary);
  border: none; cursor: pointer; transition: all 0.2s;
}
.store-cat-btn:hover { background: var(--border); }
.store-cat-btn.active { background: var(--brand); color: var(--bg-primary); }
.store-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.store-card {
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.store-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store-card-img {
  aspect-ratio: 3/2; overflow: hidden; background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center;
}
.store-card-img img, .store-card-img svg { width: 100%; height: 100%; object-fit: contain; }
.store-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.store-card-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 0.25rem; }
.store-card-body h3 { font-size: 0.9375rem; margin: 0 0 0.25rem; }
.store-card-price { font-weight: 700; color: var(--brand); margin-top: auto; }

/* ===== CHECKOUT PAGE ===== */
.checkout-layout {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 767px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-section { min-width: 0; }
.payment-options { display: flex; flex-direction: column; gap: 0.5rem; }
.payment-option {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.2s;
}
.payment-option:hover { border-color: var(--brand); }
.payment-option input[type="radio"] { margin-top: 0.125rem; }
.payment-option-content { display: flex; flex-direction: column; }
.payment-option-content strong { font-size: 0.875rem; }
.payment-option-content span { font-size: 0.75rem; }

/* ===== PRODUCT PAGE ===== */
.product-layout {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr 1fr; max-width: 100%;
}
.product-layout-new {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr 1fr; max-width: 100%;
  align-items: start;
}
.product-config { min-width: 0; }
.product-preview { min-width: 0; position: sticky; top: 2rem; align-self: flex-start; }

@media (max-width: 767px) {
  .product-layout { grid-template-columns: 1fr; }
  .product-layout-new {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .product-preview { order: 0; min-width: 0; overflow: hidden; width: 100%; position: static; }
  .product-config { order: 1; width: 100%; }
  .product-layout-new .pricing-card { order: 2; margin-top: 1.5rem; width: 100%; }
  .product-preview .product-gallery { position: static; max-width: 100%; overflow: hidden; }
  .product-main-image { max-width: 100%; }
  .product-main-image img { max-width: 100%; }
  .product-thumbnails { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .product-thumb { width: 56px; height: 56px; }
}
.product-artwork-badge {
  position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2;
  background: var(--brand); color: var(--bg-primary);
  font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.25rem 0.75rem; border-radius: var(--radius-sm);
}
.product-main-image {
  background: var(--bg-secondary); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4/3; margin-bottom: 0.75rem; position: relative;
}
.product-main-image img { width: 100%; height: 100%; object-fit: contain; }
.product-main-image .product-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.product-placeholder svg { width: 80%; height: 80%; }
.product-thumbnails { display: flex; gap: 0.5rem; overflow-x: auto; }
.product-thumb {
  width: 64px; height: 64px; flex-shrink: 0;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer; padding: 0; background: none;
}
.product-thumb.active { border-color: var(--brand); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }

.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 40px; height: 40px;
  background: rgba(0,0,0,0.5); color: #fff;
  border: none; border-radius: 50%;
  font-size: 1.5rem; line-height: 1;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: background 0.2s;
}
.gallery-arrow:hover { background: rgba(0,0,0,0.75); }
.gallery-arrow-prev { left: 0.75rem; }
.gallery-arrow-next { right: 0.75rem; }
.product-breadcrumb { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.product-breadcrumb a { color: var(--brand); text-decoration: none; }
.product-title { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.5rem; }
.product-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }
.product-desc p { margin-bottom: 0.5rem; }

/* Artwork selector — replaces dropdown with visual toggle */
.artwork-selector { display:flex; gap:0.75rem; align-items:stretch; }
.artwork-upload-zone {
  flex:1; border:2px dashed var(--border); border-radius:var(--radius);
  padding:1.25rem; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.35rem; transition:border-color 0.15s, background 0.15s;
  min-height:80px;
}
.artwork-upload-zone:hover { border-color:var(--brand); background:var(--bg-secondary); }
.artwork-upload-zone.selected { border-color:var(--brand); background:rgba(0,113,206,0.06); }

/* Web/App Dashboard */
.webapp-card { margin-bottom:1.25rem; overflow: hidden; }
.webapp-card-header {
  display:flex; align-items:center; gap:0.5rem;
  font-weight:600; font-size:0.875rem; padding:1rem 1.25rem 0;
}
.webapp-card-header svg { width:18px; height:18px; color:var(--brand); flex-shrink:0; }
.webapp-card-body { padding:0.75rem 1.25rem 1.25rem; overflow-wrap: break-word; word-break: break-word; }
.webapp-stat-row { display:flex; justify-content:space-between; align-items:center; padding:0.35rem 0; font-size:0.8125rem; gap:0.5rem; }
.webapp-stat-label { color:var(--text-muted); flex-shrink: 0; }
.webapp-stat-value { font-weight:500; text-align: right; min-width: 0; word-break: break-word; }
.webapp-section-title { font-size:0.8125rem; font-weight:600; margin:0.75rem 0 0.5rem; padding-top:0.75rem; border-top:1px solid var(--border); }
.webapp-page-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:0.5rem 0; border-bottom:1px solid var(--border); font-size:0.8125rem;
}
.webapp-page-row:last-child { border-bottom:none; }
.webapp-page-name { display:flex; align-items:center; gap:0.5rem; }
.webapp-page-actions { display:flex; gap:0.25rem; }
.webapp-badge {
  display:inline-block; font-size:0.625rem; padding:0.125rem 0.4rem;
  border-radius:9999px; background:var(--bg-secondary); color:var(--text-muted); font-weight:600;
}
.webapp-badge-success { background:rgba(34,197,94,0.12); color:var(--success); }

/* GoatCounter analytics (theme-aware) */
.gc-stat-box { padding:0.5rem; background:var(--info-bg); border-radius:6px; text-align:center; }
.gc-stat-value { font-size:1.25rem; font-weight:700; color:var(--text-primary); }
.gc-stat-label { font-size:0.7rem; color:var(--text-muted); }
.gc-tab-btn {
  padding:0.3rem 0.6rem; font-size:0.75rem; border:none; cursor:pointer;
  background:none; border-radius:4px; color:var(--text-secondary); font-weight:400;
  transition:background 0.15s, color 0.15s;
}
.gc-tab-btn:hover { background:var(--bg-tertiary); }
.gc-tab-btn.active { background:var(--brand); color:var(--bg-primary); font-weight:600; }
.gc-tab-bar { display:flex; gap:0.25rem; flex-wrap:wrap; margin-bottom:0.75rem; border-bottom:1px solid var(--border); padding-bottom:0.25rem; }
.gc-bar-row { display:flex; align-items:center; gap:0.35rem; margin-bottom:0.25rem; font-size:0.75rem; }
.gc-bar-label { width:80px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-primary); }
.gc-bar-track { flex:1; height:14px; background:var(--bg-secondary); border-radius:3px; overflow:hidden; }
.gc-bar-fill { height:100%; border-radius:3px; min-width:3px; }
.gc-bar-fill.blue { background:var(--info); }
.gc-bar-fill.green { background:var(--success); }
.gc-bar-count { width:50px; text-align:right; font-weight:600; color:var(--text-primary); }
.gc-chart-wrap { display:flex; align-items:flex-end; gap:2px; height:50px; overflow-x:auto; padding-bottom:2px; }
.gc-chart-bar { width:8px; background:var(--info); border-radius:2px 2px 0 0; flex-shrink:0; }
.gc-row { display:flex; justify-content:space-between; padding:0.25rem 0; font-size:0.75rem; border-bottom:1px solid var(--border-light); color:var(--text-primary); }
.gc-row-count { font-weight:600; color:var(--text-primary); }

/* Web/App landing page packages */
.webapp-packages { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.25rem; margin:3rem 0; }
.webapp-package-card {
  position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem; display:flex; flex-direction:column; transition:box-shadow 0.2s;
}
.webapp-package-card:hover { box-shadow:var(--shadow-md); }
.webapp-package-featured { border-color:var(--brand); border-width:2px; box-shadow:0 0 0 1px var(--brand); }
.webapp-package-badge {
  position:absolute; top:-0.5rem; left:1rem;
  font-size:0.625rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  background:var(--bg-secondary); color:var(--text-muted); padding:0.125rem 0.6rem; border-radius:9999px;
}
.webapp-package-featured .webapp-package-badge { background:var(--brand); color:#fff; }
.webapp-package-name { font-size:1rem; font-weight:600; margin:0.5rem 0 0.75rem; }
.webapp-package-price { margin-bottom:1rem; }
.webapp-price-amount { font-size:1.5rem; font-weight:700; color:var(--brand); }
.webapp-price-period { font-size:0.8125rem; color:var(--text-muted); }
.webapp-package-features { list-style:none; padding:0; margin:0 0 1.5rem; flex:1; }
.webapp-package-features li {
  padding:0.35rem 0; font-size:0.8125rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:0.4rem;
}
.webapp-package-features li::before { content:'\2713'; color:var(--brand); font-weight:700; font-size:0.75rem; }

/* Signup summary */
.webapp-signup-summary { background:var(--bg-secondary); border-radius:var(--radius-sm); padding:1rem; margin-top:1.5rem; }
.webapp-signup-summary-row { display:flex; justify-content:space-between; padding:0.3rem 0; font-size:0.8125rem; }
.webapp-signup-summary-total { border-top:1px solid var(--border); margin-top:0.3rem; padding-top:0.5rem; font-weight:600; font-size:0.9375rem; }

/* Dashboard tabs */
.webapp-tabs { display:flex; gap:0; margin-bottom:1.25rem; border-bottom:2px solid var(--border); overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(to right, black 0%, black calc(100% - 20px), transparent calc(100% - 4px)); mask-image:linear-gradient(to right, black 0%, black calc(100% - 20px), transparent calc(100% - 4px)); }
.webapp-tabs::-webkit-scrollbar { display:none; }
.webapp-tab {
  padding:0.6rem 1.25rem; font-size:0.8125rem; font-weight:600; background:none; border:none;
  cursor:pointer; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:color 0.15s, border-color 0.15s; flex-shrink:0;
}
.webapp-tab:hover { color:var(--text-primary); }
.webapp-tab.active { color:var(--brand); border-bottom-color:var(--brand); }

/* SLA content */
.sla-content { font-size:0.8125rem; line-height:1.7; }
.sla-content h3 { font-size:0.9375rem; font-weight:600; margin:1.25rem 0 0.5rem; }
.sla-content h3:first-child { margin-top:0; }
.sla-content p { color:var(--text-secondary); margin-bottom:0.75rem; }
.artwork-upload-zone svg { width:24px; height:24px; color:var(--text-muted); }
.artwork-upload-zone.selected svg { color:var(--brand); }
.artwork-upload-zone .upload-label { font-size:0.8125rem; font-weight:600; }
.artwork-upload-zone .upload-hint { font-size:0.7rem; color:var(--text-muted); }
.artwork-design-option {
  width:180px; max-width:100%; flex:1 1 180px;
  border:2px solid var(--border); border-radius:var(--radius);
  padding:1.25rem 0.75rem; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.35rem; transition:border-color 0.15s, background 0.15s;
}
.artwork-design-option:hover { border-color:var(--brand); background:var(--bg-secondary); }
.artwork-design-option.selected { border-color:var(--brand); background:rgba(0,113,206,0.06); }
.artwork-design-option .artwork-radio { width:16px; height:16px; border:2px solid var(--border); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.artwork-design-option.selected .artwork-radio { border-color:var(--brand); }
.artwork-design-option.selected .artwork-radio::after { content:''; width:8px; height:8px; border-radius:50%; background:var(--brand); }
.artwork-design-option .design-label { font-size:0.8125rem; font-weight:600; }
.artwork-design-option .design-hint { font-size:0.7rem; color:var(--text-muted); }

/* Domain search hero */
.domain-hero {
  max-width:600px; margin:0 auto; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem 1.5rem; text-align:center;
  box-shadow:var(--shadow-sm);
}
.domain-hero-icon { margin-bottom:0.75rem; color:var(--brand); }
.domain-hero-title { font-size:1.15rem; font-weight:700; margin:0 0 0.15rem; }
.domain-hero-price { font-size:0.8125rem; color:var(--text-muted); margin-bottom:0.5rem; }
.domain-hero-price span { font-size:0.7rem; }
.domain-hero-desc { font-size:0.8125rem; color:var(--text-secondary); margin-bottom:1.25rem; }
.domain-search-wrap {
  display:flex; gap:0.5rem; max-width:420px; margin:0 auto;
}
.domain-search-input {
  flex:1; padding:0.6rem 0.85rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:0.875rem; outline:none; transition:border-color 0.15s;
}
.domain-search-input:focus { border-color:var(--brand); }
.domain-search-btn { white-space:nowrap; padding:0.6rem 1.5rem; }

/* Domain result rows (3 TLDs) */
.domain-results { margin-top:1rem; text-align:left; }
.domain-result-row {
  display:flex; align-items:center; gap:0.75rem;
  padding:0.6rem 0.75rem; border-bottom:1px solid var(--border);
  font-size:0.8125rem;
}
.domain-result-row:last-child { border-bottom:none; }
.domain-result-name { font-weight:700; min-width:4rem; color:var(--text-primary); }
.domain-result-status { flex:1; }
.domain-result-action { flex-shrink:0; }
.domain-status { font-weight:600; font-size:0.75rem; }
.domain-avail { color:var(--success); }
.domain-regd { color:var(--danger); }
.domain-unk { color:var(--text-muted); }

/* ===== WEB/APP SIGNUP — 50/50 SPLIT LAYOUT ===== */
.get-started-page-2 {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}
html.dark .get-started-page-2 { background: #111; }
.responsive-form {
  display: flex;
  flex-direction: row;
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.left-side {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  overflow: hidden;
}
html.dark .left-side { background: #111; }
.left-side .signup-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
}
.left-side .signup-service-icon {
  width: clamp(120px, 18vw, 220px);
  height: auto; opacity: 0.9;
}
.right-side {
  width: 50%;
  height: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 2rem 2.5rem;
}
html.dark .right-side { background: #212121; }
.right-side .signup-header {
  margin-bottom: 1.25rem;
}
.right-side .signup-header h1 {
  color: var(--text-primary);
  font-size: 1.6rem;
  margin: 0 0 0.15rem;
}
.right-side .signup-header .price {
  color: var(--text-muted);
  font-size: 0.95rem;
}
.right-side .form-group {
  margin-bottom: 1rem;
}
.right-side label {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.3rem;
}
.right-side .form-input,
.right-side .form-textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.right-side .form-input:focus,
.right-side .form-textarea:focus {
  border-color: var(--brand);
}
.right-side .form-textarea {
  resize: vertical;
  min-height: 60px;
}
.right-side .text-muted {
  color: var(--text-muted);
  font-size: 0.78rem;
}
.right-side .signup-summary {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.right-side .signup-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 0.3rem 0;
}
.right-side .signup-summary-total {
  border-top: 1px solid var(--border);
  margin-top: 0.3rem;
  padding-top: 0.6rem;
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1rem;
}
.right-side .payment-options {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0;
}
.right-side .payment-option {
  flex: 1;
  padding: 0.85rem 1rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
  background: var(--bg-secondary);
}
.right-side .payment-option:hover {
  border-color: var(--text-muted);
}
.right-side .payment-option.active {
  border-color: var(--brand);
  background: var(--bg-secondary);
}
.right-side .payment-option .pay-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.right-side .payment-option .pay-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.right-side .btn-primary {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 6px;
  background: var(--brand);
  color: var(--bg-primary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.right-side .btn-primary:hover { opacity: 0.9; }
.right-side .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.right-side .terms {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.right-side .terms a {
  color: var(--text-secondary);
  text-decoration: underline;
}
.right-side .domain-results {
  margin-top: 0.5rem;
}
.right-side .domain-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
  transition: all 0.15s;
}
.right-side .domain-result-row.domain-avail {
  cursor: pointer;
  border-color: var(--success);
  background: rgba(39, 174, 96, 0.1);
}
.right-side .domain-result-row.domain-avail:hover {
  background: rgba(39, 174, 96, 0.18);
  border-color: var(--success);
}
.right-side .domain-result-row.domain-taken {
  border-color: var(--danger);
  background: rgba(192, 57, 43, 0.1);
  opacity: 0.7;
}
.right-side .domain-result-name {
  font-weight: 600;
  color: var(--text-primary);
}
.right-side .domain-avail { color: var(--success); }
.right-side .domain-taken { color: var(--danger); }
.right-side .domain-result-action {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.right-side .spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #555;
  border-top-color: #4361ee;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 0.4rem;
  vertical-align: middle;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Domain fields side-by-side on desktop */
.domain-fields {
  display: flex;
  gap: 1rem;
}
.domain-fields > .form-group {
  flex: 1;
  min-width: 0;
}

/* Horizontal check bar */
.domain-check-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.domain-check-bar-track {
  flex: 1;
  height: 4px;
  background: #333;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.domain-check-bar-fill {
  width: 30%;
  height: 100%;
  background: #4361ee;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
  animation: domainBar 0.9s ease-in-out infinite;
}
@keyframes domainBar {
  0%   { left: -30%; }
  100% { left: 100%; }
}
.domain-check-text {
  font-size: 0.78rem;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Radio options for domain handling */
.radio-options {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #444;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-size: 0.8rem;
  color: #ccc;
  flex: 1;
  min-width: 0;
}
.radio-option:hover {
  border-color: #666;
  background: #2a2a2a;
}
.radio-option input[type="radio"] {
  accent-color: #4361ee;
  width: 14px;
  height: 14px;
  margin: 0;
  flex-shrink: 0;
}
.radio-option:has(input:checked) {
  border-color: #4361ee;
  background: #1a1a3a;
  color: #fff;
}

@media (max-width: 768px) {
  .responsive-form {
    flex-direction: column;
  }
  .left-side {
    width: 100%;
    height: 35vh;
  }
  .right-side {
    width: 100%;
    height: 65vh;
    padding: 1.25rem 1.5rem;
  }
  .radio-options {
    flex-direction: column;
  }
}

/* Designing — Item detail page */
.item-detail-page .form-textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
}
.item-detail-page .form-input[type="date"] {
  max-width: 220px;
}
.ci-manual-count {
  white-space: nowrap;
}
.ci-manual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
}
.ci-manual-grid svg {
  pointer-events: none;
}
.ci-manual-folder {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.5rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.ci-manual-folder:hover {
  border-color: var(--info);
  box-shadow: 0 0 0 2px rgba(62,107,230,0.1);
  transform: translateY(-1px);
}
.ci-manual-folder-icon {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
  color: var(--text-secondary);
}
.ci-manual-folder-name {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}
.ci-manual-folder-count {
  font-size: 0.6rem;
  color: var(--info);
  margin-top: 0.2rem;
}
.ci-manual-folder.ci-selected,
.ci-manual-hslide.ci-selected {
  border-color: #C4B357;
  box-shadow: 0 0 0 2px rgba(196,179,87,0.2);
  background: rgba(196,179,87,0.06);
}

/* Dashboard stats overview */
.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.dash-stat {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 0.55rem 0.5rem;
  text-align: center;
}
.dash-stat-label {
  display: block;
  font-size: 0.62rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
}
.dash-stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* Dashboard active designs carousel */
.dash-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
}
.dash-carousel {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.35rem 0;
  flex: 1;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.dash-carousel::-webkit-scrollbar { display: none; }
.dash-carousel.grabbing { cursor: grabbing; scroll-behavior: auto; }
.dash-carousel-slide {
  flex: 0 0 220px;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  transition: border-color 0.2s;
}
.dash-carousel-slide:hover {
  border-color: var(--info);
}
.dash-carousel-img-wrap {
  width: 220px;
  height: 140px;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dash-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.dash-carousel-noimg {
  color: var(--text-muted);
}
.dash-carousel-info {
  padding: 0.5rem 0.6rem;
}
.dash-carousel-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-carousel-status {
  font-size: 0.68rem;
  font-weight: 600;
  margin-top: 0.15rem;
}
.carousel-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.carousel-arrow:hover {
  background: var(--bg-secondary);
  border-color: var(--info);
  color: var(--info);
}

/* CI Manual tab */
.ci-manual-hero {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(145deg, var(--bg-secondary), var(--bg-card));
  border: 1px dashed var(--border);
  border-radius: 16px;
  margin-bottom: 0.5rem;
}
.ci-manual-hero-icon {
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  opacity: 0.6;
}
.ci-manual-hero-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.ci-manual-hero-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 1.25rem;
  line-height: 1.5;
}
.ci-manual-hero-btn {
  font-size: 0.85rem;
}

/* CI Manual horizontal scroll (designed items) */
.ci-manual-horizontal-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.35rem 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.ci-manual-horizontal-scroll::-webkit-scrollbar { display: none; }
.ci-manual-horizontal-scroll.grabbing { cursor: grabbing; scroll-behavior: auto; }
.ci-manual-hslide {
  flex: 0 0 130px;
  scroll-snap-align: start;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--bg-card);
}
.ci-manual-hslide:hover {
  border-color: var(--info);
  box-shadow: 0 0 0 2px rgba(62,107,230,0.1);
}
.ci-manual-hslide-icon {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.35rem;
  color: var(--text-secondary);
}
.ci-manual-hslide-icon svg {
  pointer-events: none;
}
.ci-manual-hslide-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
.ci-manual-hslide-count {
  font-size: 0.6rem;
  color: var(--info);
  margin-top: 0.2rem;
}

/* Company Profile quick link */
.cp-quicklink {
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cp-quicklink:hover {
  border-color: var(--info);
  box-shadow: 0 0 0 2px rgba(62,107,230,0.1);
}

/* Brand identity preview in designing dashboard */
.brand-preview-thumb > div { max-width: 100% !important; width: auto !important; height: auto !important; max-height: 80px; }

/* Dashboard 2-column grid */
.design-dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* CI Item 2-column layout */
.ci-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.ci-col-detail {
  min-width: 0;
  position: sticky;
  top: 1rem;
}
.ci-col-preview {
  min-width: 0;
}
.ci-preview-panel {
  display: flex;
  flex-direction: column;
}
.ci-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Preview action buttons */
.ci-preview-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.ci-preview-actions .btn {
  flex-shrink: 0;
}

/* Preview panel */
.ci-preview-container {
  background: linear-gradient(145deg, var(--bg-secondary), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.ci-preview-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(62,107,230,0.04) 0%, transparent 60%);
  pointer-events: none;
  border-radius: 14px;
}
.ci-preview-area {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 1;
  max-height: 50vh;
}
.ci-preview-area img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.ci-preview-icon svg {
  width: 64px;
  height: 64px;
  opacity: 0.25;
  color: var(--text-secondary);
}
.ci-preview-label {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}
.ci-preview-status {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* Item slider */
.ci-slider-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
}
.ci-item-slider {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.25rem 0;
  scrollbar-width: thin;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.ci-item-slider.grabbing {
  cursor: grabbing;
  scroll-behavior: auto;
}
.ci-slider-item {
  flex: 0 0 auto;
  width: 80px;
  text-align: center;
  padding: 0.4rem 0.3rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  background: var(--bg-card);
}
.ci-slider-item:hover {
  border-color: var(--info);
}
.ci-slider-item.active {
  border-color: var(--info);
  background: var(--info-bg);
  box-shadow: 0 0 0 3px rgba(62,107,230,0.15);
}
.ci-slider-icon svg {
  width: 30px;
  height: 30px;
  color: var(--text-secondary);
}
.ci-slider-name {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Variant edit form in preview panel */
.variant-edit-fields {
  margin-top: 0.5rem;
}

/* Right panel cards */
.ci-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  overflow: hidden;
}
.ci-card-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0;
}
.ci-card-header-icon svg {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.ci-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.ci-card-title-sm {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.ci-card-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.65;
}
.ci-card-meta {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.ci-meta-label {
  display: block;
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.05rem;
}
.ci-status-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border: 1.5px solid;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ci-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0;
}
.ci-card-row + .ci-card-row {
  border-top: 1px solid var(--border-light);
  margin-top: 0.15rem;
  padding-top: 0.45rem;
}
.ci-card-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.ci-slots-count {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}
.ci-slots-remaining {
  font-size: 0.88rem;
  font-weight: 700;
}
.ci-accent-green {
  color: var(--success);
}
.ci-accent-red {
  color: var(--danger);
}
.ci-card-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: var(--bg-tertiary);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 6px;
}

/* Timer inside card */
.ci-timer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.ci-timer .timer-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}
.ci-timer .timer-text {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1rem;
}
.ci-timer .timer-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
  opacity: 0.65;
}

/* Form actions */
.ci-form-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-light);
}
.ci-add-price {
  font-weight: 400;
  opacity: 0.6;
}

/* Design options */
.design-options-wrap {
  margin-top: 0.35rem;
  padding: 0.5rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px dashed var(--border);
}
.design-options-wrap .variant-field {
  margin-bottom: 0.3rem;
}
.design-options-wrap .variant-field:last-child {
  margin-bottom: 0;
}
.design-options-wrap select {
  width: 100%;
  padding: 0.3rem 0.4rem;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
}

/* Artwork banner on product page */
.design-artwork-banner {
  background: linear-gradient(135deg, var(--info-bg), var(--bg-card));
  border: 1px solid var(--info);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.design-artwork-banner img {
  max-height: 70px;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.design-artwork-banner .dab-content {
  flex: 1;
}
.design-artwork-banner .dab-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.design-artwork-banner .dab-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* Variant cards (inside right panel) */
.variant-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem;
  margin-bottom: 0.45rem;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--bg-card);
}
.variant-card:hover {
  border-color: var(--info);
}
.variant-card.selected {
  border-color: var(--info);
  box-shadow: 0 0 0 2px rgba(62,107,230,0.12);
}
.variant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}
.variant-header-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.variant-name-display {
  font-weight: 600;
  font-size: 0.82rem;
}
.variant-badge {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.variant-badge.unlocked {
  color: var(--success);
  border-color: var(--success);
}
.variant-badge.pay {
  color: var(--warning);
  border-color: var(--warning);
}
.variant-remove {
  color: var(--danger);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.25rem;
}
.variant-body {
  font-size: 0.78rem;
}
.variant-body.saved {
  color: var(--text-secondary);
}
.variant-desc-saved {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.15rem;
}
.variant-meta {
  font-size: 0.68rem;
  color: var(--text-muted);
}
.variant-field {
  margin-bottom: 0.35rem;
}
.variant-field label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}
.variant-field input,
.variant-field textarea {
  width: 100%;
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
}
.variant-field textarea {
  resize: vertical;
  min-height: 45px;
}
.variant-row2 {
  display: flex;
  gap: 0.45rem;
}
.variant-row2 .variant-field {
  flex: 1;
}
.variant-artwork-placeholder {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.68rem;
  color: var(--text-muted);
}
.variant-artwork-placeholder span {
  font-weight: 600;
  display: block;
  margin-bottom: 0.1rem;
}
.va-empty {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}
.variant-actions {
  margin-top: 0.4rem;
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.variant-edit-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border-light);
}
.ci-preview-name {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.ci-add-variant {
  width: 100%;
  margin-top: 0.45rem;
}

/* Responsive */
@media (max-width: 1023px) {
  .design-dash-grid {
    grid-template-columns: 1fr;
  }
  .dash-main-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 900px) {
  .ci-two-col {
    grid-template-columns: 1fr;
  }
  .ci-col-detail {
    position: static;
  }
}
@media (max-width: 768px) {
  .ci-preview-container {
    padding: 1rem;
  }
  .ci-preview-area {
    aspect-ratio: 16/9;
  }
  .ci-slider-wrap {
    margin-top: 0.5rem;
    padding: 0.5rem;
  }
  .ci-item-slider {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.5rem;
    align-items: stretch;
  }
  .ci-slider-item {
    flex: 0 0 72px;
    width: auto;
    display: block;
    padding: 0.35rem 0.25rem;
    text-align: center;
  }
  .ci-slider-icon svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .ci-slider-name {
    font-size: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ci-card-meta {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .variant-row2 {
    flex-direction: column;
  }
  .ci-preview-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ci-preview-actions .btn {
    width: 100%;
  }
}

/* Item page tabs */
.item-page-tab.active {
  color: var(--text-primary) !important;
  border-bottom-color: var(--text-primary) !important;
}
.item-page-tab:hover {
  color: var(--text-secondary) !important;
}

/* Set cards */
.set-card {
  transition: border-color 0.2s, box-shadow 0.2s;
}
.set-card:focus-within {
  border-color: var(--info) !important;
  box-shadow: 0 0 0 2px rgba(62,107,230,0.08);
}
.set-card .form-label {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 600;
}
.set-card input:focus,
.set-card textarea:focus {
  outline: none;
  border-color: var(--info) !important;
}

/* Designing — Brief page */
.brief-page .form-textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

/* Responsive: Dashboard stats on small screens */
@media (max-width: 600px) {
  .dash-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dash-carousel-slide {
    flex: 0 0 160px;
  }
  .dash-carousel-img-wrap {
    width: 160px;
    height: 100px;
  }
}

/* Responsive: CI Manual grid on small screens */
@media (max-width: 480px) {
  .ci-manual-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 0.35rem !important;
  }
  .ci-manual-folder {
    padding: 0.4rem 0.3rem !important;
  }
  .ci-manual-folder-icon {
    height: 40px !important;
  }
  .ci-manual-folder-icon svg {
    width: 32px !important;
    height: 32px !important;
  }
  .set-card {
    padding: 0.75rem !important;
  }
  .item-page-tab {
    font-size: 0.78rem !important;
    padding: 0.5rem 0.5rem !important;
  }
  .item-detail-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Type color utility classes */
.type-web_apps { --type-color: #3E6BE6; }
.type-designing { --type-color: #C4B357; }
.type-advertising { --type-color: #00AA4D; }
.type-printing { --type-color: #6B7280; }

/* ─── Brand Settings ────────────────────────────────────────────────────── */
.brand-color-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.brand-color-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.brand-color-item .form-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.brand-color-input::-webkit-color-swatch-wrapper {
  padding: 2px;
}
.brand-color-input::-webkit-color-swatch {
  border-radius: 4px;
  border: 1px solid var(--border);
}
.brand-font-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.brand-font-row .form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}
.brand-font-row select {
  width: 180px;
}
.brand-textarea {
  width: 100%;
  resize: vertical;
  font-size: 0.85rem;
}

/* ─── Company Profile ───────────────────────────────────────────────────── */
.cp-price-display {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}
.cp-price-display hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.35rem 0;
}
.cp-extra-page-form {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.5rem;
}
.cp-extra-page-form input,
.cp-extra-page-form select,
.cp-extra-page-form textarea {
  width: 100%;
}
.cp-page-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.35rem;
  cursor: pointer;
  transition: border-color 0.2s;
  font-size: 0.8rem;
}
.cp-page-pill:hover {
  border-color: var(--info);
}
.cp-page-pill.active {
  border-color: var(--info);
  background: var(--info-bg);
  box-shadow: 0 0 0 2px rgba(62,107,230,0.12);
}
.cp-page-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0;
  transition: background 0.2s, color 0.2s;
}
.cp-page-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.cp-page-del:hover {
  color: var(--danger);
}
.cp-page-form input,
.cp-page-form select,
.cp-page-form textarea {
  width: 100%;
  box-sizing: border-box;
}
.cp-page-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.cp-page-type {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}
.cp-preview-card {
  position: sticky;
  top: 1rem;
}

/* Print styles */
@media print {
  body { background:#fff !important; color:#000 !important; }
  .sidebar, .navbar, .mobile-tabs, .no-print, .btn, .alert, .notification-bell, .profile-dropdown { display:none !important; }
  .sidebar-layout { display:block !important; }
  .main-content { max-width:100% !important; margin:0 !important; padding:1rem !important; }
  .card { box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid; }
  .invoice-print-area { border:1px solid #ddd !important; }
  a { color:#000 !important; text-decoration:none !important; }
  .badge { border:1px solid #999 !important; }
}