/* ============================================
   Shanti Engineering CNC — Design System
   Premium Dark Mode + Glassmorphism
   ============================================ */

/* ── Google Fonts ──────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@600;700&display=swap');

/* ── CSS Custom Properties ─────────────────── */
:root {
  /* Backgrounds */
  --bg-primary: #0a0e1a;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  --bg-card: rgba(17, 24, 39, 0.8);
  --bg-card-hover: rgba(31, 41, 55, 0.9);
  --bg-input: rgba(15, 20, 35, 0.6);

  /* Accent Colors */
  --accent-blue: #3b82f6;
  --accent-blue-light: #60a5fa;
  --accent-blue-dark: #2563eb;
  --accent-purple: #8b5cf6;
  --accent-gold: #f59e0b;
  --accent-gold-light: #fbbf24;
  --accent-green: #10b981;
  --accent-green-light: #34d399;
  --accent-red: #ef4444;
  --accent-red-light: #f87171;

  /* Text */
  --text-primary: #f9fafb;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --text-accent: #60a5fa;

  /* Borders */
  --border-color: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-focus: rgba(59, 130, 246, 0.5);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #3b82f6, #8b5cf6);
  --gradient-gold: linear-gradient(135deg, #f59e0b, #ef4444);
  --gradient-green: linear-gradient(135deg, #10b981, #3b82f6);
  --gradient-dark: linear-gradient(180deg, #0a0e1a 0%, #111827 100%);
  --gradient-card: linear-gradient(135deg, rgba(59,130,246,0.05), rgba(139,92,246,0.05));

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.3);
  --shadow-glow-gold: 0 0 20px rgba(245, 158, 11, 0.3);

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Outfit', 'Inter', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-Index */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
  --z-loader: 9999;

  /* Layout */
  --navbar-height: 72px;
  --container-max: 1280px;
  --container-narrow: 640px;
}

/* ── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  /* NOT `overflow-x: hidden`. Hiding horizontal overflow makes any content
     wider than the screen permanently unreachable -- on mobile the page
     simply refuses to pan and part of the UI is lost. Letting the viewport
     scroll is always the safer failure mode. */
  overflow-x: visible;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-blue-light); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-blue); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
::selection { background: rgba(59, 130, 246, 0.3); color: var(--text-primary); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* ── Typography ────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: var(--text-primary); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
p { color: var(--text-secondary); line-height: 1.7; }
.text-gradient {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gold { color: var(--accent-gold); }
.text-green { color: var(--accent-green); }
.text-red { color: var(--accent-red); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }

/* ── Layout ────────────────────────────────── */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-lg); }
.main-content { min-height: calc(100vh - var(--navbar-height)); padding-top: var(--navbar-height); }
.section { padding: var(--space-3xl) 0; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Buttons ───────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-weight: 600;
  font-size: 0.95rem; transition: all var(--transition-normal); position: relative; overflow: hidden;
  white-space: nowrap; border: 1px solid transparent;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--gradient-primary); color: white; border: none;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}
.btn-primary:hover {
  transform: translateY(-2px); box-shadow: 0 6px 25px rgba(59, 130, 246, 0.4);
}

.btn-gold {
  background: var(--gradient-gold); color: white;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.btn-gold:hover {
  transform: translateY(-2px); box-shadow: 0 6px 25px rgba(245, 158, 11, 0.4);
}

.btn-secondary {
  background: var(--glass-bg); color: var(--text-primary);
  border: 1px solid var(--glass-border); backdrop-filter: blur(10px);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--accent-blue); }

.btn-danger { background: var(--accent-red); color: white; }
.btn-danger:hover { background: var(--accent-red-light); transform: translateY(-2px); }

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

.btn-sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 0.625rem; border-radius: var(--radius-md); }

.btn .spinner-sm { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }

