/* ============================================
   BUTALO CUSTOM STYLES 
   ============================================ */

:root {
  --font-sans: 'Play', sans-serif;
  --font-syne: 'Play', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sh-radius-sm: 0.625rem;
  --sh-radius: 0.875rem;
  --sh-radius-lg: 1.25rem;
  --sh-radius-xl: 1.75rem;
}

/* Our vision of the automotive website. */
html:not(.dark) {
  color-scheme: light;
  --sh-bg: #f6f7f9;
  --sh-bg-raised: #ffffff;
  --sh-bg-muted: #eef1f5;
  --sh-bg-input: #ffffff;
  --sh-overlay: rgba(15, 23, 42, 0.54);
  --sh-text: #172033;
  --sh-text-2: #222a36;
  --sh-text-3: #68758a;
  --sh-text-off: #95a0b1;
  --sh-text-inv: #ffffff;
  --sh-placeholder: #8a97aa;
  --sh-line: #e5e9ef;
  --sh-line-2: #d8dee8;
  --sh-line-3: #c6ceda;
  --sh-line-input: #cfd7e3;
  --sh-red: #dc2626;
  --sh-red-hover: #b91c1c;
  --sh-red-faint: #fff1f1;
  --sh-red-muted: #fecaca;
  --sh-red-text: #b42323;
  --sh-focus: rgba(220, 38, 38, 0.22);
  --sh-danger: #c81e1e;
  --sh-danger-bg: #fff1f2;
  --sh-s1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-s2: 0 8px 24px rgba(15, 23, 42, 0.07), 0 2px 6px rgba(15, 23, 42, 0.04);
  --sh-s3: 0 18px 44px rgba(15, 23, 42, 0.11), 0 4px 12px rgba(15, 23, 42, 0.05);
  --sh-s-red: 0 10px 24px rgba(220, 38, 38, 0.20);
  --sh-bg-glass: rgba(246, 247, 249, 0.84);
  --sh-bg-glass-raised: rgba(255, 255, 255, 0.90);
}

/* ============================================
   PHOTOSWIPE LIGHTBOX FIXES
   ============================================ */

.pswp {
  z-index: 999999 !important;
  --pswp-bg: rgba(0, 0, 0, 0.95);
}

.pswp__button {
  color: white !important;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.pswp__button:hover,
.pswp__button:active {
  opacity: 1 !important;
}

.pswp__img-placeholder {
  background: rgba(0, 0, 0, 0.8);
}

/* PhotoSwipe normally animates from the thumbnail geometry. That transition
   visibly rescaled the image after opening when responsive/LQIP sources swap. */
.pswp__zoom-wrap,
.pswp__img {
  transition: none !important;
  animation: none !important;
}

/* Gallery containers don't create stacking context issues */
.pswp-gallery {
  isolation: isolate;
}

.pswp-gallery a {
  display: block;
  position: relative;
  overflow: hidden;
}

.dark {
  color-scheme: dark;
  --sh-bg: #101216;
  --sh-bg-raised: #171a20;
  --sh-bg-muted: #20242c;
  --sh-bg-input: #15181d;
  --sh-overlay: rgba(0, 0, 0, 0.72);
  --sh-text: #f5f7fa;
  --sh-text-2: #d0d5dd;
  --sh-text-3: #8d98a9;
  --sh-text-off: #596476;
  --sh-text-inv: #ffffff;
  --sh-placeholder: #738095;
  --sh-line: #292e38;
  --sh-line-2: #363d49;
  --sh-line-3: #485160;
  --sh-line-input: #3b4350;
  --sh-red: #ef4444;
  --sh-red-hover: #f87171;
  --sh-red-faint: rgba(239, 68, 68, 0.12);
  --sh-red-muted: rgba(248, 113, 113, 0.35);
  --sh-red-text: #fca5a5;
  --sh-focus: rgba(239, 68, 68, 0.28);
  --sh-danger: #f87171;
  --sh-danger-bg: rgba(248, 113, 113, 0.11);
  --sh-s1: 0 1px 2px rgba(0, 0, 0, 0.22);
  --sh-s2: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.16);
  --sh-s3: 0 18px 44px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.2);
  --sh-s-red: 0 10px 24px rgba(239, 68, 68, 0.24);
  --sh-bg-glass: rgba(16, 18, 22, 0.86);
  --sh-bg-glass-raised: rgba(23, 26, 32, 0.9);
}

html:not(.dark),
.dark {
  --background: var(--sh-bg);
  --foreground: var(--sh-text);
  --card: var(--sh-bg-raised);
  --card-foreground: var(--sh-text);
  --muted: var(--sh-bg-muted);
  --muted-foreground: var(--sh-text-3);
  --primary: var(--sh-red);
  --primary-foreground: #ffffff;
  --secondary: var(--sh-bg-muted);
  --secondary-foreground: var(--sh-text-2);
  --accent: var(--sh-red-faint);
  --accent-foreground: var(--sh-red-text);
  --border: var(--sh-line-2);
  --input: var(--sh-bg-input);
  --ring: var(--sh-focus);
}

html,
body {
  background-color: var(--sh-bg);
  color: var(--sh-text);
}

.font-syne {
  font-family: var(--font-syne);
}

.bg-card {
  background-color: var(--sh-bg-raised);
}

.border-border {
  border-color: var(--sh-line-2);
}

.text-foreground {
  color: var(--sh-text);
}

.text-muted-foreground {
  color: var(--sh-text-3);
}

/* Light theme label improvements */
html:not(.dark) label {
  color: var(--sh-text-2);
}

html:not(.dark) .label {
  color: var(--sh-text-2);
}

input::placeholder,
textarea::placeholder {
  color: var(--sh-placeholder);
}

input:not([type='checkbox']):not([type='radio']),
textarea,
select {
  background-color: var(--sh-bg-input);
  color: var(--sh-text);
  border-color: var(--sh-line-input);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--sh-red);
  box-shadow: 0 0 0 3px var(--sh-focus);
}

html:not(.dark) .bg-black\/5 {
  background-color: rgba(15, 23, 42, 0.05);
}

html:not(.dark) .bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.5);
}

html:not(.dark) .border-border {
  border-color: var(--sh-line-2);
}

html:not(.dark) svg {
  color: var(--sh-text-3);
}

html:not(.dark) svg.group-focus-within\:text-red-500:focus-within {
  color: var(--sh-red);
}

