Spaces:

stremio-db
/

a

Paused

FTA7700

Fix rating order hover border to brighter (not transparent); add card-flat-matching border to all 4 preview boxes

4ae30f0 3 months ago

12.8 kB

@font-face {
  font-family: 'geomanist';
  src: url('./fonts/Geomanist-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  src: url('./fonts/Geomanist-ExtraLight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  src: url('./fonts/Geomanist-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  src: url('./fonts/Geomanist-Book.otf') format('opentype');
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  src: url('./fonts/Geomanist-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  src: url('./fonts/Geomanist-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  src: url('./fonts/Geomanist-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  src: url('./fonts/Geomanist-Ultra.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  src: url('./fonts/Geomanist-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

:root {
  --radius: 0.625rem;
  --gradient-cta-from: oklch(0.577 0.245 27.325);
  --gradient-cta-to: oklch(0.577 0.245 27.325);
  --gradient-cta-from: oklch(0.577 0.245 27.325);
  --gradient-cta-to: oklch(0.577 0.245 27.325);
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.45 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --gradient-cta-from: #fd6019;
  --gradient-cta-to: #ff1f05;
  --background: oklch(0.155 0.032 298);
  --foreground: oklch(0.96 0.01 298);
  --card: oklch(0.218 0.033 294);
  --card-foreground: oklch(0.96 0.01 298);
  --popover: oklch(0.218 0.033 294);
  --popover-foreground: oklch(0.96 0.01 298);
  --primary: oklch(0.92 0.015 298);
  --primary-foreground: oklch(0.2 0.03 298);
  --secondary: oklch(0.268 0.03 296);
  --secondary-foreground: oklch(0.96 0.01 298);
  --muted: oklch(0.235 0.075 287);
  --muted-foreground: oklch(0.7 0.02 298);
  --accent: oklch(0.268 0.03 296);
  --accent-foreground: oklch(0.98 0.01 298);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(0.281 0.027 304 / 60%);
  --input: oklch(0.85 0.03 298 / 15%);
  --ring: oklch(0.556 0.02 298);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.14 0.03 298);
  --sidebar-foreground: oklch(0.96 0.01 298);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.268 0.03 296);
  --sidebar-accent-foreground: oklch(0.98 0.01 298);
  --sidebar-border: oklch(0.281 0.027 304 / 60%);
  --sidebar-ring: oklch(0.556 0.02 298);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    font-family: 'geomanist', ui-sans-serif, system-ui, sans-serif;
  }
  .dark body {
    background-image: radial-gradient(ellipse 900px 600px at 50% -10%, oklch(0.276 0.05 334.5 / 55%), transparent 70%);
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
  button,
  select,
  input[type='checkbox'],
  input[type='radio'],
  input[type='submit'],
  input[type='reset'],
  input[type='button'],
  label[for],
  a,
  [role='button'] {
    cursor: pointer;
  }
}

@layer utilities {
  .dark .card-glow {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow: 0 0 0 1px oklch(1 0 0 / 10%) inset, 0 1px 0 0 oklch(0.75 0.12 40 / 30%) inset;
    background-image:
      radial-gradient(55% 100% at 55% 2%, oklch(0.6 0.08 20 / 25%) 0%, oklch(0.4 0.06 20 / 8%) 100%),
      linear-gradient(oklch(0 0 0 / 0%), oklch(0.08 0.02 300 / 37%)),
      radial-gradient(85% 170% at 52% 40%, oklch(0.25 0.15 300 / 15%) 0%, oklch(0.7 0.02 100 / 0%) 80%),
      radial-gradient(125% 197% at 32% 142%, oklch(0.6 0.08 20 / 65%) 0%, oklch(0 0 0 / 0%) 36.9%),
      radial-gradient(90% 10% at 50% 0%, oklch(0.6 0.08 20 / 5%) 0%, oklch(0.4 0.06 20 / 0%) 90%);
    background-repeat: no-repeat;
  }
  .dark .card-glow-sub {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    box-shadow: 0 0 0 1px oklch(1 0 0 / 10%) inset, 0 1px 0 0 oklch(0.75 0.12 40 / 30%) inset;
    backdrop-filter: blur(64px);
    -webkit-backdrop-filter: blur(64px);
    background-image:
      radial-gradient(127% 234% at 10% 142%, oklch(0.65 0.09 40 / 13%) 0%, oklch(0 0 0 / 0%) 37%),
      radial-gradient(67% 136% at 77% 24%, oklch(0.3 0.2 265 / 9%) 0%, oklch(0.7 0.02 100 / 0%) 80%),
      linear-gradient(oklch(0 0 0 / 10%), oklch(0.08 0.02 300 / 26%)),
      radial-gradient(66% 111% at 50% 0%, oklch(0.55 0.08 20 / 4%) 0%, oklch(0.4 0.06 20 / 0%) 100%),
      linear-gradient(oklch(0.1 0.03 290 / 60%), oklch(0.1 0.03 290 / 60%));
    background-repeat: no-repeat;
  }
  .card-glow-hover {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .card-glow-hover:hover {
    border-color: oklch(0.85 0.05 300 / 25%);
    box-shadow: 0 0 32px oklch(0.276 0.05 334.5 / 25%);
  }

  /* ===== Card Flat — Light Theme (default) ===== */
  .card-flat {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
  }

  /* ===== Card Flat — Dark Theme ===== */
  .dark .card-flat {
    border-color: transparent;
    box-shadow: 0 0 0 1px oklch(0.65 0.15 30 / 35%) inset;
    background-image:
      radial-gradient(126.99% 234.27% at 10.15% 142.35%, #d97e4b22 0%, #fff0 37%),
      radial-gradient(66.99% 135.93% at 77.49% 23.63%, #0400ff17 0%, #a3a78800 80%),
      linear-gradient(#0000001a, #0d0a1942),
      radial-gradient(65.55% 111.2% at 50% 0%, #a85c5c0b 0%, #67454500 100%),
      linear-gradient(#18132999 0%, #18132999 100%);
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
  }
  .dark .card-flat:hover {
    transform: translateY(-4px);
  }

  /* ===== Card Purple Hover — Light Theme (default) ===== */
  .card-purple-hover {
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  .card-purple-hover:hover {
    background-color: var(--muted);
    border-color: var(--border);
  }

  /* ===== Card Purple Hover — Dark Theme ===== */
  .dark .card-purple-hover:hover {
    background-color: oklch(0.268 0.03 295.8);
    border-color: oklch(0.85 0.05 300 / 20%);
  }

  /* ===== Rating Row — Light Theme (default) ===== */
  .rating-row-hover {
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  .rating-row-hover:hover {
    background-color: var(--muted);
    border-color: var(--border);
  }

  /* ===== Rating Row — Dark Theme (dynamic blue/purple background) ===== */
  @property --row-bg-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
  }
  @property --row-bg-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
  }
  .dark .rating-row-hover {
    --row-bg-1: transparent;
    --row-bg-2: transparent;
    background: linear-gradient(to bottom, var(--row-bg-1), var(--row-bg-2)),
      linear-gradient(141deg, #077ac7, #6b21ef);
    border-color: transparent;
    box-shadow: inset 0 1px 1px #fff3, 0 1px 2px #08080833, 0 4px 4px #08080814, 0 7px 0 -12px #077ac7, inset 0 6px 12px #ffffff1f;
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), --row-bg-1 0.3s linear, --row-bg-2 0.3s linear;
    position: relative;
  }
  .dark .rating-row-hover:hover {
    --row-bg-1: hsla(0, 0%, 100%, 0.1);
    --row-bg-2: hsla(0, 0%, 100%, 0);
  }

  /* ===== Rating Order Glow — Dark Theme only, opt-in via .rating-order-glow-dark ===== */
  /* Resting state: override the inherited permanent blue/purple background from .rating-row-hover, restore plain border look */
  .dark .rating-order-glow-dark {
    background-image: none !important;
    box-shadow: none !important;
    border-color: var(--border) !important;
  }
  .dark .rating-order-glow-dark:hover {
    background-image:
      radial-gradient(65% 110% at 50% 0px, rgba(168, 92, 92, 0.1) 0px, rgba(103, 69, 69, 0) 100%),
      radial-gradient(66% 135% at 77% 23%, rgba(4, 0, 255, 0.15) 0px, rgba(163, 167, 136, 0) 80%),
      radial-gradient(125% 234% at 10% 142%, rgba(217, 126, 75, 0.15) 0px, rgba(255, 255, 255, 0) 37%) !important;
    box-shadow: none !important;
    border-color: oklch(0.45 0.03 304 / 90%) !important;
  }

  /* ===== Preview Box Border — matches Dashboard .card-flat border treatment ===== */
  .preview-box-border {
    border: 1px solid var(--border);
  }
  .dark .preview-box-border {
    border-color: transparent;
    box-shadow: 0 0 0 1px oklch(0.65 0.15 30 / 35%) inset;
  }

  /* ===== Orange CTA gradient button (btn-primary recipe) ===== */
  @property --bg-from {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
  }
  @property --bg-to {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
  }
  @property --bg-hover {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
  }
  @property --bg-rotation {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }
  .btn-gradient-cta {
    --bg-from: var(--gradient-cta-from);
    --bg-to: var(--gradient-cta-to);
    --bg-hover: transparent;
    --bg-rotation: 135deg;
    background: linear-gradient(to bottom, var(--bg-hover), var(--bg-hover)),
      linear-gradient(var(--bg-rotation), var(--bg-from), var(--bg-to));
    transition: --bg-from 0.3s, --bg-to 0.3s, --bg-hover 0.3s, --bg-rotation 0.3s;
  }
  .btn-gradient-cta:hover {
    --bg-hover: hsla(0, 0%, 100%, 0.15);
    --bg-rotation: 30deg;
  }
}

	@font-face {
	font-family: 'geomanist';
	src: url('./fonts/Geomanist-Thin.otf') format('opentype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
	}
	@font-face {
	font-family: 'geomanist';
	src: url('./fonts/Geomanist-ExtraLight.otf') format('opentype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
	}
	@font-face {
	font-family: 'geomanist';
	src: url('./fonts/Geomanist-Light.otf') format('opentype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
	}
	@font-face {
	font-family: 'geomanist';
	src: url('./fonts/Geomanist-Book.otf') format('opentype');
	font-weight: 350;
	font-style: normal;
	font-display: swap;
	}
	@font-face {
	font-family: 'geomanist';
	src: url('./fonts/Geomanist-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	}
	@font-face {
	font-family: 'geomanist';
	src: url('./fonts/Geomanist-Medium.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	}
	@font-face {
	font-family: 'geomanist';
	src: url('./fonts/Geomanist-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	}
	@font-face {
	font-family: 'geomanist';
	src: url('./fonts/Geomanist-Ultra.otf') format('opentype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
	}
	@font-face {
	font-family: 'geomanist';
	src: url('./fonts/Geomanist-Black.otf') format('opentype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	}

	@import "tailwindcss";
	@import "tw-animate-css";

	@custom-variant dark (&:is(.dark *));

	@theme inline {
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);
	--color-background: var(--background);
	--color-foreground: var(--foreground);
	--color-card: var(--card);
	--color-card-foreground: var(--card-foreground);
	--color-popover: var(--popover);
	--color-popover-foreground: var(--popover-foreground);
	--color-primary: var(--primary);
	--color-primary-foreground: var(--primary-foreground);
	--color-secondary: var(--secondary);
	--color-secondary-foreground: var(--secondary-foreground);
	--color-muted: var(--muted);
	--color-muted-foreground: var(--muted-foreground);
	--color-accent: var(--accent);
	--color-accent-foreground: var(--accent-foreground);
	--color-destructive: var(--destructive);
	--color-border: var(--border);
	--color-input: var(--input);
	--color-ring: var(--ring);
	--color-chart-1: var(--chart-1);
	--color-chart-2: var(--chart-2);
	--color-chart-3: var(--chart-3);
	--color-chart-4: var(--chart-4);
	--color-chart-5: var(--chart-5);
	--color-sidebar: var(--sidebar);
	--color-sidebar-foreground: var(--sidebar-foreground);
	--color-sidebar-primary: var(--sidebar-primary);
	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
	--color-sidebar-accent: var(--sidebar-accent);
	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
	--color-sidebar-border: var(--sidebar-border);
	--color-sidebar-ring: var(--sidebar-ring);
	}

	:root {
	--radius: 0.625rem;
	--gradient-cta-from: oklch(0.577 0.245 27.325);
	--gradient-cta-to: oklch(0.577 0.245 27.325);
	--gradient-cta-from: oklch(0.577 0.245 27.325);
	--gradient-cta-to: oklch(0.577 0.245 27.325);
	--background: oklch(1 0 0);
	--foreground: oklch(0.145 0 0);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.145 0 0);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.145 0 0);
	--primary: oklch(0.205 0 0);
	--primary-foreground: oklch(0.985 0 0);
	--secondary: oklch(0.97 0 0);
	--secondary-foreground: oklch(0.205 0 0);
	--muted: oklch(0.97 0 0);
	--muted-foreground: oklch(0.45 0 0);
	--accent: oklch(0.97 0 0);
	--accent-foreground: oklch(0.205 0 0);
	--destructive: oklch(0.577 0.245 27.325);
	--border: oklch(0.922 0 0);
	--input: oklch(0.922 0 0);
	--ring: oklch(0.708 0 0);
	--chart-1: oklch(0.646 0.222 41.116);
	--chart-2: oklch(0.6 0.118 184.704);
	--chart-3: oklch(0.398 0.07 227.392);
	--chart-4: oklch(0.828 0.189 84.429);
	--chart-5: oklch(0.769 0.188 70.08);
	--sidebar: oklch(0.985 0 0);
	--sidebar-foreground: oklch(0.145 0 0);
	--sidebar-primary: oklch(0.205 0 0);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.97 0 0);
	--sidebar-accent-foreground: oklch(0.205 0 0);
	--sidebar-border: oklch(0.922 0 0);
	--sidebar-ring: oklch(0.708 0 0);
	}

	.dark {
	--gradient-cta-from: #fd6019;
	--gradient-cta-to: #ff1f05;
	--background: oklch(0.155 0.032 298);
	--foreground: oklch(0.96 0.01 298);
	--card: oklch(0.218 0.033 294);
	--card-foreground: oklch(0.96 0.01 298);
	--popover: oklch(0.218 0.033 294);
	--popover-foreground: oklch(0.96 0.01 298);
	--primary: oklch(0.92 0.015 298);
	--primary-foreground: oklch(0.2 0.03 298);
	--secondary: oklch(0.268 0.03 296);
	--secondary-foreground: oklch(0.96 0.01 298);
	--muted: oklch(0.235 0.075 287);
	--muted-foreground: oklch(0.7 0.02 298);
	--accent: oklch(0.268 0.03 296);
	--accent-foreground: oklch(0.98 0.01 298);
	--destructive: oklch(0.704 0.191 22.216);
	--border: oklch(0.281 0.027 304 / 60%);
	--input: oklch(0.85 0.03 298 / 15%);
	--ring: oklch(0.556 0.02 298);
	--chart-1: oklch(0.488 0.243 264.376);
	--chart-2: oklch(0.696 0.17 162.48);
	--chart-3: oklch(0.769 0.188 70.08);
	--chart-4: oklch(0.627 0.265 303.9);
	--chart-5: oklch(0.645 0.246 16.439);
	--sidebar: oklch(0.14 0.03 298);
	--sidebar-foreground: oklch(0.96 0.01 298);
	--sidebar-primary: oklch(0.488 0.243 264.376);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.268 0.03 296);
	--sidebar-accent-foreground: oklch(0.98 0.01 298);
	--sidebar-border: oklch(0.281 0.027 304 / 60%);
	--sidebar-ring: oklch(0.556 0.02 298);
	}

	@layer base {
	* {
	@apply border-border outline-ring/50;
	}
	body {
	@apply bg-background text-foreground;
	font-family: 'geomanist', ui-sans-serif, system-ui, sans-serif;
	}
	.dark body {
	background-image: radial-gradient(ellipse 900px 600px at 50% -10%, oklch(0.276 0.05 334.5 / 55%), transparent 70%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	}
	button,
	select,
	input[type='checkbox'],
	input[type='radio'],
	input[type='submit'],
	input[type='reset'],
	input[type='button'],
	label[for],
	a,
	[role='button'] {
	cursor: pointer;
	}
	}

	@layer utilities {
	.dark .card-glow {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	box-shadow: 0 0 0 1px oklch(1 0 0 / 10%) inset, 0 1px 0 0 oklch(0.75 0.12 40 / 30%) inset;
	background-image:
	radial-gradient(55% 100% at 55% 2%, oklch(0.6 0.08 20 / 25%) 0%, oklch(0.4 0.06 20 / 8%) 100%),
	linear-gradient(oklch(0 0 0 / 0%), oklch(0.08 0.02 300 / 37%)),
	radial-gradient(85% 170% at 52% 40%, oklch(0.25 0.15 300 / 15%) 0%, oklch(0.7 0.02 100 / 0%) 80%),
	radial-gradient(125% 197% at 32% 142%, oklch(0.6 0.08 20 / 65%) 0%, oklch(0 0 0 / 0%) 36.9%),
	radial-gradient(90% 10% at 50% 0%, oklch(0.6 0.08 20 / 5%) 0%, oklch(0.4 0.06 20 / 0%) 90%);
	background-repeat: no-repeat;
	}
	.dark .card-glow-sub {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	box-shadow: 0 0 0 1px oklch(1 0 0 / 10%) inset, 0 1px 0 0 oklch(0.75 0.12 40 / 30%) inset;
	backdrop-filter: blur(64px);
	-webkit-backdrop-filter: blur(64px);
	background-image:
	radial-gradient(127% 234% at 10% 142%, oklch(0.65 0.09 40 / 13%) 0%, oklch(0 0 0 / 0%) 37%),
	radial-gradient(67% 136% at 77% 24%, oklch(0.3 0.2 265 / 9%) 0%, oklch(0.7 0.02 100 / 0%) 80%),
	linear-gradient(oklch(0 0 0 / 10%), oklch(0.08 0.02 300 / 26%)),
	radial-gradient(66% 111% at 50% 0%, oklch(0.55 0.08 20 / 4%) 0%, oklch(0.4 0.06 20 / 0%) 100%),
	linear-gradient(oklch(0.1 0.03 290 / 60%), oklch(0.1 0.03 290 / 60%));
	background-repeat: no-repeat;
	}
	.card-glow-hover {
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	}
	.card-glow-hover:hover {
	border-color: oklch(0.85 0.05 300 / 25%);
	box-shadow: 0 0 32px oklch(0.276 0.05 334.5 / 25%);
	}

	/* ===== Card Flat — Light Theme (default) ===== */
	.card-flat {
	background-color: var(--card);
	border: 1px solid var(--border);
	border-radius: 1.5rem;
	}

	/* ===== Card Flat — Dark Theme ===== */
	.dark .card-flat {
	border-color: transparent;
	box-shadow: 0 0 0 1px oklch(0.65 0.15 30 / 35%) inset;
	background-image:
	radial-gradient(126.99% 234.27% at 10.15% 142.35%, #d97e4b22 0%, #fff0 37%),
	radial-gradient(66.99% 135.93% at 77.49% 23.63%, #0400ff17 0%, #a3a78800 80%),
	linear-gradient(#0000001a, #0d0a1942),
	radial-gradient(65.55% 111.2% at 50% 0%, #a85c5c0b 0%, #67454500 100%),
	linear-gradient(#18132999 0%, #18132999 100%);
	background-repeat: no-repeat;
	transition: transform 0.3s ease;
	}
	.dark .card-flat:hover {
	transform: translateY(-4px);
	}

	/* ===== Card Purple Hover — Light Theme (default) ===== */
	.card-purple-hover {
	transition: background-color 0.2s ease, border-color 0.2s ease;
	}
	.card-purple-hover:hover {
	background-color: var(--muted);
	border-color: var(--border);
	}

	/* ===== Card Purple Hover — Dark Theme ===== */
	.dark .card-purple-hover:hover {
	background-color: oklch(0.268 0.03 295.8);
	border-color: oklch(0.85 0.05 300 / 20%);
	}

	/* ===== Rating Row — Light Theme (default) ===== */
	.rating-row-hover {
	transition: background-color 0.2s ease, border-color 0.2s ease;
	}
	.rating-row-hover:hover {
	background-color: var(--muted);
	border-color: var(--border);
	}

	/* ===== Rating Row — Dark Theme (dynamic blue/purple background) ===== */
	@property --row-bg-1 {
	syntax: '<color>';
	inherits: false;
	initial-value: transparent;
	}
	@property --row-bg-2 {
	syntax: '<color>';
	inherits: false;
	initial-value: transparent;
	}
	.dark .rating-row-hover {
	--row-bg-1: transparent;
	--row-bg-2: transparent;
	background: linear-gradient(to bottom, var(--row-bg-1), var(--row-bg-2)),
	linear-gradient(141deg, #077ac7, #6b21ef);
	border-color: transparent;
	box-shadow: inset 0 1px 1px #fff3, 0 1px 2px #08080833, 0 4px 4px #08080814, 0 7px 0 -12px #077ac7, inset 0 6px 12px #ffffff1f;
	transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), --row-bg-1 0.3s linear, --row-bg-2 0.3s linear;
	position: relative;
	}
	.dark .rating-row-hover:hover {
	--row-bg-1: hsla(0, 0%, 100%, 0.1);
	--row-bg-2: hsla(0, 0%, 100%, 0);
	}

	/* ===== Rating Order Glow — Dark Theme only, opt-in via .rating-order-glow-dark ===== */
	/* Resting state: override the inherited permanent blue/purple background from .rating-row-hover, restore plain border look */
	.dark .rating-order-glow-dark {
	background-image: none !important;
	box-shadow: none !important;
	border-color: var(--border) !important;
	}
	.dark .rating-order-glow-dark:hover {
	background-image:
	radial-gradient(65% 110% at 50% 0px, rgba(168, 92, 92, 0.1) 0px, rgba(103, 69, 69, 0) 100%),
	radial-gradient(66% 135% at 77% 23%, rgba(4, 0, 255, 0.15) 0px, rgba(163, 167, 136, 0) 80%),
	radial-gradient(125% 234% at 10% 142%, rgba(217, 126, 75, 0.15) 0px, rgba(255, 255, 255, 0) 37%) !important;
	box-shadow: none !important;
	border-color: oklch(0.45 0.03 304 / 90%) !important;
	}

	/* ===== Preview Box Border — matches Dashboard .card-flat border treatment ===== */
	.preview-box-border {
	border: 1px solid var(--border);
	}
	.dark .preview-box-border {
	border-color: transparent;
	box-shadow: 0 0 0 1px oklch(0.65 0.15 30 / 35%) inset;
	}

	/* ===== Orange CTA gradient button (btn-primary recipe) ===== */
	@property --bg-from {
	syntax: '<color>';
	inherits: false;
	initial-value: transparent;
	}
	@property --bg-to {
	syntax: '<color>';
	inherits: false;
	initial-value: transparent;
	}
	@property --bg-hover {
	syntax: '<color>';
	inherits: false;
	initial-value: transparent;
	}
	@property --bg-rotation {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
	}
	.btn-gradient-cta {
	--bg-from: var(--gradient-cta-from);
	--bg-to: var(--gradient-cta-to);
	--bg-hover: transparent;
	--bg-rotation: 135deg;
	background: linear-gradient(to bottom, var(--bg-hover), var(--bg-hover)),
	linear-gradient(var(--bg-rotation), var(--bg-from), var(--bg-to));
	transition: --bg-from 0.3s, --bg-to 0.3s, --bg-hover 0.3s, --bg-rotation 0.3s;
	}
	.btn-gradient-cta:hover {
	--bg-hover: hsla(0, 0%, 100%, 0.15);
	--bg-rotation: 30deg;
	}
	}