/* ── Form Elements ─────────────────────────── */
.form-group { margin-bottom: var(--space-lg); position: relative; }
.form-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-xs); }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 0.875rem 1rem; background: var(--bg-input);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  color: var(--text-primary); font-size: 0.95rem; transition: all var(--transition-normal);
  outline: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: rgba(15, 20, 35, 0.8);
}
.form-input::placeholder { color: var(--text-muted); }
.form-textarea { resize: vertical; min-height: 100px; }
.form-select { cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.form-error { font-size: 0.8rem; color: var(--accent-red); margin-top: var(--space-xs); display: none; }
.form-group.has-error .form-input { border-color: var(--accent-red); }
.form-group.has-error .form-error { display: block; animation: fadeIn 0.3s ease; }

.form-input-icon { position: relative; }
.form-input-icon .icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.form-input-icon .form-input { padding-left: 2.75rem; }
.form-input-icon .toggle-password { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); cursor: pointer; background: none; border: none; }
.form-input-icon .toggle-password:hover { color: var(--text-primary); }

.form-checkbox { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
.form-checkbox input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--accent-blue); cursor: pointer;
}

/* Password strength */
.password-strength { height: 4px; border-radius: 2px; background: var(--bg-tertiary); margin-top: var(--space-xs); overflow: hidden; }
.password-strength-bar { height: 100%; border-radius: 2px; transition: width 0.3s ease, background 0.3s ease; }
.strength-weak { width: 25%; background: var(--accent-red); }
.strength-fair { width: 50%; background: var(--accent-gold); }
.strength-good { width: 75%; background: var(--accent-blue); }
.strength-strong { width: 100%; background: var(--accent-green); }

/* ── Cards ─────────────────────────────────── */
.card {
  background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: var(--space-xl); transition: all var(--transition-normal);
  position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.card:hover { border-color: rgba(59, 130, 246, 0.2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-header { margin-bottom: var(--space-lg); }
.card-title { font-size: 1.25rem; font-weight: 600; }
.card-body { }
.card-footer { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--border-color); }

.card-feature {
  text-align: center; padding: var(--space-2xl);
}
.card-feature .card-icon {
  font-size: 2.5rem; margin-bottom: var(--space-md);
  width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); background: var(--gradient-card); margin: 0 auto var(--space-md);
}

/* ── Navbar ────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--navbar-height); z-index: var(--z-navbar);
  background: rgba(10, 14, 26, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-color);
  transition: all var(--transition-normal);
}
.navbar.scrolled { background: rgba(10, 14, 26, 0.95); box-shadow: var(--shadow-md); }
  @media (max-width: 768px) { .navbar { background: #0a0e1a !important; } }
.navbar-inner {
  max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-lg);
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.navbar-brand { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--text-primary); }
.navbar-brand .brand-icon { font-size: 1.5rem; }
.navbar-brand span { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.navbar-links { display: flex; align-items: center; gap: var(--space-xs); }
.navbar-links a, .navbar-links button {
  padding: 0.5rem 1rem; border-radius: var(--radius-md); color: var(--text-secondary);
  font-size: 0.9rem; font-weight: 500; transition: all var(--transition-fast);
}
.navbar-links a:hover, .navbar-links button:hover { color: var(--text-primary); background: var(--glass-bg); }
.navbar-links a.active { color: var(--accent-blue-light); background: rgba(59, 130, 246, 0.1); }

.navbar-actions { display: flex; align-items: center; gap: var(--space-sm); }
.mobile-actions { display: none; }

/* Notification bell */
.notif-bell { position: relative; padding: 0.5rem; border-radius: var(--radius-md); color: var(--text-secondary); transition: all var(--transition-fast); cursor: pointer; }
.notif-bell:hover { color: var(--text-primary); background: var(--glass-bg); }
.notif-badge {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px;
  background: var(--accent-red); color: white; font-size: 0.7rem; font-weight: 700;
  border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg-primary); animation: pulse 2s ease-in-out infinite;
}

/* Mobile hamburger */
.navbar-toggle { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; cursor: pointer; }
.navbar-toggle span { display: block; width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all var(--transition-normal); }
.navbar-toggle.active span:nth-child(1) { transform: rotate(45deg) translateY(7px); }
.navbar-toggle.active span:nth-child(2) { opacity: 0; }
.navbar-toggle.active span:nth-child(3) { transform: rotate(-45deg) translateY(-7px); }