@layer components {
  /* ============================================
     NAVIGATION
     ============================================ */

  .nav-link {
    @apply relative px-4 py-2 text-sm font-medium text-secondary-700;
    @apply transition-colors duration-200;
    @apply hover:text-primary-600;
  }

  .nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary-600;
    @apply transition-all duration-300;
  }

  .nav-link:hover::after,
  .nav-link.active::after {
    @apply w-full;
  }

  .nav-link.active {
    @apply text-primary-600;
  }

  /* Mobile menu toggle */
  .menu-toggle {
    @apply relative w-6 h-5 cursor-pointer;
    @apply transition-transform duration-300;
  }

  .menu-toggle span {
    @apply absolute block h-0.5 w-full bg-current;
    @apply transition-all duration-300;
  }

  .menu-toggle span:nth-child(1) {
    @apply top-0;
  }

  .menu-toggle span:nth-child(2) {
    @apply top-1/2 -translate-y-1/2;
  }

  .menu-toggle span:nth-child(3) {
    @apply bottom-0;
  }

  .menu-toggle.active span:nth-child(1) {
    @apply top-1/2 -translate-y-1/2 rotate-45;
  }

  .menu-toggle.active span:nth-child(2) {
    @apply opacity-0;
  }

  .menu-toggle.active span:nth-child(3) {
    @apply bottom-1/2 translate-y-1/2 -rotate-45;
  }

  /* ============================================
     CARDS & CONTENT BLOCKS
     ============================================ */

  .content-card {
    @apply bg-white rounded-xl overflow-hidden;
    @apply border border-secondary-100;
    @apply transition-all duration-300;
    @apply hover:shadow-lg hover:-translate-y-1;
  }

  .content-card-image {
    @apply aspect-video w-full object-cover;
    @apply transition-transform duration-500;
  }

  .content-card:hover .content-card-image {
    @apply scale-105;
  }

  .content-card-body {
    @apply p-4 sm:p-6;
  }

  .content-card-title {
    @apply text-lg sm:text-xl font-heading font-semibold;
    @apply text-secondary-900 line-clamp-2;
    @apply mb-2;
  }

  .content-card-excerpt {
    @apply text-sm text-secondary-600 line-clamp-3;
    @apply mb-4;
  }

  .content-card-meta {
    @apply flex items-center gap-4 text-xs text-secondary-500;
  }

  /* Featured card variant */
  .content-card-featured {
    @apply content-card;
    @apply sm:col-span-2 sm:flex sm:flex-row;
    @apply bg-gradient-to-br from-primary-50 to-white;
  }

  .content-card-featured .content-card-image {
    @apply sm:w-1/2 sm:aspect-auto;
  }

  .content-card-featured .content-card-body {
    @apply sm:w-1/2 sm:p-8;
  }

  /* ============================================
     HERO SECTIONS
     ============================================ */

  .hero-section {
    @apply relative overflow-hidden;
    @apply bg-gradient-to-br from-primary-600 via-primary-700 to-primary-900;
    @apply py-12 sm:py-20 lg:py-28;
  }

  .hero-pattern {
    @apply absolute inset-0 opacity-10;
    background-image:
      repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.05) 35px, rgba(255,255,255,.05) 70px);
  }

  .hero-content {
    @apply relative z-10 container-custom text-center;
  }

  .hero-title {
    @apply text-3xl sm:text-4xl lg:text-6xl font-heading font-bold;
    @apply text-white mb-4 sm:mb-6;
    @apply animate-slide-down;
  }

  .hero-subtitle {
    @apply text-base sm:text-lg lg:text-xl;
    @apply text-primary-100 max-w-2xl mx-auto mb-6 sm:mb-8;
    @apply animate-slide-up;
  }

  /* ============================================
     SIDEBAR & WIDGETS
     ============================================ */

  .sidebar-widget {
    @apply bg-white rounded-xl p-4 sm:p-6;
    @apply shadow-soft border border-secondary-100;
    @apply mb-6;
  }

  .sidebar-widget-title {
    @apply text-lg font-heading font-semibold text-secondary-900;
    @apply mb-4 pb-3 border-b border-secondary-200;
  }

  .sidebar-widget-list {
    @apply space-y-3;
  }

  .sidebar-widget-item {
    @apply flex items-center justify-between;
    @apply text-sm text-secondary-700;
    @apply hover:text-primary-600 transition-colors;
  }

  /* ============================================
     USER PROFILE ELEMENTS
     ============================================ */

  .profile-header {
    @apply relative bg-gradient-to-br from-primary-600 to-primary-800;
    @apply rounded-t-xl overflow-hidden;
    @apply h-32 sm:h-48;
  }

  .profile-avatar-wrapper {
    @apply relative -mt-12 sm:-mt-16;
    @apply flex justify-center;
  }

  .profile-avatar {
    @apply w-24 h-24 sm:w-32 sm:h-32;
    @apply rounded-full border-4 border-white;
    @apply object-cover shadow-lg;
  }

  .profile-name {
    @apply text-xl sm:text-2xl font-heading font-bold;
    @apply text-secondary-900 text-center mt-4;
  }

  .profile-bio {
    @apply text-sm text-secondary-600 text-center;
    @apply max-w-lg mx-auto mt-2 px-4;
  }

  .profile-stats {
    @apply flex justify-center gap-8 mt-6 mb-6;
  }

  .profile-stat {
    @apply text-center;
  }

  .profile-stat-value {
    @apply text-2xl font-bold text-secondary-900;
  }

  .profile-stat-label {
    @apply text-xs text-secondary-500 uppercase tracking-wide;
  }

  /* ============================================
     FORMS & INPUTS
     ============================================ */

  .form-group {
    @apply mb-4 sm:mb-6;
  }

  .form-label {
    @apply block text-sm font-medium text-secondary-700 mb-2;
  }

  .form-input {
    @apply input;
  }

  .form-input-group {
    @apply relative;
  }

  .form-input-icon {
    @apply absolute left-3 top-1/2 -translate-y-1/2;
    @apply text-secondary-400;
  }

  .form-input-group .form-input {
    @apply pl-10;
  }

  .form-textarea {
    @apply input min-h-[120px] resize-y;
  }

  .form-select {
    @apply input appearance-none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

  .form-checkbox,
  .form-radio {
    @apply w-4 h-4 text-primary-600 border-secondary-300;
    @apply focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
    @apply rounded transition-colors;
  }

  .form-radio {
    @apply rounded-full;
  }

  .form-error {
    @apply mt-1 text-sm text-accent-600;
  }

  .form-help {
    @apply mt-1 text-sm text-secondary-500;
  }

  /* ============================================
     TABLES
     ============================================ */

  .data-table {
    @apply w-full overflow-hidden rounded-lg;
    @apply border border-secondary-200;
  }

  .data-table thead {
    @apply bg-secondary-50;
  }

  .data-table th {
    @apply px-4 py-3 text-left text-xs font-semibold;
    @apply text-secondary-700 uppercase tracking-wider;
  }

  .data-table tbody {
    @apply bg-white divide-y divide-secondary-200;
  }

  .data-table td {
    @apply px-4 py-3 text-sm text-secondary-900;
  }

  .data-table tbody tr {
    @apply transition-colors hover:bg-secondary-50;
  }

  /* ============================================
     MODALS & OVERLAYS
     ============================================ */

  .modal-overlay {
    @apply fixed inset-0 z-50;
    @apply bg-secondary-900/50 backdrop-blur-sm;
    @apply flex items-center justify-center p-4;
    @apply animate-fade-in;
  }

  .modal-content {
    @apply bg-white rounded-xl shadow-hard;
    @apply max-w-lg w-full max-h-[90vh] overflow-y-auto;
    @apply animate-scale-in;
  }

  .modal-header {
    @apply flex items-center justify-between;
    @apply px-6 py-4 border-b border-secondary-200;
  }

  .modal-title {
    @apply text-xl font-heading font-semibold text-secondary-900;
  }

  .modal-close {
    @apply text-secondary-400 hover:text-secondary-600;
    @apply transition-colors;
  }

  .modal-body {
    @apply px-6 py-4;
  }

  .modal-footer {
    @apply flex items-center justify-end gap-3;
    @apply px-6 py-4 border-t border-secondary-200;
  }

  /* ============================================
     ALERTS & NOTIFICATIONS
     ============================================ */

  .alert {
    @apply p-4 rounded-lg border;
    @apply flex items-start gap-3;
  }

  .alert-icon {
    @apply flex-shrink-0 w-5 h-5;
  }

  .alert-content {
    @apply flex-1;
  }

  .alert-title {
    @apply font-semibold mb-1;
  }

  .alert-message {
    @apply text-sm;
  }

  .alert-info {
    @apply bg-blue-50 border-blue-200 text-blue-800;
  }

  .alert-success {
    @apply bg-green-50 border-green-200 text-green-800;
  }

  .alert-warning {
    @apply bg-yellow-50 border-yellow-200 text-yellow-800;
  }

  .alert-error {
    @apply bg-red-50 border-red-200 text-red-800;
  }

  /* Toast notifications */
  .toast-container {
    @apply fixed top-4 right-4 z-50;
    @apply space-y-2;
  }

  .toast {
    @apply alert shadow-lg animate-slide-down;
    @apply min-w-[320px] max-w-md;
  }

  /* ============================================
     PAGINATION
     ============================================ */

  .pagination {
    @apply flex items-center justify-center gap-1;
  }

  .pagination-item {
    @apply w-10 h-10 flex items-center justify-center;
    @apply rounded-lg border border-secondary-200;
    @apply text-sm font-medium text-secondary-700;
    @apply transition-all hover:bg-secondary-50;
  }

  .pagination-item.active {
    @apply bg-primary-600 text-white border-primary-600;
    @apply hover:bg-primary-700;
  }

  .pagination-item:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  /* ============================================
     BREADCRUMBS
     ============================================ */

  .breadcrumb {
    @apply flex items-center gap-2 text-sm;
  }

  .breadcrumb-item {
    @apply text-secondary-600 hover:text-primary-600;
    @apply transition-colors;
  }

  .breadcrumb-separator {
    @apply text-secondary-400;
  }

  .breadcrumb-item.active {
    @apply text-secondary-900 font-medium;
  }

  /* ============================================
     TABS
     ============================================ */

  .tabs {
    @apply flex gap-1 border-b border-secondary-200;
  }

  .tab {
    @apply relative px-4 py-3 text-sm font-medium;
    @apply text-secondary-600 hover:text-secondary-900;
    @apply transition-colors;
  }

  .tab::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-primary-600;
    @apply transition-all duration-300;
  }

  .tab.active {
    @apply text-primary-600;
  }

  .tab.active::after {
    @apply w-full;
  }

  /* ============================================
     TOOLTIPS
     ============================================ */

  .tooltip {
    @apply absolute z-50 px-2 py-1;
    @apply bg-secondary-900 text-white text-xs rounded;
    @apply opacity-0 pointer-events-none;
    @apply transition-opacity duration-200;
  }

  .tooltip.show {
    @apply opacity-100;
  }

  /* ============================================
     SKELETON LOADERS
     ============================================ */

  .skeleton {
    @apply bg-secondary-200 rounded;
    @apply animate-pulse;
  }

  .skeleton-text {
    @apply skeleton h-4 mb-2;
  }

  .skeleton-title {
    @apply skeleton h-6 w-3/4 mb-4;
  }

  .skeleton-avatar {
    @apply skeleton w-12 h-12 rounded-full;
  }

  .skeleton-image {
    @apply skeleton aspect-video w-full;
  }

  /* ============================================
     PROGRESS BARS
     ============================================ */

  .progress-bar {
    @apply w-full h-2 bg-secondary-200 rounded-full overflow-hidden;
  }

  .progress-fill {
    @apply h-full bg-primary-600 rounded-full;
    @apply transition-all duration-300;
  }

  /* ============================================
     SOCIAL SHARE BUTTONS
     ============================================ */

  .share-button {
    @apply w-10 h-10 flex items-center justify-center;
    @apply rounded-full text-white;
    @apply transition-transform hover:scale-110;
  }

  .share-button-facebook {
    @apply share-button bg-[#1877f2];
  }

  .share-button-twitter {
    @apply share-button bg-[#1da1f2];
  }

  .share-button-linkedin {
    @apply share-button bg-[#0a66c2];
  }

  .share-button-email {
    @apply share-button bg-secondary-600;
  }

  /* ============================================
     COMMENTS SECTION
     ============================================ */

  .comment {
    @apply flex gap-4 py-4;
  }

  .comment-avatar {
    @apply flex-shrink-0 w-10 h-10 rounded-full;
  }

  .comment-body {
    @apply flex-1;
  }

  .comment-header {
    @apply flex items-center gap-2 mb-2;
  }

  .comment-author {
    @apply font-semibold text-secondary-900;
  }

  .comment-date {
    @apply text-xs text-secondary-500;
  }

  .comment-content {
    @apply text-sm text-secondary-700 mb-2;
  }

  .comment-actions {
    @apply flex items-center gap-4 text-xs text-secondary-500;
  }

  .comment-action {
    @apply hover:text-primary-600 transition-colors cursor-pointer;
  }

  .comment-reply {
    @apply ml-14 border-l-2 border-secondary-200 pl-4;
  }

  /* ============================================
     BUTTONS - .sh-btn (legacy) and variants
     Simple, polished defaults that follow design tokens
     ============================================ */

  .sh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0.75rem;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    background-color: var(--sh-bg-raised);
    color: var(--sh-text);
    border: 1px solid var(--sh-line-2);
    box-shadow: var(--sh-s1);
    transition: transform 0.12s ease, background-color 0.16s ease, box-shadow 0.16s ease;
    cursor: pointer;
  }

  .sh-btn:hover {
    transform: translateY(-1px);
  }

  .sh-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 6px var(--sh-focus);
  }

  .sh-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .sh-btn-primary {
    background-color: var(--sh-red);
    color: var(--primary-foreground);
    border-color: transparent;
    box-shadow: var(--sh-s-red);
  }

  .sh-btn-primary:hover {
    background-color: var(--sh-red-hover);
  }

  .sh-btn-secondary {
    background-color: transparent;
    color: var(--sh-text);
    border: 1px solid var(--sh-line-2);
  }

  .sh-btn-secondary:hover {
    background-color: var(--sh-bg-muted);
  }

  .sh-btn-lg {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    font-size: 14px;
  }

}