@media (max-width: 768px) {
  .navbar-toggle { display: flex; }
  .navbar-links {
    position: fixed; top: var(--navbar-height); left: 0; right: 0; bottom: 0;
    background: #0a0e1a !important; /* solid background */
    flex-direction: column; padding: var(--space-xl); gap: var(--space-sm);
    transform: translateX(100%); transition: transform var(--transition-normal);
  }
  .navbar-links.open { transform: translateX(0); }
  .navbar-links a, .navbar-links button { font-size: 1.1rem; padding: 1rem; width: 100%; text-align: center; }
  .navbar-actions { display: none; }
  .navbar-links .mobile-actions { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-xl); width: 100%; }
}

/* ── Footer ────────────────────────────────── */
.footer {
  background: var(--gradient-dark); border-top: 1px solid var(--border-color);
  padding: var(--space-3xl) 0 var(--space-xl);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-2xl); margin-bottom: var(--space-2xl); }
.footer-brand p { color: var(--text-muted); margin-top: var(--space-sm); font-size: 0.9rem; }
.footer h4 { font-size: 1rem; margin-bottom: var(--space-md); color: var(--text-primary); }
.footer-links a { display: block; color: var(--text-muted); padding: 0.25rem 0; font-size: 0.9rem; transition: color var(--transition-fast); }
.footer-links a:hover { color: var(--accent-blue-light); }
.footer-contact p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.25rem; }
.footer-bottom {
  padding-top: var(--space-lg); border-top: 1px solid var(--border-color);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm);
}
.footer-bottom p { font-size: 0.85rem; color: var(--text-muted); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── Toast Notifications ───────────────────── */
.toast-container {
  position: fixed; top: calc(var(--navbar-height) + var(--space-md)); right: var(--space-lg);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-sm);
  pointer-events: none; max-width: 400px;
}
.toast {
  padding: 1rem 1.25rem; border-radius: var(--radius-md);
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg); backdrop-filter: blur(16px);
  display: flex; align-items: flex-start; gap: var(--space-sm);
  animation: slideInRight 0.4s ease; pointer-events: all;
  position: relative; overflow: hidden;
}
.toast-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.toast-content { flex: 1; }
.toast-message { font-size: 0.9rem; color: var(--text-primary); }
.toast-close { color: var(--text-muted); cursor: pointer; font-size: 1.1rem; padding: 0 0.25rem; flex-shrink: 0; }
.toast-close:hover { color: var(--text-primary); }
.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; border-radius: 0 0 var(--radius-md) var(--radius-md); animation: toastProgress linear forwards; }
.toast.toast-success { border-left: 3px solid var(--accent-green); }
.toast.toast-success .toast-icon { color: var(--accent-green); }
.toast.toast-success .toast-progress { background: var(--accent-green); }
.toast.toast-error { border-left: 3px solid var(--accent-red); }
.toast.toast-error .toast-icon { color: var(--accent-red); }
.toast.toast-error .toast-progress { background: var(--accent-red); }
.toast.toast-warning { border-left: 3px solid var(--accent-gold); }
.toast.toast-warning .toast-icon { color: var(--accent-gold); }
.toast.toast-warning .toast-progress { background: var(--accent-gold); }
.toast.toast-info { border-left: 3px solid var(--accent-blue); }
.toast.toast-info .toast-icon { color: var(--accent-blue); }
.toast.toast-info .toast-progress { background: var(--accent-blue); }
.toast-exit { animation: slideOutRight 0.3s ease forwards; }

/* ── Modal ─────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: var(--space-lg);
  opacity: 0; visibility: hidden; transition: all var(--transition-normal);
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal {
  background: var(--bg-secondary); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); width: 100%; max-width: 500px;
  max-height: 85vh; overflow-y: auto; transform: translateY(20px) scale(0.95);
  transition: transform var(--transition-normal);
}
.modal-overlay.active .modal { transform: translateY(0) scale(1); }
.modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg); border-bottom: 1px solid var(--border-color); }
.modal__title { font-size: 1.25rem; font-weight: 600; }
.modal__close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: 1.5rem; color: var(--text-muted); transition: all var(--transition-fast); }
.modal__close:hover { background: var(--glass-bg); color: var(--text-primary); }
.modal__body { padding: var(--space-lg); }
.modal__footer { padding: var(--space-lg); border-top: 1px solid var(--border-color); display: flex; gap: var(--space-sm); justify-content: flex-end; }

/* ── Lightbox ───────────────────────────────── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 100);
  background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all var(--transition-normal);
  cursor: zoom-out;
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: 90vw; max-height: 90vh;
  object-fit: contain; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: scale(0.9); transition: transform var(--transition-normal);
    background: #fff !important;
}
.lightbox-overlay.active .lightbox-img { transform: scale(1);     background: #fff !important;
}
.lightbox-close {
  position: absolute; top: var(--space-lg); right: var(--space-lg);
  color: white; font-size: 3rem; line-height: 1; font-weight: 300;
  cursor: pointer; z-index: calc(var(--z-modal) + 101);
  background: rgba(0,0,0,0.5); width: 50px; height: 50px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition-fast);
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }

/* ── Loading ───────────────────────────────── */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border-color); border-top-color: var(--accent-blue);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
.spinner-lg { width: 60px; height: 60px; border-width: 4px; }

/* App Loader */
.app-loader {
  position: fixed; inset: 0; z-index: var(--z-loader); background: var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s ease;
}
.app-loader.hidden { opacity: 0; pointer-events: none; }
.app-loader__inner { text-align: center; }
.app-loader__logo { position: relative; width: 80px; height: 80px; margin: 0 auto var(--space-lg); }
.app-loader__icon { font-size: 2.5rem; position: relative; z-index: 1; line-height: 80px; }
.app-loader__spinner {
  position: absolute; inset: -5px; border: 3px solid var(--border-color);
  border-top-color: var(--accent-blue); border-radius: 50%; animation: spin 1s linear infinite;
}
.app-loader__title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; margin-bottom: var(--space-xs); }
.app-loader__tagline { color: var(--text-muted); font-size: 0.9rem; margin-bottom: var(--space-lg); }
.app-loader__progress { width: 200px; height: 3px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; margin: 0 auto; }
.app-loader__progress-bar { height: 100%; background: var(--gradient-primary); border-radius: var(--radius-full); animation: loading 1.5s ease-in-out; width: 100%; }

/* Skeleton loader */
.skeleton { background: linear-gradient(90deg, var(--bg-tertiary) 25%, rgba(255,255,255,0.05) 50%, var(--bg-tertiary) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
.skeleton-text { height: 14px; margin-bottom: var(--space-sm); }
.skeleton-text:last-child { width: 70%; }
.skeleton-title { height: 24px; width: 60%; margin-bottom: var(--space-md); }
.skeleton-image { height: 200px; border-radius: var(--radius-md); }

/* ── Badges ────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; padding: 0.25rem 0.75rem;
  font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-full);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-draft { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
.badge-pending { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.badge-awaiting-conversion { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.badge-quoted { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.badge-approved { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }
.badge-design-submitted { background: rgba(244, 114, 182, 0.2); color: #f472b6; }
.badge-production { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
.badge-completed { background: rgba(16, 185, 129, 0.3); color: #10b981; }
.badge-delivered { background: rgba(16, 185, 129, 0.4); color: #059669; }
.badge-cancelled { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.badge-admin { background: rgba(245, 158, 11, 0.2); color: var(--accent-gold); }
.badge-client { background: rgba(59, 130, 246, 0.2); color: var(--accent-blue-light); }

/* ── Tables ────────────────────────────────── */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-color); }
.table { width: 100%; border-collapse: collapse; min-width: 700px; }
.table th, .table td { padding: 0.875rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.table th { background: rgba(255, 255, 255, 0.03); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.table td { font-size: 0.9rem; color: var(--text-secondary); }
.table tbody tr { transition: background var(--transition-fast); }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

/* ── Dropzone ──────────────────────────────── */
.dropzone {
  border: 2px dashed var(--border-light); border-radius: var(--radius-lg); padding: var(--space-3xl);
  text-align: center; cursor: pointer; transition: all var(--transition-normal);
  background: var(--glass-bg);
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--accent-blue); background: rgba(59, 130, 246, 0.05);
  box-shadow: inset 0 0 30px rgba(59, 130, 246, 0.05);
}
.dropzone-icon { font-size: 3rem; margin-bottom: var(--space-md); color: var(--text-muted); }
.dropzone-text { color: var(--text-secondary); }
.dropzone-text strong { color: var(--accent-blue-light); }

/* ── Avatar ────────────────────────────────── */
.avatar {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--gradient-primary); display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 1rem; color: white;
  border: 2px solid var(--glass-border); flex-shrink: 0;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }

/* ── Hero Section ──────────────────────────── */
.hero {
  position: relative; min-height: 80vh; display: flex; align-items: center;
  overflow: hidden; padding: var(--space-3xl) 0;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(59,130,246,0.08) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 50%, rgba(139,92,246,0.06) 0%, transparent 60%);
}
.hero-content { position: relative; z-index: 1; max-width: 700px; }
.hero h1 { margin-bottom: var(--space-lg); }
.hero p { font-size: 1.15rem; margin-bottom: var(--space-2xl); color: var(--text-secondary); }
.hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* Floating shapes */
.hero-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero-shape {
  position: absolute; border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: var(--radius-lg); animation: float-shape 20s ease-in-out infinite;
}
.hero-shape:nth-child(1) { width: 300px; height: 300px; top: 10%; right: -5%; animation-delay: 0s; }
.hero-shape:nth-child(2) { width: 200px; height: 200px; top: 60%; right: 10%; animation-delay: -5s; border-color: rgba(139,92,246,0.1); }
.hero-shape:nth-child(3) { width: 150px; height: 150px; top: 20%; right: 25%; animation-delay: -10s; border-color: rgba(245,158,11,0.08); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); counter-reset: step; }
.step { text-align: center; position: relative; counter-increment: step; padding: var(--space-xl) var(--space-md); }
.step::before {
  content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--gradient-primary); color: white; font-weight: 700;
  margin: 0 auto var(--space-md); font-size: 1.1rem;
}
.step h4 { margin-bottom: var(--space-xs); }
.step p { font-size: 0.9rem; color: var(--text-muted); }

@media (max-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.1));
  border: 1px solid var(--glass-border); border-radius: var(--radius-xl);
  padding: var(--space-3xl); text-align: center;
}
.cta-section h2 { margin-bottom: var(--space-md); }
.cta-section p { margin-bottom: var(--space-xl); max-width: 500px; margin-left: auto; margin-right: auto; }

/* Gallery Grid */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-lg); }
.gallery-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-card); transition: all var(--transition-normal); }
.gallery-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(59, 130, 246, 0.2); }
.gallery-card-image { width: 100%; height: 220px; object-fit: cover; background: #ffffff; }
.gallery-card-body { padding: var(--space-md); }
.gallery-card-title { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-xs); }
.gallery-card-category { font-size: 0.8rem; color: var(--text-muted); }