@layer utilities {
     CUSTOM UTILITIES
     ============================================ */

  /* Line clamp utilities */
  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Aspect ratio utilities (fallback for older browsers) */
  .aspect-square {
    aspect-ratio: 1 / 1;
  }

  .aspect-video {
    aspect-ratio: 16 / 9;
  }

  .aspect-portrait {
    aspect-ratio: 3 / 4;
  }

  /* Safe area utilities for mobile */
  .safe-top {
    padding-top: env(safe-area-inset-top);
  }

  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-left {
    padding-left: env(safe-area-inset-left);
  }

  .safe-right {
    padding-right: env(safe-area-inset-right);
  }
}

/* ============================================
   LEGACY COMPONENTS USED BY CURRENT TEMPLATES
   Adapted from old generated CSS to the --sh-* system.
   ============================================ */

.premium-card {
  background-color: var(--sh-bg-raised);
  border: 1px solid var(--sh-line);
  border-radius: 12px;
  box-shadow: var(--sh-s2);
  color: var(--sh-text);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.premium-card:hover {
  border-color: var(--sh-red-muted);
  box-shadow: var(--sh-s3);
  transform: translateY(-2px);
}

.premium-border {
  position: relative;
  background:
    linear-gradient(var(--sh-bg-raised), var(--sh-bg-raised)) padding-box,
    linear-gradient(135deg, transparent 25%, var(--sh-red-muted) 60%, transparent 75%) border-box;
  border: 1px solid transparent;
}

.glow-card {
  position: relative;
}

.glow-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent, var(--sh-red-faint), transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.glow-card:hover::after {
  opacity: 1;
}

.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.012;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html:not(.dark) .noise-overlay {
  opacity: 0.015;
}

.grid-overlay {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 0);
  background-size: 40px 40px;
}

.forgot-password {
  cursor: pointer;
  align-self: flex-end;
  text-align: right;
  font-size: 0.75rem;
  color: var(--sh-red-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.forum-content {
  color: var(--sh-text-2);
  font-family: var(--font-sans);
}

/* Keep Typography's rich-text formatting without its article-width cap. */
.forum-prose {
  width: 100%;
  min-width: 0;
  max-width: none;
  overflow-wrap: anywhere;
}

.forum-prose :where(img, video, iframe, table, pre) {
  max-width: 100%;
}

.forum-prose :where(pre, table) {
  overflow-x: auto;
}

.forum-content img,
.forum-content iframe {
  width: 100%;
  max-width: 100%;
  margin: 2rem 0;
  border: 1px solid var(--sh-line-2);
  border-radius: 16px;
  box-shadow: var(--sh-s3);
}

.forum-content img {
  height: auto;
}

.prose iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 1.5rem 0;
  border: 0;
  border-radius: 1rem;
}

/* Public rich text mirrors Quill's visual rhythm. Do not apply Tailwind
   Typography paragraph/headline transforms on top of editor output. */
.quill-content {
  color: var(--sh-text-2);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75;
  overflow-wrap: anywhere;
  white-space: normal;
}

.quill-content p {
  margin-block: 0;
  line-height: inherit;
  min-height: 1.75em;
}

.quill-content p:has(> br:only-child) {
  min-height: 1.75em;
}

.quill-content h1,
.quill-content h2,
.quill-content h3 {
  margin-block: 1.25em 0.5em;
  color: inherit;
  font-family: inherit;
  font-style: normal;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.25;
  text-transform: none;
}

.quill-content > :first-child { margin-top: 0; }
.quill-content > :last-child { margin-bottom: 0; }
.quill-content strong,
.quill-content b { color: var(--sh-text); font-weight: 700; }
.quill-content em,
.quill-content i { font-style: italic; }
.quill-content u { text-decoration: underline; }
.quill-content s { text-decoration: line-through; }
.quill-content a { color: var(--sh-red); text-decoration: underline; text-underline-offset: 0.2em; }
.quill-content a:hover { color: var(--sh-red-hover); }

.quill-content h1 { font-size: 2em; }
.quill-content h2 { font-size: 1.5em; }
.quill-content h3 { font-size: 1.17em; }

.quill-content ul,
.quill-content ol,
.quill-content blockquote {
  margin-block: 0.75em;
}

.quill-content ul,
.quill-content ol {
  padding-left: 1.5em;
}

.quill-content blockquote {
  border-left: 4px solid var(--sh-line-3);
  padding-left: 1em;
}

.quill-content .ql-align-center { text-align: center; }
.quill-content .ql-align-right { text-align: right; }
.quill-content .ql-align-justify { text-align: justify; }
.quill-content .ql-direction-rtl { direction: rtl; text-align: inherit; }
.quill-content .ql-indent-1 { padding-left: 3em; }
.quill-content .ql-indent-2 { padding-left: 6em; }
.quill-content .ql-indent-3 { padding-left: 9em; }
.quill-content .ql-indent-4 { padding-left: 12em; }
.quill-content .ql-indent-5 { padding-left: 15em; }
.quill-content .ql-indent-6 { padding-left: 18em; }
.quill-content .ql-indent-7 { padding-left: 21em; }
.quill-content .ql-indent-8 { padding-left: 24em; }
.quill-content li[data-list="bullet"] { list-style-type: disc; }
.quill-content li[data-list="ordered"] { list-style-type: decimal; }
.quill-content li[data-list="checked"] { list-style-type: "✓  "; }
.quill-content li[data-list="unchecked"] { list-style-type: "○  "; }

@media (max-width: 640px) {
  .quill-content [class*="ql-indent-"] { padding-left: 1.5em; }
}

[data-controller~="stage-editor"] .ql-toolbar,
[data-controller~="stage-editor"] .ql-container {
    border-color: var(--sh-line-2);
    color: var(--sh-text);
}
[data-controller~="stage-editor"] .ql-toolbar {
    border-radius: 0.75rem 0.75rem 0 0;
    background: var(--sh-bg-muted);
}
[data-controller~="stage-editor"] .ql-editor {
    min-height: 12rem;
    font-size: 0.875rem;
    line-height: 1.7;
}
[data-controller~="stage-editor"] .ql-stroke { stroke: var(--sh-text); }
[data-controller~="stage-editor"] .ql-fill { fill: var(--sh-text); }
[data-controller~="stage-editor"] .ql-picker,
[data-controller~="stage-editor"] .ql-picker-label,
[data-controller~="stage-editor"] .ql-picker-item { color: var(--sh-text); }
[data-controller~="stage-editor"] .ql-picker-options {
    border-color: var(--sh-line-2);
    background: var(--sh-bg-raised);
    color: var(--sh-text);
    box-shadow: var(--sh-s2);
}
[data-controller~="stage-editor"] .ql-editor.ql-blank::before {
    color: #6b7280;
    font-style: normal;
    opacity: 1;
}

.dark [data-controller~="stage-editor"] .ql-editor.ql-blank::before {
    color: #9ca3af;
}

.dark [data-controller~="stage-editor"] .ql-toolbar button:not(:hover):not(:focus):not(.ql-active) .ql-stroke,
.dark [data-controller~="stage-editor"] .ql-toolbar .ql-picker-label:not(:hover):not(.ql-active) .ql-stroke {
    stroke: #e5e7eb;
}

.dark [data-controller~="stage-editor"] .ql-toolbar button:not(:hover):not(:focus):not(.ql-active) .ql-fill,
.dark [data-controller~="stage-editor"] .ql-toolbar .ql-picker-label:not(:hover):not(.ql-active) .ql-fill {
    fill: #e5e7eb;
}

.dark [data-controller~="stage-editor"] .ql-toolbar .ql-picker,
.dark [data-controller~="stage-editor"] .ql-toolbar .ql-picker-label,
.dark [data-controller~="stage-editor"] .ql-toolbar .ql-picker-item {
    color: #e5e7eb;
}
[data-controller~="stage-editor"] .ql-toolbar button:hover,
[data-controller~="stage-editor"] .ql-toolbar button:focus,
[data-controller~="stage-editor"] .ql-toolbar button.ql-active,
[data-controller~="stage-editor"] .ql-picker-label:hover,
[data-controller~="stage-editor"] .ql-picker-label.ql-active {
    border-radius: 0.375rem;
    background: var(--sh-red-faint);
    color: var(--sh-red-text);
}
[data-controller~="stage-editor"] .ql-toolbar button:hover .ql-stroke,
[data-controller~="stage-editor"] .ql-toolbar button:focus .ql-stroke,
[data-controller~="stage-editor"] .ql-toolbar button.ql-active .ql-stroke { stroke: var(--sh-red-text); }
[data-controller~="stage-editor"] .ql-toolbar button:hover .ql-fill,
[data-controller~="stage-editor"] .ql-toolbar button:focus .ql-fill,
[data-controller~="stage-editor"] .ql-toolbar button.ql-active .ql-fill { fill: var(--sh-red-text); }

[data-controller~="stage-editor"] .stage-editor-frame .ql-toolbar,
[data-controller~="stage-editor"] .stage-editor-frame .ql-container {
    border: 0;
}

[data-controller~="stage-editor"] .stage-editor-frame .ql-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 1px solid var(--sh-line-2);
    border-radius: 0;
    padding: 0.75rem;
}