/* Auth pages */
.auth-page { min-height: calc(100vh - var(--navbar-height)); display: flex; align-items: center; justify-content: center; padding: var(--space-2xl) var(--space-lg); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card .card { padding: var(--space-2xl); }
.auth-header { text-align: center; margin-bottom: var(--space-2xl); }
.auth-header .brand-icon { font-size: 2.5rem; margin-bottom: var(--space-sm); }
.auth-header h2 { margin-bottom: var(--space-xs); }
.auth-header p { color: var(--text-muted); font-size: 0.9rem; }
.auth-divider { display: flex; align-items: center; gap: var(--space-md); margin: var(--space-xl) 0; color: var(--text-muted); font-size: 0.85rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.auth-footer { text-align: center; margin-top: var(--space-lg); font-size: 0.9rem; color: var(--text-muted); }
.auth-footer a { color: var(--accent-blue-light); font-weight: 500; }

/* ── Page Transition ───────────────────────── */
.page-enter { animation: fadeInUp 0.4s ease; }
.page-exit { animation: fadeOutDown 0.3s ease; }

/* ── Animations ────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes loading { 0% { width: 0; } 100% { width: 100%; } }
@keyframes toastProgress { from { width: 100%; } to { width: 0; } }
@keyframes float-shape {
  0%, 100% { transform: rotate(0deg) translate(0, 0); }
  25% { transform: rotate(5deg) translate(10px, -15px); }
  50% { transform: rotate(-3deg) translate(-5px, 10px); }
  75% { transform: rotate(2deg) translate(8px, -5px); }
}

/* ── Dropdown Menus ────────────────────────── */
.user-menu { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + var(--space-sm)); right: 0;
  width: 220px; background: var(--bg-card); backdrop-filter: blur(12px);
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden;
  transform: translateY(-10px); transition: all var(--transition-fast);
  z-index: var(--z-dropdown); padding: var(--space-xs) 0;
}
.dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item {
  display: block; width: 100%; padding: var(--space-sm) var(--space-md);
  color: var(--text-primary); text-decoration: none; font-size: 0.9rem;
  transition: background var(--transition-fast); text-align: left;
}
.dropdown-item:hover { background: var(--glass-bg); }
.dropdown-item.text-gold { color: var(--accent-gold-light); }
.dropdown-item.text-danger { color: var(--accent-red); }
.dropdown-divider { height: 1px; background: var(--border-color); margin: var(--space-xs) 0; }

/* ── Utility ───────────────────────────────── */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


/* Fix Canvas Overflow */
canvas { max-width: 100%; height: auto; }


/* -------------------------------------------------------------------------- */
/* Mobile UI Enhancements                                                     */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  
  .upload-progress {
    gap: 0.5rem;
  }
  .step-label {
    font-size: 0.8rem;
    text-align: center;
  }
  
  /* Fix any remaining fixed-width elements */
  img, canvas, video, iframe {
    max-width: 100%;
    height: auto;
  }
  
  .modal {
    width: 95%;
    margin: 1rem;
    padding: 1rem;
  }
  
  .auth-card {
    padding: 1rem;
  }
  
  .grid {
    gap: 1rem !important;
  }
  
  .btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
}

/* Responsive Table */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; margin-bottom: 1rem; }
.table-responsive table { min-width: 800px; }

/* Toggle Switch — reusable on/off control */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-switch .toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border-color);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.toggle-switch .toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-green, #22c55e);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
}
.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}
.toggle-switch.is-updating .toggle-slider { opacity: 0.6; cursor: wait; }