[data-controller~="stage-editor"] .stage-editor-frame .ql-editor {
    min-height: 420px;
    padding: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.75;
}

[data-controller~="stage-editor"] .stage-editor-frame .ql-editor img,
[data-controller~="stage-editor"] .stage-editor-frame .ql-editor iframe {
    display: block;
    width: min(100%, 720px);
    height: auto;
    margin: 1.25rem auto;
    border: 1px solid var(--sh-line-2);
    border-radius: 1rem;
    background: var(--sh-bg-muted);
    box-shadow: var(--sh-s1);
}

[data-controller~="stage-editor"] .stage-editor-frame .ql-editor iframe {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

[data-controller~="stage-editor"] button[aria-busy="true"] {
    cursor: wait;
    opacity: 0.7;
}

@media (max-width: 640px) {
    [data-controller~="stage-editor"] .stage-editor-frame .ql-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    [data-controller~="stage-editor"] .stage-editor-frame .ql-editor {
        min-height: 340px;
        padding: 1rem;
    }
}

.forum-content iframe {
  aspect-ratio: 16 / 9;
}

.forum-content a {
  color: var(--sh-red-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--sh-red-muted);
  text-underline-offset: 4px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.forum-content a:hover {
  color: var(--sh-red-hover);
  text-decoration-color: var(--sh-red-hover);
}

.forum-content p {
  margin-bottom: 1rem;
  color: var(--sh-text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.7;
}

.forum-content h1,
.forum-content h2,
.forum-content h3 {
  color: var(--sh-text);
  font-family: var(--font-syne);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
}

.forum-content h1 {
  margin: 2.5rem 0 1.5rem;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.forum-content h2 {
  margin: 2rem 0 1rem;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}

.forum-content h3 {
  margin: 1.5rem 0 0.75rem;
  font-size: clamp(1.25rem, 3vw, 1.875rem);
}

.forum-content ul,
.forum-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--sh-text-2);
}

.forum-content ul {
  list-style-type: disc;
}

.forum-content ol {
  list-style-type: decimal;
}

.forum-content li + li {
  margin-top: 0.5rem;
}

.forum-content blockquote {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--sh-red);
  border-radius: 0 12px 12px 0;
  background-color: var(--sh-red-faint);
  color: var(--sh-text-2);
  font-style: italic;
}

.forum-content code {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--sh-line);
  border-radius: 6px;
  background-color: var(--sh-bg-muted);
  color: var(--sh-text);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.forum-content pre {
  margin: 1.5rem 0;
  padding: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--sh-line);
  border-radius: 16px;
  background-color: var(--sh-bg-muted);
  color: var(--sh-text);
}

.forum-content pre code {
  padding: 0;
  border: 0;
  background: transparent;
}

@keyframes scroll-up {
  0%,
  25% {
    transform: translateY(0);
  }

  33%,
  58% {
    transform: translateY(-40px);
  }

  66%,
  91% {
    transform: translateY(-80px);
  }

  100% {
    transform: translateY(0);
  }
}

/* Stronger fallback for legacy `.sh-btn` usages to ensure consistent visuals
   This block is intentionally specific and placed at the end so it overrides
   earlier compiled rules if necessary. It's reversible — remove if unwanted. */

button.sh-btn, a.sh-btn, .sh-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.5rem 0.9rem !important;
  min-height: 36px !important;
  border-radius: 0.75rem !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background-color: var(--sh-bg-raised) !important;
  color: var(--sh-text) !important;
  border: 1px solid var(--sh-line-2) !important;
  box-shadow: var(--sh-s1) !important;
  transition: transform 0.12s ease, background-color 0.16s ease, box-shadow 0.16s ease !important;
  cursor: pointer !important;
}

button.sh-btn:hover, a.sh-btn:hover, .sh-btn:hover {
  transform: translateY(-1px) !important;
}

button.sh-btn:focus-visible, a.sh-btn:focus-visible, .sh-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 6px var(--sh-focus) !important;
}

button.sh-btn:disabled, a.sh-btn:disabled, .sh-btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

button.sh-btn.sh-btn-primary, a.sh-btn.sh-btn-primary, .sh-btn.sh-btn-primary {
  background-color: var(--sh-red) !important;
  color: var(--primary-foreground) !important;
  border-color: transparent !important;
  box-shadow: var(--sh-s-red) !important;
}

button.sh-btn.sh-btn-primary:hover, a.sh-btn.sh-btn-primary:hover, .sh-btn.sh-btn-primary:hover {
  background-color: var(--sh-red-hover) !important;
}

button.sh-btn.sh-btn-secondary, a.sh-btn.sh-btn-secondary, .sh-btn.sh-btn-secondary {
  background-color: transparent !important;
  color: var(--sh-text) !important;
  border: 1px solid var(--sh-line-2) !important;
}

button.sh-btn.sh-btn-secondary:hover, a.sh-btn.sh-btn-secondary:hover, .sh-btn.sh-btn-secondary:hover {
  background-color: var(--sh-bg-muted) !important;
}

/* =====================================================================
   GLOBAL SURFACE NORMALIZATION
   These rules intentionally come last: legacy templates use a mix of
   Tailwind utilities and older component classes, but they now resolve to
   the same elevation, border and interaction language in both themes.
   ===================================================================== */
html, body {
  min-height: 100%;
  background: var(--sh-bg);
  color: var(--sh-text);
}

body {
  font-family: var(--font-sans);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 { color: var(--sh-text); }
p { color: var(--sh-text-2); }

a { transition: color .18s ease, opacity .18s ease; }
button, input, textarea, select { font: inherit; }

input:not([type='checkbox']):not([type='radio']), textarea, select {
  border-radius: var(--sh-radius-sm);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* Native select menus intentionally remain native for keyboard, screen-reader
   and mobile OS support. These tokens keep the closed field and desktop option
   popup legible in both themes; color-scheme lets iOS/Android use the matching
   system picker when they own the open menu. */
select {
  color: var(--sh-text);
  background-color: var(--sh-bg-input);
  border-color: var(--sh-line-2);
  color-scheme: light;
}

select option,
select optgroup {
  color: var(--sh-text);
  background-color: var(--sh-bg-raised);
}

select option:checked {
  color: #fff;
  background-color: var(--sh-red);
}

select option:disabled,
select optgroup:disabled {
  color: var(--sh-text-3);
  background-color: var(--sh-bg-muted);
}

html.dark select { color-scheme: dark; }

input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sh-focus);
}

.premium-card,
.cyber-glass-card,
.cyber-glass {
  border-color: var(--sh-line-2);
  box-shadow: var(--sh-s2);
}

.premium-card { border-radius: var(--sh-radius-lg); }
.cyber-glass, .cyber-glass-card { background: var(--sh-bg-glass-raised); }

.premium-card:hover,
.cyber-glass-card:hover {
  border-color: var(--sh-red-muted);
  box-shadow: var(--sh-s3);
}