/* Language Switcher — segmented pill control */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--glass-bg, rgba(255,255,255,0.06));
  border: 1px solid var(--border-color);
  margin-right: 0.5rem;
}
.lang-switch-btn {
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: all 0.2s ease;
}
.lang-switch-btn:hover:not(.lang-active) { color: var(--text-primary); }
.lang-switch-btn.lang-active {
  background: linear-gradient(135deg, var(--accent-gold), #e0a929);
  color: #1a1a1a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
/* The mobile-menu copy of the switcher only needs to show on small screens —
   the desktop one in navbar-actions already covers larger viewports. */
.navbar-links > .lang-switch { display: none; margin: 0.5rem 0; }
@media (max-width: 968px) {
  .navbar-links > .lang-switch { display: inline-flex; }
  .navbar-actions > .lang-switch { display: none; }
}


/* ============================================================
   MOBILE COMPATIBILITY FIXES
   Added after reports of content being hidden or cut off on phones.
   The root cause in every case below is a rule written for a desktop
   viewport that a phone cannot satisfy, so content spills outside the
   screen where it simply cannot be reached (there is no horizontal
   scroll on most of these containers).

   These use !important deliberately: the offending values are INLINE
   styles on individual pages, and inline styles cannot be overridden
   from a stylesheet any other way.
   ============================================================ */

@media (max-width: 768px) {

  /* 1. Card grids ask for 350-380px minimum columns. On a 360px phone,
        minus container padding, that is wider than the screen -- the grid
        refuses to shrink and the right-hand side of every card is cut off.
        Force a single column. */
  [style*="minmax(350px"],
  [style*="minmax(360px"],
  [style*="minmax(380px"],
  [style*="minmax(400px"],
  [style*="minmax(420px"],
  [style*="minmax(450px"] {
    grid-template-columns: 1fr !important;
  }

  /* Narrower auto-fit grids are fine but often still tight; give them
     the full width rather than squeezing two columns onto a phone. */
  [style*="minmax(180px"],
  [style*="minmax(200px"],
  [style*="minmax(220px"],
  [style*="minmax(240px"],
  [style*="minmax(280px"],
  [style*="minmax(300px"] {
    grid-template-columns: 1fr !important;
  }

  /* 1b. Multi-column grids written with explicit fr units. These were the
         real cause of the upload/details page being unusable on a phone:
         a 3-column layout (1.25fr 1fr 1.25fr) leaves each column about a
         third of 360px, so the DXF preview was a thumbnail and the tool
         panels beside it were squeezed to nothing. minmax() rules above
         do not match these, so they need their own selectors. */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr 1fr"],
  [style*="grid-template-columns: 1.25fr 1fr 1.25fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: 1fr 1.5fr"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* 0. THE ROOT CAUSE of "content is hidden and I cannot scroll to it".
        `.card { overflow: hidden }` (see the Cards section above) clips
        EVERY panel's contents. On the upload page all three step panels
        are cards, so anything wider than the card was cut off with no
        scrollbar anywhere -- and because the clipping happened inside the
        card, the PAGE never overflowed, which is why page-level scroll
        fixes changed nothing. Letting cards overflow visibly means wide
        content extends past the card and the page can be panned to reach
        it. (The rule exists to clip the decorative top-edge gradient and
        keep rounded corners; losing that on small screens is a trivial
        cosmetic cost next to unreachable controls.) */
  .card,
  .upload-step-panel {
    /* overflow-x: auto (not `visible`) gives the panel its OWN horizontal
       scrollbar. `visible` relies on the content spilling out and the page
       scrolling instead, which depends on every ancestor cooperating -- and
       clearly one of them does not. A scroll container on the panel itself
       cannot be vetoed by an ancestor. overflow-y stays visible so nothing
       is clipped vertically (these panels have no fixed height). */
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Mobile navigation: must be OPAQUE and on top ----
     The slide-in menu sets a solid colour, but the navbar bar itself uses
     rgba(...,0.85) plus backdrop-filter. Where backdrop-filter is
     unsupported or disabled (common on mobile browsers, and in low-power
     mode) the blur silently does nothing and the raw 85% alpha shows the
     page straight through -- which is exactly the "transparent, hard to
     read, easy to mis-tap" behaviour reported. Force full opacity and
     drop the filter on small screens. */
  .navbar,
  .navbar.scrolled {
    background: #0a0e1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .navbar-links {
    background: #0a0e1a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Above ALL page content: sticky bars and panels on these pages use
       z-index values up to 10000, so an unlayered menu can end up
       underneath them and appear see-through. */
    z-index: 9999 !important;
    overflow-y: auto;
  }

  /* The hamburger IS the close button -- its three bars rotate into an X
     while the menu is open. It must therefore sit ABOVE the menu, or taps
     land on the menu panel instead and there is no way back out except by
     picking a link. (An earlier fix here raised the menu above everything
     including the toggle, which is exactly what trapped it open.) */
  .navbar-toggle {
    position: relative;
    z-index: 10002 !important;
    pointer-events: auto;
  }

  /* 1c. CRITICAL companion to the rule above. Several panels are placed
         explicitly with `grid-column: 2 / 4`, `3 / 4`, `1 / 3` etc. Once
         the parent is collapsed to a single column those refer to columns
         that no longer exist, and CSS Grid OBLIGINGLY CREATES implicit
         extra columns to honour them -- re-widening the grid to three or
         four screens and pushing content off the side. Every child must
         fall back to normal flow. */
  #tuning-left-panel,
  #tuning-canvas-wrapper,
  #tuning-preview-panel,
  #vector-settings-group,
  #tuning-bottom-panel,
  [style*="grid-column:"] {
    grid-column: auto !important;
    grid-row: auto !important;
    max-width: 100% !important;
  }

  /* 100vw is wider than the usable area whenever a scrollbar is present,
     which itself forces a horizontal scroll. Percentage tracks the real
     container width. */
  .tuning-fullscreen {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* The DXF preview should use the full phone width once stacked, and
     stay square rather than collapsing to a sliver. */
  #dxf-svg-container {
    height: auto !important;
    min-height: 260px;
    aspect-ratio: 4 / 3;
  }
  #step2-preview-container {
    aspect-ratio: 4 / 3 !important;
  }

  /* 2. Fixed-width panels (e.g. the chat modal's 400px column) exceed a
        phone's width and push their close button off-screen. */
  .modal,
  .modal-content,
  [style*="width: 400px"],
  [style*="width: 500px"],
  [style*="width: 550px"],
  [style*="width: 700px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 3. Tables declare min-width: 700px. Without a scrollable parent the
        overflowing columns are unreachable. Make any table scroll
        horizontally inside its own box instead of breaking the page. */
  .table-container,
  .table-responsive,
  .card > table,
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 4. Toolbars and button rows laid out as a single flex line run off
        the edge; let them wrap and let their controls shrink. */
  [style*="display:flex"],
  [style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* Inputs sized for desktop toolbars (sheet size, gap, quantity...)
     should never be wider than the screen. */
  input, select, textarea {
    max-width: 100%;
  }

  /* 5. Do NOT hide horizontal overflow. An earlier version set
        `overflow-x: hidden` here as a "safety net", but that made any
        remaining too-wide content permanently unreachable -- you could
        see it was cut off and had no way to scroll to it. Allowing the
        scroll is strictly better: worst case the user pans sideways;
        with hidden, the content may as well not exist. */
  /* The BASE stylesheet sets `body { overflow-x: hidden }` (in the reset,
     not in any media query). That is what was still swallowing the
     horizontal scroll even after the media-query override -- so it is
     overridden explicitly here. Hiding the overflow makes any too-wide
     content permanently unreachable; allowing the scroll is always the
     safer failure mode. */
  /* Nothing needed here: the base rule now allows the viewport to scroll.
     Setting overflow on body as well would create a SECOND scroll
     container, which behaves unreliably on mobile browsers. */

  /* 6. Sticky bars (e.g. the nesting bar) can swallow the screen on a
        short viewport; cap them and let them scroll internally. */
  #mt-nest-bar {
    max-height: 60vh;
    overflow-y: auto;
  }

  /* 7. Give tap targets a usable size -- 14px checkboxes are hard to hit. */
  input[type="checkbox"] {
    min-width: 18px;
    min-height: 18px;
  }
}

/* Very small phones (<=380px): reduce padding further so content keeps
   as much usable width as possible. */
@media (max-width: 380px) {
  .container {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }
  .card {
    padding: 0.75rem !important;
  }
  .btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }
}

/* ── Home showcase tiles ───────────────────────
   Images arrive at mixed ratios (1:1 and 3:4), so each tile crops to a
   consistent shape with object-fit: cover. The tile shape itself is
   golden (1 : 0.618) so the grid reads as deliberate rather than
   accidental -- and the feature tile, spanning two rows, ends up close
   to a golden rectangle in portrait.
   The one exception is the design drawing, which uses `contain` because
   cropping someone's artwork to fill a box would misrepresent it. */
.showcase-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  aspect-ratio: 1 / 0.618;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.showcase-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow, 0.4s ease);
}
.showcase-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(59, 130, 246, 0.35);
}
.showcase-tile:hover > img { transform: scale(1.04); }

/* Feature tile spans two rows, so it should be tall, not letterboxed. */
.showcase-tile[style*="span 2"] { aspect-ratio: 0.618 / 1; }

.showcase-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.75rem 1rem 0.75rem;
  font-size: 0.85rem; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  pointer-events: none;
}

@media (max-width: 768px) {
  /* Stack to one column. Without this the golden columns would each be
     roughly half a phone's width and every tile would be unreadable. */
  .showcase-grid {
    grid-template-columns: 1fr !important;
  }
  /* Row spans mean nothing in a single column, and left in place they
     create phantom rows. */
  .showcase-tile[style*="span 2"] {
    grid-row: auto !important;
    aspect-ratio: 1 / 0.75;
  }
  .showcase-tile { aspect-ratio: 1 / 0.72; }
}