.sh-btn,
.btn {
  min-height: 2.5rem;
  border-radius: var(--sh-radius-sm);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sh-btn-primary,
.btn-primary {
  background: var(--sh-red) !important;
  color: #fff !important;
  border-color: var(--sh-red) !important;
}

.sh-btn-primary:hover,
.btn-primary:hover { background: var(--sh-red-hover) !important; }

html:not(.dark) .bg-white\/5,
html:not(.dark) .bg-black\/5 { background-color: var(--sh-bg-muted); }

html:not(.dark) .bg-white\/10,
html:not(.dark) .bg-black\/10 { background-color: #e6eaf0; }

html:not(.dark) .border-white\/5,
html:not(.dark) .border-white\/10 { border-color: var(--sh-line-2); }

html:not(.dark) .text-gray-300,
html:not(.dark) .text-gray-400,
html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400 { color: var(--sh-text-3); }

html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-600,
html:not(.dark) .text-slate-500,
html:not(.dark) .text-slate-600 { color: var(--sh-text-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Light-theme contrast bridge for legacy Twig views.
   Many older templates were authored dark-first and place `text-white` inside
   shared cards. Scope the correction to known light surfaces; image heroes and
   intentionally dark/accent surfaces keep their original white text below. */
html:not(.dark) :is(.premium-card, .cyber-glass, .cyber-glass-card, .bg-card,
  [class~='bg-white/5'], [class~='bg-white/10'], [class~='bg-black/5'], [class~='bg-black/10'])
  :is(.text-white, [class~='text-white/90'], [class~='text-white/80'], [class~='text-white/70'], [class~='text-white/60'], [class~='text-white/50'], [class~='text-white/40'], [class~='text-white/30'], [class~='text-white/20']) {
  color: var(--sh-text) !important;
}

html:not(.dark) :is(.premium-card, .cyber-glass, .cyber-glass-card, .bg-card,
  [class~='bg-white/5'], [class~='bg-white/10'], [class~='bg-black/5'], [class~='bg-black/10'])
  :is([class~='text-white/90'], [class~='text-white/80'], [class~='text-white/70']) {
  color: var(--sh-text-2) !important;
}

html:not(.dark) :is(.premium-card, .cyber-glass, .cyber-glass-card, .bg-card,
  [class~='bg-white/5'], [class~='bg-white/10'], [class~='bg-black/5'], [class~='bg-black/10'])
  :is([class~='text-white/60'], [class~='text-white/50'], [class~='text-white/40'], [class~='text-white/30'], [class~='text-white/20']) {
  color: var(--sh-text-3) !important;
}

html:not(.dark) .prose-invert {
  --tw-prose-body: var(--sh-text-2);
  --tw-prose-headings: var(--sh-text);
  --tw-prose-lead: var(--sh-text-2);
  --tw-prose-links: var(--sh-red-text);
  --tw-prose-bold: var(--sh-text);
  --tw-prose-counters: var(--sh-text-3);
  --tw-prose-bullets: var(--sh-line-3);
  --tw-prose-hr: var(--sh-line);
  --tw-prose-quotes: var(--sh-text);
  --tw-prose-quote-borders: var(--sh-red-muted);
  --tw-prose-captions: var(--sh-text-3);
  --tw-prose-code: var(--sh-text);
  --tw-prose-pre-code: var(--sh-text-2);
  --tw-prose-pre-bg: var(--sh-bg-muted);
}

/* Explicitly preserve readable white foreground on intentional dark/accent UI. */
html:not(.dark) :is(.cyber-button, .sh-btn-primary, .btn-primary,
  [class*='bg-red-'], [class*='bg-blue-'], [class*='bg-emerald-'], [class*='bg-green-'],
  [class*='bg-amber-'], [class~='bg-black/40'], [class~='bg-black/50'], [class~='bg-black/60'], [class~='bg-black/70'], [class~='bg-black/80'], [class~='bg-black/90'], [class*='bg-zinc-9'], [class*='bg-slate-9'])
  :is(.text-white, [class~='text-white/90'], [class~='text-white/80'], [class~='text-white/70'], [class~='text-white/60'], [class~='text-white/50'], [class~='text-white/40'], [class~='text-white/30'], [class~='text-white/20']),
html:not(.dark) :is(.cyber-button, .sh-btn-primary, .btn-primary).text-white {
  color: #fff !important;
}

/* Final fallback: templates created for the former dark-only UI often use
   text-white without a matching dark surface. In light mode readable text is
   the default; the selectors below retain white only where it is intentional. */
html:not(.dark) :is(.text-white, [class~='text-white/90'], [class~='text-white/80'], [class~='text-white/70'], [class~='text-white/60'], [class~='text-white/50'], [class~='text-white/40'], [class~='text-white/30'], [class~='text-white/20']) {
  color: var(--sh-text) !important;
}

html:not(.dark) :is([class~='text-white/90'], [class~='text-white/80'], [class~='text-white/70']) {
  color: var(--sh-text-2) !important;
}

html:not(.dark) :is([class~='text-white/60'], [class~='text-white/50'], [class~='text-white/40'], [class~='text-white/30'], [class~='text-white/20']) {
  color: var(--sh-text-3) !important;
}

html:not(.dark) :is(.cyber-button, .sh-btn-primary, .btn-primary,
  [class*='bg-red-'], [class*='bg-blue-'], [class*='bg-emerald-'], [class*='bg-green-'], [class*='bg-amber-'],
  [class~='bg-black/40'], [class~='bg-black/50'], [class~='bg-black/60'], [class~='bg-black/70'], [class~='bg-black/80'], [class~='bg-black/90'],
  [class*='bg-zinc-9'], [class*='bg-slate-9'], .absolute, .fixed)
  :is(.text-white, [class~='text-white/90'], [class~='text-white/80'], [class~='text-white/70'], [class~='text-white/60'], [class~='text-white/50'], [class~='text-white/40'], [class~='text-white/30'], [class~='text-white/20']),
html:not(.dark) :is(.cyber-button, .sh-btn-primary, .btn-primary,
  [class*='bg-red-'], [class*='bg-blue-'], [class*='bg-emerald-'], [class*='bg-green-'], [class*='bg-amber-'],
  [class~='bg-black/40'], [class~='bg-black/50'], [class~='bg-black/60'], [class~='bg-black/70'], [class~='bg-black/80'], [class~='bg-black/90'],
  [class*='bg-zinc-9'], [class*='bg-slate-9']).text-white {
  color: #fff !important;
}

/* =====================================================================
   END OF LEGACY COMPONENTS
   ===================================================================== */
  .page-title {
    font-family: var(--font-syne);
    font-size: 32px;
    font-weight: 800;
    line-height: 2.25rem;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    margin: 0px;
    @apply uppercase;
    @apply tracking-tighter;
    @apply font-syne m-0 leading-none;
  } 

  .page-description {
    color: var(--sh-text-3);
    font-weight: 400;
    font-size: 12px;
    margin-top: 0.375rem;
    margin: 0px;
  }

  .btn-standard {
    @apply sh-btn;
    @apply sh-btn-primary;
  }

  #confirm-modal {
    z-index: 999999 !important;
  }

  /* Shared interface primitives — use these instead of repeating long visual utilities. */
  .sh-card { background: var(--sh-bg-raised); border: 1px solid var(--sh-line); border-radius: var(--sh-radius-xl); box-shadow: var(--sh-s1); }
  .sh-card-interactive { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .sh-card-interactive:hover { transform: translateY(-2px); border-color: var(--sh-red-muted); box-shadow: var(--sh-s2); }
  .sh-field { width: 100%; min-height: 2.75rem; padding: .7rem 1rem; border: 1px solid var(--sh-line-input); border-radius: var(--sh-radius); background: var(--sh-bg-input); color: var(--sh-text); transition: border-color .2s, box-shadow .2s; }
  .sh-field:focus { outline: none; border-color: var(--sh-red); box-shadow: 0 0 0 3px var(--sh-focus); }
  .sh-field-label { display:block; margin: 0 0 .5rem .25rem; color: var(--sh-text-3); font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .sh-filter-label { display:block; margin: 0 0 .5rem .25rem; color: var(--sh-text-3); font-size: .5625rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .sh-filter-field { width: 100%; min-height: 3rem; padding: 0 1rem; color: var(--sh-text); background: var(--sh-bg-input); border: 1px solid var(--sh-line-2); border-radius: .75rem; outline: none; }
  .sh-filter-field-icon { padding-left: 3.5rem; }
  .sh-filter-field:focus { border-color: var(--sh-red); box-shadow: 0 0 0 3px var(--sh-focus); }
  .sh-filter-submit { min-height: 3.5rem; padding-inline: 2rem; border-radius: 1rem; font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
  .sh-create-action { min-height: 3rem; padding-inline: 1.5rem; border-radius: .875rem; font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .sh-action { display: inline-flex; align-items: center; gap: .4rem; font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-text-3); transition: color .2s; }
  .sh-action:hover { color: var(--sh-red); }
  .sh-section-link { display:inline-flex; align-items:center; gap:.375rem; height:2.125rem; padding:0 .875rem; border-radius:.375rem; color:var(--sh-text); font-size:.5625rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; transition:color .2s,border-color .2s,background-color .2s; }
  .sh-section-link:hover { color:#f87171; border-color:rgba(239,68,68,.5); }
  .sh-panel { background:var(--sh-bg-raised); border:1px solid var(--sh-line); border-radius:1.5rem; overflow:hidden; box-shadow:var(--sh-s1); }
  .sh-panel-elevated { box-shadow:var(--sh-s2); }
  .sh-heading { color: var(--sh-text); }
  .sh-muted { color: var(--sh-text-3); }
  .sh-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--sh-line-2); border-radius: var(--sh-radius-sm); background: var(--sh-bg-raised); color: var(--sh-text-2); cursor: pointer; transition: color .18s, background-color .18s, border-color .18s, transform .18s; }
  .sh-icon-btn:hover { color: var(--sh-text); background: var(--sh-bg-muted); border-color: var(--sh-red-muted); transform: translateY(-1px); }
  .sh-btn-danger { color: var(--sh-danger); border-color: var(--sh-red-muted); background: var(--sh-red-faint); }
  .sh-btn-danger:hover { color: #fff; border-color: var(--sh-red); background: var(--sh-red); }
  .sh-btn-success { color: #047857; border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.1); }
  .sh-btn-success:hover { color: #fff; border-color: #10b981; background: #10b981; }
  html.dark .sh-btn-success { color: #6ee7b7; }
  .project-hero { min-height: 450px; }
  .project-timeline { gap: 1.5rem; }
  .project-timeline-item { position: relative; padding: 0 0 1.5rem 4rem; }
  .project-timeline-item::before { content: ''; position: absolute; left: 1.3125rem; top: 2.75rem; bottom: -1.5rem; width: 3px; border-radius: 999px; background: linear-gradient(to bottom, var(--sh-red), transparent); box-shadow: 0 0 15px rgba(220,38,38,.8); }
  .project-timeline-item:last-child::before { display: none; }
  .project-timeline-marker { position: absolute; top: 0; left: 0; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border-radius: .875rem; color: var(--sh-red); }
  .project-timeline-card { padding: 2rem; }
  .project-timeline-comments { margin-top: 1rem; padding: 1.25rem; border-radius: 1.25rem; background: var(--sh-bg-muted); border: 1px solid var(--sh-line); }
  .comments-section { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 2.5rem; }
  .comments-heading { margin: 0; color: var(--sh-text); font-family: var(--font-heading, Inter, sans-serif); font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }
  .comments-count { margin-left: .4rem; color: var(--sh-text-3); font-size: .75rem; }
  .comment-compose { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border: 1px solid var(--sh-line); border-radius: 1.25rem; background: var(--sh-bg-raised); box-shadow: var(--sh-s1); }
  .comment-compose-row, .comment { display: flex; gap: .875rem; }
  .comment-compose-body, .comment-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .625rem; }
  .comment-avatar { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--sh-line-2); border-radius: .75rem; background: var(--sh-red-faint); box-shadow: var(--sh-s1); }
  .comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .comment-avatar-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--sh-red); font-size: .75rem; font-weight: 800; }
  .comment-field { width: 100%; min-height: 6rem; padding: 1rem; resize: vertical; color: var(--sh-text); background: var(--sh-bg); border: 1px solid var(--sh-line-2); border-radius: 1rem; font: inherit; font-size: .875rem; outline: none; }
  .comment-field:focus { border-color: var(--sh-red); }
  .comment-submit-row { display: flex; justify-content: flex-end; gap: .5rem; }
  .comment-list { display: flex; flex-direction: column; gap: 1.5rem; }
  .comment-header, .comment-meta, .comment-footer { display: flex; align-items: center; }
  .comment-header { justify-content: space-between; gap: .5rem; }
  .comment-meta { flex-wrap: wrap; gap: .5rem; min-width: 0; }
  .comment-author { color: var(--sh-text); font-size: .6875rem; font-weight: 800; text-transform: uppercase; text-decoration: none; }
  .comment-author:hover, .comment-action:hover { color: var(--sh-red); }
  .comment-date, .comment-action { color: var(--sh-text-3); font-size: .5625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .comment-actions, .comment-footer { display: flex; gap: .75rem; }
  .comment-icon-action { padding: .25rem; border: 0; background: transparent; color: var(--sh-text-3); cursor: pointer; }
  .comment-content { color: var(--sh-text); font-size: .875rem; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
  .comment-action { display: inline-flex; align-items: center; gap: .375rem; padding: 0; border: 0; background: transparent; cursor: pointer; transition: color .2s; }
  .comment-reply-field { display: none; margin-top: .5rem; }
  .comment-replies { display: flex; flex-direction: column; gap: 1.25rem; margin-top: .75rem; padding-left: 1rem; border-left: 2px solid var(--sh-line); }
  .comment-empty { padding: 3rem 1rem; border: 2px dashed var(--sh-line-2); border-radius: 1.25rem; color: var(--sh-text-3); font-size: .6875rem; font-weight: 800; text-align: center; text-transform: uppercase; }
  @media (max-width: 639px) {
    .project-hero { min-height: 31rem; height: auto; border-radius: 1.5rem; }
    .project-hero > img { position: absolute; }
    .project-timeline { gap: 1rem; }
    .project-timeline-item { padding-left: 0; padding-bottom: 1rem; }
    .project-timeline-item::before, .project-timeline-marker { display: none; }
    .project-timeline-card { padding: 1.125rem; border-radius: 1.25rem; }
    .project-timeline-comments { padding: 1rem; border-radius: 1rem; }
    .comments-section { gap: 1rem; padding-bottom: 1.5rem; }
    .comment-compose { padding: 1rem; border-radius: 1rem; }
    .comment-compose-row, .comment { gap: .625rem; }
    .comment-avatar { width: 2rem; height: 2rem; border-radius: .625rem; }
    .comment-header { align-items: flex-start; }
    .comment-footer { flex-wrap: wrap; gap: .875rem; }
    .comment-replies { margin-left: -.125rem; padding-left: .75rem; }
  }
  .sh-avatar-status { border: 2px solid var(--sh-line-2); box-shadow: var(--sh-s1); transition: border-color .2s, box-shadow .2s; }
  .sh-avatar-online { border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.15), 0 0 18px rgba(16,185,129,.25); }
  .sh-avatar-offline { border-color: rgba(220,38,38,.35); }