/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-amber-50: oklch(98.7% 0.022 95.277);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-200: oklch(92.4% 0.12 95.746);
    --color-amber-600: oklch(66.6% 0.179 58.318);
    --color-amber-700: oklch(55.5% 0.163 48.998);
    --color-amber-800: oklch(47.3% 0.137 46.201);
    --color-emerald-50: oklch(97.9% 0.021 166.113);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-200: oklch(90.5% 0.093 164.15);
    --color-emerald-300: oklch(84.5% 0.143 164.978);
    --color-emerald-500: oklch(69.6% 0.17 162.48);
    --color-emerald-600: oklch(59.6% 0.145 163.225);
    --color-emerald-700: oklch(50.8% 0.118 165.612);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-emerald-900: oklch(37.8% 0.077 168.94);
    --color-cyan-500: oklch(71.5% 0.143 215.221);
    --color-blue-50: oklch(97% 0.014 254.604);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-200: oklch(88.2% 0.059 254.128);
    --color-blue-300: oklch(80.9% 0.105 251.813);
    --color-blue-500: oklch(62.3% 0.214 259.815);
    --color-blue-600: oklch(54.6% 0.245 262.881);
    --color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-violet-50: oklch(96.9% 0.016 293.756);
    --color-violet-100: oklch(94.3% 0.029 294.588);
    --color-violet-500: oklch(60.6% 0.25 292.717);
    --color-violet-600: oklch(54.1% 0.281 293.009);
    --color-violet-700: oklch(49.1% 0.27 292.581);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-100: oklch(96.8% 0.007 247.896);
    --color-slate-200: oklch(92.9% 0.013 255.508);
    --color-slate-300: oklch(86.9% 0.022 252.894);
    --color-slate-400: oklch(70.4% 0.04 256.788);
    --color-slate-500: oklch(55.4% 0.046 257.417);
    --color-slate-600: oklch(44.6% 0.043 257.281);
    --color-slate-700: oklch(37.2% 0.044 257.287);
    --color-slate-800: oklch(27.9% 0.041 260.031);
    --color-slate-900: oklch(20.8% 0.042 265.755);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wider: 0.05em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --blur-sm: 8px;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1\/2 {
    top: calc(1/2 * 100%);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .z-10 {
    z-index: 10;
  }
  .z-30 {
    z-index: 30;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[70\] {
    z-index: 70;
  }
  .z-\[100\] {
    z-index: 100;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-9 {
    margin-bottom: calc(var(--spacing) * 9);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-\[74px\] {
    height: 74px;
  }
  .h-full {
    height: 100%;
  }
  .h-screen {
    height: 100vh;
  }
  .max-h-\[92vh\] {
    max-height: 92vh;
  }
  .min-h-\[620px\] {
    min-height: 620px;
  }
  .min-h-\[calc\(100vh-5rem\)\] {
    min-height: calc(100vh - 5rem);
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-72 {
    width: calc(var(--spacing) * 72);
  }
  .w-full {
    width: 100%;
  }
  .max-w-2xl {
    max-width: var(--container-2xl);
  }
  .max-w-5xl {
    max-width: var(--container-5xl);
  }
  .max-w-6xl {
    max-width: var(--container-6xl);
  }
  .max-w-7xl {
    max-width: var(--container-7xl);
  }
  .max-w-\[220px\] {
    max-width: 220px;
  }
  .max-w-\[300px\] {
    max-width: 300px;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-sm {
    max-width: var(--container-sm);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-\[780px\] {
    min-width: 780px;
  }
  .min-w-\[860px\] {
    min-width: 860px;
  }
  .min-w-\[1180px\] {
    min-width: 1180px;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .list-decimal {
    list-style-type: decimal;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .space-y-1\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .divide-slate-100 {
    :where(& > :not(:last-child)) {
      border-color: var(--color-slate-100);
    }
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-amber-200 {
    border-color: var(--color-amber-200);
  }
  .border-blue-100 {
    border-color: var(--color-blue-100);
  }
  .border-blue-200 {
    border-color: var(--color-blue-200);
  }
  .border-blue-300 {
    border-color: var(--color-blue-300);
  }
  .border-emerald-100 {
    border-color: var(--color-emerald-100);
  }
  .border-emerald-200 {
    border-color: var(--color-emerald-200);
  }
  .border-emerald-300 {
    border-color: var(--color-emerald-300);
  }
  .border-red-200 {
    border-color: var(--color-red-200);
  }
  .border-slate-100 {
    border-color: var(--color-slate-100);
  }
  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-slate-300 {
    border-color: var(--color-slate-300);
  }
  .border-slate-800 {
    border-color: var(--color-slate-800);
  }
  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }
  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }
  .bg-amber-600 {
    background-color: var(--color-amber-600);
  }
  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }
  .bg-emerald-50 {
    background-color: var(--color-emerald-50);
  }
  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }
  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }
  .bg-red-50 {
    background-color: var(--color-red-50);
  }
  .bg-red-100 {
    background-color: var(--color-red-100);
  }
  .bg-red-600 {
    background-color: var(--color-red-600);
  }
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .bg-slate-200 {
    background-color: var(--color-slate-200);
  }
  .bg-slate-800 {
    background-color: var(--color-slate-800);
  }
  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }
  .bg-slate-950 {
    background-color: var(--color-slate-950);
  }
  .bg-slate-950\/60 {
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 60%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 60%, transparent);
    }
  }
  .bg-slate-950\/70 {
    background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 70%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-slate-950) 70%, transparent);
    }
  }
  .bg-violet-50 {
    background-color: var(--color-violet-50);
  }
  .bg-violet-100 {
    background-color: var(--color-violet-100);
  }
  .bg-violet-600 {
    background-color: var(--color-violet-600);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/5 {
    background-color: color-mix(in srgb, #fff 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
    }
  }
  .bg-white\/10 {
    background-color: color-mix(in srgb, #fff 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    }
  }
  .bg-white\/15 {
    background-color: color-mix(in srgb, #fff 15%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .from-blue-700 {
    --tw-gradient-from: var(--color-blue-700);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .via-blue-600 {
    --tw-gradient-via: var(--color-blue-600);
    --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-cyan-500 {
    --tw-gradient-to: var(--color-cyan-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-7 {
    padding: calc(var(--spacing) * 7);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }
  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }
  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }
  .pb-24 {
    padding-bottom: calc(var(--spacing) * 24);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-11 {
    padding-left: calc(var(--spacing) * 11);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }
  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[6px\] {
    font-size: 6px;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.2em\] {
    --tw-tracking: 0.2em;
    letter-spacing: 0.2em;
  }
  .tracking-\[0\.14em\] {
    --tw-tracking: 0.14em;
    letter-spacing: 0.14em;
  }
  .tracking-\[0\.16em\] {
    --tw-tracking: 0.16em;
    letter-spacing: 0.16em;
  }
  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }
  .break-all {
    word-break: break-all;
  }
  .text-amber-600 {
    color: var(--color-amber-600);
  }
  .text-amber-700 {
    color: var(--color-amber-700);
  }
  .text-amber-800 {
    color: var(--color-amber-800);
  }
  .text-blue-100 {
    color: var(--color-blue-100);
  }
  .text-blue-300 {
    color: var(--color-blue-300);
  }
  .text-blue-500 {
    color: var(--color-blue-500);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }
  .text-blue-700 {
    color: var(--color-blue-700);
  }
  .text-blue-800 {
    color: var(--color-blue-800);
  }
  .text-emerald-600 {
    color: var(--color-emerald-600);
  }
  .text-emerald-700 {
    color: var(--color-emerald-700);
  }
  .text-emerald-800 {
    color: var(--color-emerald-800);
  }
  .text-emerald-900 {
    color: var(--color-emerald-900);
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-red-600 {
    color: var(--color-red-600);
  }
  .text-red-700 {
    color: var(--color-red-700);
  }
  .text-slate-200 {
    color: var(--color-slate-200);
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-800 {
    color: var(--color-slate-800);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }
  .text-violet-600 {
    color: var(--color-violet-600);
  }
  .text-violet-700 {
    color: var(--color-violet-700);
  }
  .text-white {
    color: var(--color-white);
  }
  .capitalize {
    text-transform: capitalize;
  }
  .lowercase {
    text-transform: lowercase;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-\[0_-4px_20px_rgba\(15\,23\,42\,0\.06\)\] {
    --tw-shadow: 0 -4px 20px var(--tw-shadow-color, rgba(15,23,42,0.06));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-blue-100 {
    --tw-shadow-color: oklch(93.2% 0.032 255.585);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-blue-100) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-blue-200 {
    --tw-shadow-color: oklch(88.2% 0.059 254.128);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-blue-200) var(--tw-shadow-alpha), transparent);
    }
  }
  .shadow-violet-100 {
    --tw-shadow-color: oklch(94.3% 0.029 294.588);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow-color: color-mix(in oklab, var(--color-violet-100) var(--tw-shadow-alpha), transparent);
    }
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .hover\:bg-amber-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-100);
      }
    }
  }
  .hover\:bg-amber-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-amber-700);
      }
    }
  }
  .hover\:bg-blue-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-100);
      }
    }
  }
  .hover\:bg-blue-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-blue-700);
      }
    }
  }
  .hover\:bg-emerald-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-emerald-100);
      }
    }
  }
  .hover\:bg-emerald-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-emerald-700);
      }
    }
  }
  .hover\:bg-red-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-100);
      }
    }
  }
  .hover\:bg-red-500\/10 {
    &:hover {
      @media (hover: hover) {
        background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
        }
      }
    }
  }
  .hover\:bg-red-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-red-700);
      }
    }
  }
  .hover\:bg-slate-50 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-50);
      }
    }
  }
  .hover\:bg-slate-200 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-200);
      }
    }
  }
  .hover\:bg-slate-300 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-300);
      }
    }
  }
  .hover\:bg-slate-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-700);
      }
    }
  }
  .hover\:bg-slate-800 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-slate-800);
      }
    }
  }
  .hover\:bg-violet-100 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-violet-100);
      }
    }
  }
  .hover\:bg-violet-700 {
    &:hover {
      @media (hover: hover) {
        background-color: var(--color-violet-700);
      }
    }
  }
  .hover\:text-red-300 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-red-300);
      }
    }
  }
  .hover\:text-slate-700 {
    &:hover {
      @media (hover: hover) {
        color: var(--color-slate-700);
      }
    }
  }
  .hover\:text-white {
    &:hover {
      @media (hover: hover) {
        color: var(--color-white);
      }
    }
  }
  .hover\:underline {
    &:hover {
      @media (hover: hover) {
        text-decoration-line: underline;
      }
    }
  }
  .focus\:border-blue-500 {
    &:focus {
      border-color: var(--color-blue-500);
    }
  }
  .focus\:border-emerald-500 {
    &:focus {
      border-color: var(--color-emerald-500);
    }
  }
  .focus\:border-violet-500 {
    &:focus {
      border-color: var(--color-violet-500);
    }
  }
  .focus\:ring-4 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .focus\:ring-blue-100 {
    &:focus {
      --tw-ring-color: var(--color-blue-100);
    }
  }
  .focus\:ring-emerald-100 {
    &:focus {
      --tw-ring-color: var(--color-emerald-100);
    }
  }
  .focus\:ring-violet-100 {
    &:focus {
      --tw-ring-color: var(--color-violet-100);
    }
  }
  .focus\:ring-violet-500 {
    &:focus {
      --tw-ring-color: var(--color-violet-500);
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .disabled\:opacity-60 {
    &:disabled {
      opacity: 60%;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:w-auto {
    @media (width >= 40rem) {
      width: auto;
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-\[1fr_auto_auto\] {
    @media (width >= 40rem) {
      grid-template-columns: 1fr auto auto;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:flex-wrap {
    @media (width >= 40rem) {
      flex-wrap: wrap;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:items-end {
    @media (width >= 40rem) {
      align-items: flex-end;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:justify-end {
    @media (width >= 40rem) {
      justify-content: flex-end;
    }
  }
  .sm\:p-5 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 5);
    }
  }
  .sm\:p-6 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .sm\:p-12 {
    @media (width >= 40rem) {
      padding: calc(var(--spacing) * 12);
    }
  }
  .sm\:text-3xl {
    @media (width >= 40rem) {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:pb-0 {
    @media (width >= 48rem) {
      padding-bottom: calc(var(--spacing) * 0);
    }
  }
  .lg\:flex {
    @media (width >= 64rem) {
      display: flex;
    }
  }
  .lg\:hidden {
    @media (width >= 64rem) {
      display: none;
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[1\.4fr_0\.6fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 1.4fr 0.6fr;
    }
  }
  .lg\:grid-cols-\[1fr_0\.7fr\] {
    @media (width >= 64rem) {
      grid-template-columns: 1fr 0.7fr;
    }
  }
  .lg\:p-8 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 8);
    }
  }
  .lg\:p-16 {
    @media (width >= 64rem) {
      padding: calc(var(--spacing) * 16);
    }
  }
  .xl\:grid-cols-4 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-\[1\.5fr_0\.8fr_0\.8fr_0\.8fr_auto\] {
    @media (width >= 80rem) {
      grid-template-columns: 1.5fr 0.8fr 0.8fr 0.8fr auto;
    }
  }
  .xl\:flex-row {
    @media (width >= 80rem) {
      flex-direction: row;
    }
  }
  .xl\:items-center {
    @media (width >= 80rem) {
      align-items: center;
    }
  }
  .xl\:justify-between {
    @media (width >= 80rem) {
      justify-content: space-between;
    }
  }
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}

  

    /* Layout konten lebar dan tabel responsif */
    .app-content-shell {
      width: 100%;
      max-width: none;
      min-width: 0;
      margin: 0;
      padding: 1rem;
    }
    .view-section {
      width: 100%;
      min-width: 0;
    }
    .table-wide-shell {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-gutter: stable;
      -webkit-overflow-scrolling: touch;
    }
    .table-wide-shell table {
      width: 100%;
      table-layout: auto;
    }
    .table-wide-shell::-webkit-scrollbar {
      height: 9px;
    }
    .table-wide-shell::-webkit-scrollbar-track {
      background: rgba(148, 163, 184, .13);
      border-radius: 999px;
    }
    .table-wide-shell::-webkit-scrollbar-thumb {
      background: rgba(100, 116, 139, .48);
      border-radius: 999px;
    }
    #view-guests .guest-data-table {
      min-width: 1120px;
    }
    #view-guests .guest-data-table th,
    #view-guests .guest-data-table td {
      padding-left: .85rem !important;
      padding-right: .85rem !important;
      vertical-align: middle;
    }
    #view-log table th,
    #view-log table td,
    #view-users table th,
    #view-users table td {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
    .guest-permalink-cell {
      width: min(240px, 22vw);
      max-width: 240px;
    }
    .guest-id-cell {
      max-width: 180px;
    }
    .guest-action-grid {
      display: grid !important;
      grid-template-columns: repeat(4, 2.25rem);
      justify-content: end;
      gap: .4rem !important;
      min-width: 10rem;
    }
    @media (min-width: 640px) {
      .app-content-shell { padding: 1.25rem; }
    }
    @media (min-width: 1024px) {
      .app-content-shell { padding: 1.5rem; }
    }
    @media (min-width: 1536px) {
      .app-content-shell { padding: 1.75rem 2rem; }
      #view-guests .guest-data-table { min-width: 100%; }
      .guest-permalink-cell { width: 260px; max-width: 260px; }
    }
    @media (max-width: 767px) {
      .app-content-shell { padding: .85rem; }
      #view-guests .guest-data-table { min-width: 1060px; }
      .table-wide-shell::after {
        content: "Geser tabel ke samping untuk melihat kolom lainnya";
        position: sticky;
        left: .75rem;
        display: inline-block;
        margin: .6rem .75rem .75rem;
        padding: .35rem .65rem;
        border-radius: 999px;
        background: rgba(15, 23, 42, .76);
        color: #fff;
        font-size: 10px;
        pointer-events: none;
      }
    }

:root {
      color-scheme: light;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #f8fafc;
    }

    body {
      overscroll-behavior: none;
    }

    .fade-in {
      animation: fadeIn 0.25s ease-out;
    }

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

    .modal-panel {
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-desktop.active {
      background: #2563eb;
      color: #ffffff;
    }

    .nav-mobile {
      position: relative;
      margin: 7px 2px;
      border: 1px solid transparent;
      border-radius: 14px;
      transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
    }

    .nav-mobile::before {
      content: "";
      position: absolute;
      top: 4px;
      left: 50%;
      width: 20px;
      height: 3px;
      border-radius: 999px;
      background: transparent;
      transform: translateX(-50%) scaleX(.35);
      transition: background-color .18s ease, transform .18s ease;
    }

    .nav-mobile.active {
      color: var(--app-accent, #2563eb);
      background: rgba(var(--app-accent-rgb, 37, 99, 235), .13);
      border-color: rgba(var(--app-accent-rgb, 37, 99, 235), .22);
      font-weight: 700;
    }

    .nav-mobile.active::before {
      background: var(--app-accent, #2563eb);
      transform: translateX(-50%) scaleX(1);
    }

    .nav-mobile.active > i {
      transform: translateY(-1px) scale(1.08);
    }

    html[data-app-mode="dark"] .nav-mobile.active {
      background: rgba(var(--app-accent-rgb, 37, 99, 235), .22);
      border-color: rgba(var(--app-accent-rgb, 37, 99, 235), .38);
    }

    ::-webkit-scrollbar {
      width: 7px;
      height: 7px;
    }

    ::-webkit-scrollbar-track {
      background: #f1f5f9;
    }

    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 999px;
    }

    #reader {
      width: 100%;
      min-height: 320px;
      background: #020617;
      border-radius: 0.9rem;
      overflow: hidden;
    }

    #reader video,
    #reader canvas {
      display: block !important;
      width: 100% !important;
      height: auto !important;
      min-height: 320px;
      max-height: min(72vh, 720px);
      object-fit: cover;
      border-radius: 0.9rem;
      background: #020617;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
    }

    #reader video {
      playsinline: true;
      -webkit-playsinline: true;
    }

    #reader__dashboard_section_csr span,
    #reader__dashboard_section_swaplink {
      color: #2563eb !important;
    }

    .stella-native-toast {
      position: fixed;
      top: max(16px, env(safe-area-inset-top));
      right: 16px;
      z-index: 99999;
      max-width: min(360px, calc(100vw - 32px));
      padding: 12px 16px;
      border-radius: 12px;
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
      animation: fadeIn 0.2s ease-out;
    }

    @supports (-webkit-touch-callout: none) {
      #reader,
      #reader video,
      #reader canvas {
        min-height: 300px;
      }
    }

    .safe-bottom {
      padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    .spinner {
      width: 42px;
      height: 42px;
      border: 4px solid #dbeafe;
      border-top-color: #2563eb;
      border-radius: 999px;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .scanner-line {
      position: absolute;
      left: 15%;
      right: 15%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #34d399, transparent);
      box-shadow: 0 0 12px rgba(52, 211, 153, 0.9);
      animation: scanLine 2.2s ease-in-out infinite;
    }

    @keyframes scanLine {
      0%, 100% {
        top: 25%;
      }
      50% {
        top: 75%;
      }
    }


    .invitation-editor-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
      gap: 24px;
      align-items: start;
    }
    .invitation-editor-form-stack { display: grid; gap: 20px; }
    .invitation-preview-sticky { position: sticky; top: 24px; }
    .invitation-color-field { display: grid; grid-template-columns: 46px 1fr; gap: 9px; align-items: center; }
    .invitation-color-field > span { grid-column: 1 / -1; font-size: 14px; font-weight: 500; color: #334155; }
    .invitation-color-field input[type="color"] { width: 46px; height: 42px; padding: 3px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; }
    .invitation-color-field input[type="text"] { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 10px; outline: none; font-family: ui-monospace, monospace; }
    .invitation-toggle { display: flex; min-height: 48px; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; color: #334155; font-size: 13px; font-weight: 600; }
    .invitation-toggle input { width: 18px; height: 18px; accent-color: #d97706; }
    .gift-accounts-editor-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:12px; }
    .gift-accounts-editor-heading strong,.gift-accounts-editor-heading small { display:block; }
    .gift-accounts-editor-heading strong { color:#334155; font-size:14px; }
    .gift-accounts-editor-heading small { margin-top:2px; color:#64748b; font-size:11px; }
    .gift-account-add-button { display:inline-flex; min-height:38px; flex:0 0 auto; align-items:center; justify-content:center; gap:7px; padding:8px 12px; border:1px solid #ddd6fe; border-radius:11px; background:#f5f3ff; color:#6d28d9; font-size:12px; font-weight:700; transition:background-color .2s ease,border-color .2s ease,opacity .2s ease; }
    .gift-account-add-button:hover:not(:disabled) { border-color:#c4b5fd; background:#ede9fe; }
    .gift-account-add-button:disabled { cursor:not-allowed; opacity:.48; }
    .gift-accounts-editor-list { display:grid; gap:12px; }
    .gift-account-empty { display:flex; align-items:center; gap:12px; min-height:78px; padding:15px; border:1px dashed #cbd5e1; border-radius:14px; background:#f8fafc; color:#64748b; }
    .gift-account-empty > i { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; border-radius:11px; background:#ede9fe; color:#7c3aed; }
    .gift-account-empty strong,.gift-account-empty span { display:block; }
    .gift-account-empty strong { color:#334155; font-size:13px; }
    .gift-account-empty span { margin-top:2px; font-size:11px; }
    .gift-account-editor-card { overflow:hidden; border:1px solid #e2e8f0; border-radius:15px; background:#fff; }
    .gift-account-editor-card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; background:#f8fafc; color:#334155; font-size:12px; font-weight:800; }
    .gift-account-editor-card-heading button { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border:0; border-radius:8px; background:#fff1f2; color:#be123c; font-size:11px; font-weight:700; }
    .gift-account-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; padding:13px; }
    .gift-account-editor-grid label > span { display:block; margin-bottom:5px; color:#475569; font-size:11px; font-weight:700; }
    .gift-account-editor-grid input { width:100%; min-height:42px; padding:9px 11px; border:1px solid #cbd5e1; border-radius:10px; color:#1e293b; font:inherit; font-size:13px; outline:none; }
    .gift-account-editor-grid input:focus { border-color:#8b5cf6; box-shadow:0 0 0 3px rgba(139,92,246,.12); }
    .gift-account-holder-field { grid-column:1/-1; }
    .invitation-live-preview { --preview-accent:#b7893e; --preview-page:#f6f1e8; --preview-hero:#201a14; --preview-text:#27231d; overflow:hidden; border:8px solid #0f172a; border-radius:30px; background:var(--preview-page); color:var(--preview-text); box-shadow:0 22px 60px rgba(15,23,42,.22); font-family:Inter,Arial,sans-serif; }
    .preview-navigation { position:relative; z-index:4; display:flex; align-items:center; gap:10px; min-height:50px; padding:7px 10px; overflow:hidden; background:rgba(15,23,42,.96); color:#fff; }
    .preview-navigation:after { content:""; position:absolute; right:0; bottom:0; left:0; height:2px; background:linear-gradient(90deg,var(--preview-accent) 0 58%,rgba(255,255,255,.12) 58%); }
    .preview-navigation > span { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; border-radius:50%; background:var(--preview-accent); font-family:var(--preview-heading,"Cormorant Garamond"),Georgia,serif; font-size:17px; font-weight:700; }
    .preview-navigation > div { display:flex; min-width:0; flex:1; justify-content:center; gap:5px; }
    .preview-navigation b { display:flex; align-items:center; gap:4px; padding:5px 8px; border-radius:999px; color:rgba(255,255,255,.62); font-size:7px; letter-spacing:.04em; transition:transform .2s ease,background-color .2s ease,color .2s ease; }
    .preview-navigation b:before { content:attr(data-preview-icon); display:grid; width:18px; height:18px; place-items:center; border-radius:50%; background:rgba(255,255,255,.08); color:currentColor; font-size:11px; transition:transform .2s ease; }
    .preview-navigation b:hover { background:rgba(255,255,255,.1); color:#fff; transform:translateY(-1px); }
    .preview-navigation b:hover:before { transform:scale(1.12) rotate(-6deg); }
    .preview-navigation b:first-child { background:var(--preview-accent); color:#fff; }
    .preview-navigation b:first-child:before { animation:preview-nav-icon 1.8s ease-in-out infinite; }
    @keyframes preview-nav-icon { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px) scale(1.08); } }
    .preview-hero { position:relative; min-height:510px; display:grid; place-items:center; padding:42px 20px; overflow:hidden; isolation:isolate; background-color:var(--preview-hero); color:#fff; perspective:900px; transform-style:preserve-3d; }
    .preview-hero-media { position:absolute; inset:-18px; z-index:-2; background-position:center; background-size:cover; transform:translate3d(var(--preview-pan-x,0),var(--preview-pan-y,0),0) scale(var(--preview-hero-zoom,1.08)); transition:transform .18s ease-out; }
    .preview-overlay { position:absolute; inset:0; z-index:-1; background:linear-gradient(145deg,rgba(15,12,8,.95),rgba(15,12,8,.45)); }
    .preview-motion-scene { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
    .preview-motion-scene span { position:absolute; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.24),color-mix(in srgb,var(--preview-accent) 26%,transparent) 46%,transparent 72%); mix-blend-mode:screen; }
    .preview-motion-scene span:first-child { top:8%; left:4%; width:170px; height:170px; animation:preview-orb-one 8s ease-in-out infinite alternate; }
    .preview-motion-scene span:last-child { right:3%; bottom:6%; width:120px; height:120px; animation:preview-orb-two 11s ease-in-out infinite alternate-reverse; }
    @keyframes preview-orb-one { from { transform:translate3d(-18px,-8px,0) scale(.92); } to { transform:translate3d(66px,48px,0) scale(1.13); } }
    @keyframes preview-orb-two { from { transform:translate3d(18px,16px,0) scale(.88); } to { transform:translate3d(-72px,-58px,0) scale(1.18); } }
    .invitation-live-preview.theme-romantic .preview-motion-scene span { border-radius:72% 28% 64% 36%; background:linear-gradient(145deg,rgba(255,238,244,.38),color-mix(in srgb,var(--preview-accent) 30%,transparent)); }
    .invitation-live-preview.theme-classic .preview-motion-scene span { background:transparent; border:3px double color-mix(in srgb,var(--preview-accent) 58%,#fff); box-shadow:inset 0 0 0 12px color-mix(in srgb,var(--preview-accent) 5%,transparent); }
    .invitation-live-preview.theme-modern .preview-motion-scene span { border-radius:16%; clip-path:polygon(0 18%,82% 0,100% 82%,18% 100%); background:linear-gradient(135deg,color-mix(in srgb,var(--preview-accent) 38%,transparent),transparent); }
    .invitation-live-preview.theme-minimal .preview-motion-scene span { opacity:.23; background:transparent; border-style:dashed; border-color:var(--preview-accent); }
    .invitation-live-preview.theme-dark .preview-motion-scene span { width:9px; height:9px; background:#fff; border:0; box-shadow:38px 28px 0 -2px var(--preview-accent),82px 74px 0 -2px #fff,132px 22px 0 -3px var(--preview-accent),168px 105px 0 -2px #fff; }
    .invitation-live-preview.theme-botanical .preview-motion-scene span { border-radius:100% 0 100% 0; background:linear-gradient(145deg,color-mix(in srgb,var(--preview-accent) 38%,#fff 4%),transparent); }
    .invitation-live-preview.theme-rustic .preview-motion-scene span { border-radius:42% 58% 36% 64%/55% 38% 62% 45%; filter:sepia(.35); }
    .invitation-live-preview.theme-royal .preview-motion-scene span { border-radius:12%; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:linear-gradient(135deg,rgba(255,255,255,.32),color-mix(in srgb,var(--preview-accent) 48%,transparent)); }
    .invitation-live-preview.theme-islamic .preview-motion-scene span { border-radius:0; clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%); background:color-mix(in srgb,var(--preview-accent) 30%,transparent); }
    .invitation-live-preview.theme-pastel .preview-motion-scene span { border:0; border-radius:62% 38% 52% 48%/44% 57% 43% 56%; filter:blur(2px); }
    .invitation-live-preview.theme-luxury .preview-motion-scene span { width:220px; height:2px; border:0; border-radius:2px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--preview-accent) 75%,#fff),transparent); }
    .invitation-live-preview.theme-sunset .preview-motion-scene span { border:0; background:radial-gradient(circle at 38% 34%,rgba(255,245,214,.76),color-mix(in srgb,var(--preview-accent) 46%,transparent) 46%,transparent 72%); }
    .invitation-live-preview.theme-threed .preview-motion-scene span { background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.48),color-mix(in srgb,var(--preview-accent) 36%,transparent) 42%,rgba(20,8,50,.08) 70%); box-shadow:inset -16px -20px 32px rgba(20,8,50,.22),0 20px 38px rgba(20,8,50,.22); }
    .preview-content { position:relative; z-index:1; width:100%; text-align:center; transform:translateZ(28px) rotateX(var(--preview-tilt-x,0deg)) rotateY(var(--preview-tilt-y,0deg)); transition:transform .18s ease-out; transform-style:preserve-3d; }
    .preview-monogram { display:grid; width:58px; height:58px; margin:0 auto 18px; place-items:center; border:1px solid var(--preview-accent); border-radius:50%; color:var(--preview-accent); font:600 30px/1 Georgia,serif; }
    .preview-eyebrow { margin:0 0 10px; color:var(--preview-accent); font-size:9px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
    .preview-content h3 { margin:0; font-family:var(--preview-heading,"Cormorant Garamond"),Georgia,serif; font-size:48px; line-height:.95; }
    .preview-hosts { margin:14px 0; font-family:var(--preview-heading,"Cormorant Garamond"),Georgia,serif; font-size:23px; font-style:italic; }
    .preview-opening { margin:0 auto; max-width:390px; color:rgba(255,255,255,.78); font-size:11px; line-height:1.7; }
    .preview-guest-card { margin:26px auto 0; padding:18px; max-width:350px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); backdrop-filter:blur(8px); }
    .preview-guest-card small,.preview-guest-card strong,.preview-guest-card span { display:block; }
    .preview-guest-card small { color:rgba(255,255,255,.68); font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
    .preview-guest-card strong { margin:6px 0 9px; font-family:var(--preview-heading,"Cormorant Garamond"),Georgia,serif; font-size:27px; }
    .preview-guest-card span { width:max-content; margin:auto; padding:4px 9px; border-radius:999px; background:var(--preview-accent); color:#fff; font-size:8px; font-weight:800; }
    .preview-details { padding:35px 20px; text-align:center; }
    .preview-details h4 { margin:0 0 22px; font-family:var(--preview-heading,"Cormorant Garamond"),Georgia,serif; font-size:32px; }
    .preview-info-card { margin-top:9px; padding:14px; border:1px solid rgba(100,116,139,.18); border-radius:12px; background:#fff; text-align:left; }
    .preview-info-card small,.preview-info-card strong,.preview-info-card span { display:block; }
    .preview-info-card small { color:var(--preview-accent); font-size:8px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
    .preview-info-card strong { margin-top:4px; font-family:var(--preview-heading,"Cormorant Garamond"),Georgia,serif; font-size:18px; }
    .preview-info-card span { margin-top:3px; color:#64748b; font-size:9px; }
    .preview-qr-block { margin-top:24px; padding:22px; border-radius:16px; background:var(--preview-hero); color:#fff; }
    .preview-qr-placeholder { display:grid; width:92px; height:92px; margin:0 auto 10px; place-items:center; background:#fff; color:#0f172a; font-size:58px; }
    .preview-qr-block strong,.preview-qr-block small { display:block; }
    .preview-qr-block small { margin-top:5px; color:rgba(255,255,255,.65); font-size:8px; }
    .preview-gift-block { margin-top:22px; padding:16px; border-radius:16px; background:linear-gradient(145deg,var(--preview-hero),var(--preview-accent)); color:#fff; box-shadow:0 12px 24px rgba(15,23,42,.16); text-align:left; }
    .preview-gift-block span,.preview-gift-block strong,.preview-gift-block small { display:block; }
    .preview-gift-block span { font-size:7px; font-weight:800; letter-spacing:.18em; opacity:.72; }
    .preview-gift-block strong { margin-top:8px; font-family:var(--preview-heading,"Cormorant Garamond"),Georgia,serif; font-size:18px; }
    .preview-gift-block small { margin-top:4px; font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.08em; }
    .preview-gift-accounts { display:grid; gap:7px; margin-top:10px; }
    .preview-gift-account { padding-top:7px; border-top:1px solid rgba(255,255,255,.18); }
    .preview-gift-account:first-child { padding-top:0; border-top:0; }
    .preview-gift-account small { overflow-wrap:anywhere; }
    .preview-closing { margin-top:28px; }
    .preview-closing h4 { margin-bottom:9px; }
    .preview-closing p:last-child { margin:0; color:#64748b; font-size:9px; line-height:1.6; }
    .preview-footer { padding:13px; background:#0f172a; color:#94a3b8; text-align:center; font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
    .invitation-live-preview.theme-minimal .preview-hero { min-height:430px; background:var(--preview-page); color:var(--preview-text); }
    .invitation-live-preview.theme-minimal .preview-overlay { background:transparent; }
    .invitation-live-preview.theme-minimal .preview-opening { color:#64748b; }
    .invitation-live-preview.theme-minimal .preview-guest-card { border-color:#e2e8f0; background:#fff; }
    .invitation-live-preview.theme-minimal .preview-guest-card small { color:#64748b; }
    .invitation-live-preview.theme-modern .preview-hero { clip-path:polygon(0 0,100% 0,100% 92%,0 100%); }
    .invitation-live-preview.theme-romantic .preview-hero { border-radius:0 0 45% 45% / 0 0 10% 10%; }
    .invitation-live-preview.theme-dark .preview-details { background:#15110d; color:#f8fafc; }
    .invitation-live-preview.theme-dark .preview-info-card { border-color:#342a20; background:#211a14; }
    .invitation-live-preview.theme-dark .preview-info-card span,.invitation-live-preview.theme-dark .preview-closing p:last-child { color:#b8aa98; }
    .invitation-live-preview.theme-minimal .preview-hero.has-cover-image { color:#fff; }
    .invitation-live-preview.theme-minimal .preview-hero.has-cover-image .preview-overlay { background:linear-gradient(145deg,rgba(15,12,8,.92),rgba(15,12,8,.42)); }
    .invitation-live-preview.theme-minimal .preview-hero.has-cover-image .preview-opening { color:rgba(255,255,255,.78); }
    .invitation-live-preview.theme-minimal .preview-hero.has-cover-image .preview-guest-card { border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.09); }
    .invitation-live-preview.theme-threed { perspective:1100px; background:linear-gradient(145deg,#ede9fe,#fff); }
    .invitation-live-preview.theme-threed .preview-hero { margin:16px; min-height:480px; border-radius:24px; transform:rotateX(1.5deg) rotateY(-1.5deg); transform-style:preserve-3d; box-shadow:22px 26px 48px rgba(49,25,92,.28),-10px -10px 24px rgba(255,255,255,.28); }
    .invitation-live-preview.theme-threed .preview-content { transform:translateZ(34px); }
    .invitation-live-preview.theme-threed .preview-guest-card { transform:translateZ(46px); border-radius:18px; box-shadow:0 18px 35px rgba(10,5,25,.28); }
    .invitation-live-preview.theme-threed .preview-couple-card,.invitation-live-preview.theme-threed .preview-event-card { box-shadow:8px 10px 0 rgba(124,58,237,.13),0 18px 32px rgba(55,30,100,.12); transform:translateY(-2px); }
    .invitation-live-preview .preview-couple-card,.invitation-live-preview .preview-event-card,.invitation-live-preview .preview-gift-block,.invitation-live-preview .preview-qr-block { transform-style:preserve-3d; box-shadow:7px 9px 0 color-mix(in srgb,var(--preview-accent) 12%,transparent),0 16px 28px rgba(15,23,42,.1); transition:transform .25s ease,box-shadow .25s ease; }
    .invitation-live-preview .preview-couple-card:hover,.invitation-live-preview .preview-event-card:hover { transform:translateY(-4px) rotateX(2deg); box-shadow:9px 12px 0 color-mix(in srgb,var(--preview-accent) 14%,transparent),0 22px 36px rgba(15,23,42,.15); }
    @media (min-width: 640px) { .sm\:col-span-2 { grid-column: span 2 / span 2; } }
    @media (max-width: 1050px) { .invitation-editor-layout { grid-template-columns:1fr; } .invitation-preview-sticky { position:static; } .invitation-preview-column { width:min(100%,520px); margin:auto; } }
    @media (prefers-reduced-motion: reduce) { .preview-motion-scene span,.preview-navigation b:first-child:before { animation:none!important; } }

    /* Application appearance and collapsible sidebar */
    :root {
      --app-accent: #2563eb;
      --app-accent-rgb: 37, 99, 235;
      --app-sidebar: #020617;
      --app-page: #f8fafc;
      --app-panel: #ffffff;
      --app-text: #0f172a;
      --app-muted: #64748b;
      --app-border: #e2e8f0;
    }
    html[data-app-mode="dark"] {
      color-scheme: dark;
      --app-page: #0b1120;
      --app-panel: #111827;
      --app-text: #f8fafc;
      --app-muted: #94a3b8;
      --app-border: #334155;
    }
    body { background: var(--app-page); color: var(--app-text); }
    #desktop-sidebar { width: 18rem; background: var(--app-sidebar) !important; transition: width .22s ease, background-color .22s ease; }
    #app-shell.sidebar-collapsed #desktop-sidebar { width: 5.5rem; }
    #app-shell.sidebar-collapsed .sidebar-brand-text,
    #app-shell.sidebar-collapsed .sidebar-label,
    #app-shell.sidebar-collapsed .sidebar-user-details { display: none !important; }
    #app-shell.sidebar-collapsed #desktop-sidebar nav button,
    #app-shell.sidebar-collapsed #desktop-sidebar [data-action="logout"],
    #app-shell.sidebar-collapsed #desktop-sidebar #reset-button-desktop,
    #app-shell.sidebar-collapsed #desktop-sidebar #open-app-theme-button-desktop,
    #app-shell.sidebar-collapsed #desktop-sidebar #sidebar-toggle-button { justify-content: center; padding-left: .75rem; padding-right: .75rem; }
    #app-shell.sidebar-collapsed #sidebar-user-card { justify-content: center; }
    #app-shell.sidebar-collapsed #sidebar-brand-row { justify-content: center; padding-left: .75rem; padding-right: .75rem; }
    .app-accent-bg, .nav-desktop.active, .bg-blue-600 { background-color: var(--app-accent) !important; }
    .text-blue-600, .text-blue-700, .nav-mobile.active { color: var(--app-accent) !important; }
    .border-blue-200, .border-blue-500 { border-color: rgba(var(--app-accent-rgb), .45) !important; }
    .bg-blue-50, .bg-blue-100 { background-color: rgba(var(--app-accent-rgb), .12) !important; }
    .ring-blue-100 { --tw-ring-color: rgba(var(--app-accent-rgb), .22) !important; }
    .theme-swatch { width: 42px; height: 42px; border-radius: 13px; border: 3px solid transparent; box-shadow: 0 0 0 1px rgba(100,116,139,.25); transition: transform .15s ease, border-color .15s ease; }
    .theme-swatch:hover { transform: translateY(-2px); }
    .theme-swatch.active { border-color: #ffffff; box-shadow: 0 0 0 3px var(--app-accent); }
    .app-theme-segment button.active { background: var(--app-accent); color: #fff; }

    html[data-app-mode="dark"] #loading-screen,
    html[data-app-mode="dark"] main.bg-slate-50,
    html[data-app-mode="dark"] .bg-slate-50 { background-color: var(--app-page) !important; }
    html[data-app-mode="dark"] .bg-white { background-color: var(--app-panel) !important; }
    html[data-app-mode="dark"] .bg-slate-100 { background-color: #1e293b !important; }
    html[data-app-mode="dark"] .bg-slate-200 { background-color: #334155 !important; }
    html[data-app-mode="dark"] .text-slate-900,
    html[data-app-mode="dark"] .text-slate-800,
    html[data-app-mode="dark"] .text-slate-700 { color: #f8fafc !important; }
    html[data-app-mode="dark"] .text-slate-600,
    html[data-app-mode="dark"] .text-slate-500,
    html[data-app-mode="dark"] .text-slate-400 { color: #94a3b8 !important; }
    html[data-app-mode="dark"] .border-slate-100,
    html[data-app-mode="dark"] .border-slate-200,
    html[data-app-mode="dark"] .border-slate-300,
    html[data-app-mode="dark"] .divide-slate-100 > :not(:last-child) { border-color: #334155 !important; }
    html[data-app-mode="dark"] input:not([type="color"]),
    html[data-app-mode="dark"] select,
    html[data-app-mode="dark"] textarea { background-color: #0f172a !important; color: #f8fafc !important; border-color: #475569 !important; }
    html[data-app-mode="dark"] input::placeholder,
    html[data-app-mode="dark"] textarea::placeholder { color: #64748b; }
    html[data-app-mode="dark"] thead.bg-slate-50 { background-color: #172033 !important; }
    html[data-app-mode="dark"] tr:hover { background-color: rgba(51,65,85,.42) !important; }
    html[data-app-mode="dark"] .shadow-sm,
    html[data-app-mode="dark"] .shadow-2xl { box-shadow: 0 12px 32px rgba(0,0,0,.25) !important; }
    html[data-app-mode="dark"] .invitation-live-preview { color: var(--preview-text); }
  
    .wedding-subsection { border:1px solid #e2e8f0; border-radius:16px; padding:16px; background:#f8fafc; }
    .wedding-subsection-title { display:flex; align-items:center; gap:9px; margin-bottom:14px; font-size:13px; font-weight:800; color:#334155; text-transform:uppercase; letter-spacing:.08em; }
    .wedding-media-drop { border:1.5px dashed #cbd5e1; border-radius:16px; padding:18px; text-align:center; background:#f8fafc; }
    .wedding-media-drop:hover { border-color:#d97706; background:#fffbeb; }
    .wedding-upload-status { margin-top:10px; font-size:12px; color:#64748b; }
    .wedding-upload-status.is-error { color:#dc2626; }
    .wedding-upload-status.is-success { color:#059669; }
    .wedding-music-preview { width:100%; margin-top:12px; }
    .wedding-volume-row { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; }
    .wedding-gallery-editor { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:16px; }
    .wedding-gallery-item { overflow:hidden; border:1px solid #e2e8f0; border-radius:14px; background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.05); }
    .wedding-gallery-thumb { aspect-ratio:1/1; width:100%; object-fit:cover; display:block; background:#e2e8f0; }
    .wedding-gallery-item-body { padding:10px; }
    .wedding-gallery-caption { width:100%; border:1px solid #cbd5e1; border-radius:9px; padding:7px 9px; font-size:12px; }
    .wedding-gallery-remove { margin-top:8px; width:100%; border-radius:9px; padding:7px 9px; font-size:11px; font-weight:700; color:#b91c1c; background:#fef2f2; }
    .preview-couple { padding:22px 18px; text-align:center; background:var(--preview-page); }
    .preview-couple-grid { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; }
    .preview-couple-card { padding:12px 8px; border-radius:14px; background:#fff; border:1px solid rgba(148,163,184,.24); }
    .preview-couple-card strong { display:block; color:var(--preview-accent); font-family:var(--preview-heading); font-size:18px; line-height:1.05; }
    .preview-couple-card small { display:block; margin-top:5px; color:#64748b; font-size:7px; line-height:1.4; }
    .preview-couple-and { display:grid; min-width:28px; min-height:28px; place-items:center; justify-self:center; align-self:center; text-align:center; font-family:var(--preview-heading); color:var(--preview-accent); font-size:22px; line-height:1; }
    .preview-wedding-events { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
    .preview-wedding-events.single-event { grid-template-columns:minmax(0,240px); justify-content:center; }
    .preview-event-card { padding:12px 9px; border-radius:13px; background:#fff; border:1px solid rgba(148,163,184,.25); text-align:center; }
    .preview-event-card strong,.preview-event-card span { display:block; }
    .preview-event-card strong { color:var(--preview-accent); font-family:var(--preview-heading); font-size:14px; }
    .preview-event-card span { margin-top:5px; color:#64748b; font-size:7px; line-height:1.45; }
    .preview-gallery { margin-top:18px; }
    .preview-gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
    .preview-gallery-grid img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; background:#e2e8f0; }
    .preview-music-badge { display:inline-flex; align-items:center; gap:5px; margin-top:12px; border-radius:999px; padding:6px 9px; background:rgba(255,255,255,.12); color:#fff; font-size:7px; }
    .cover-editor-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:16px; border:1px solid #e2e8f0; border-radius:16px; background:#f8fafc; }
    .cover-editor-controls label>span { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; color:#475569; font-size:12px; font-weight:700; }
    .cover-editor-controls label strong { color:#7c3aed; font-size:11px; }
    .cover-editor-controls input[type="range"] { width:100%; accent-color:#7c3aed; }
    html[data-app-mode="dark"] .wedding-subsection, html[data-app-mode="dark"] .wedding-media-drop { background:#0f172a; border-color:#334155; }
    html[data-app-mode="dark"] .wedding-subsection-title { color:#cbd5e1; }
    html[data-app-mode="dark"] .wedding-gallery-item { background:#111827; border-color:#334155; }
    html[data-app-mode="dark"] .wedding-gallery-caption { background:#0f172a; border-color:#475569; color:#f8fafc; }
    html[data-app-mode="dark"] .cover-editor-controls { background:#0f172a; border-color:#334155; }
    html[data-app-mode="dark"] .cover-editor-controls label>span { color:#cbd5e1; }

    @media(max-width:560px){.cover-editor-controls{grid-template-columns:1fr}}


    /* Header aplikasi, logo khusus, dan identitas pengguna */
    .app-brand-logo { width:100%; height:100%; object-fit:contain; display:block; }
    .app-brand-logo-wrap { display:grid; place-items:center; overflow:hidden; background:#fff; border:1px solid rgba(148,163,184,.28); box-shadow:0 6px 18px rgba(15,23,42,.12); }
    .app-logo-fallback { display:none; place-items:center; width:100%; height:100%; color:#fff; background:var(--app-accent); font-weight:800; }
    .app-top-header { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-shrink:0; padding:12px 18px; border-bottom:1px solid var(--app-border); background:var(--app-panel); color:var(--app-text); box-shadow:0 4px 18px rgba(15,23,42,.05); position:relative; z-index:25; }
    .app-header-brand { display:flex; align-items:center; gap:11px; min-width:0; }
    .app-header-brand-logo { width:42px; height:42px; border-radius:13px; flex:0 0 auto; }
    .app-header-brand-copy { min-width:0; }
    .app-header-brand-copy strong { display:block; font-size:14px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .app-header-brand-copy small { display:block; margin-top:2px; color:var(--app-muted); font-size:10px; }
    .app-header-page { min-width:0; flex:1; }
    .app-header-page strong { display:block; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .app-header-page small { display:block; margin-top:2px; color:var(--app-muted); font-size:10px; }
    .app-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; min-width:0; }
    .app-header-user { display:flex; align-items:center; gap:10px; min-width:0; padding:7px 10px; border:1px solid var(--app-border); border-radius:14px; background:var(--app-page); }
    .app-header-avatar { display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:var(--app-accent); color:#fff; font-size:12px; font-weight:800; }
    .app-header-user-copy { min-width:0; max-width:190px; }
    .app-header-user-copy strong,.app-header-user-copy small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .app-header-user-copy strong { font-size:12px; }
    .app-header-user-copy small { margin-top:1px; color:var(--app-muted); font-size:9px; }
    .app-header-icon-button { display:grid; place-items:center; width:39px; height:39px; flex:0 0 auto; border:1px solid var(--app-border); border-radius:12px; background:var(--app-panel); color:var(--app-muted); transition:.18s ease; }
    .app-header-icon-button:hover { color:var(--app-accent); border-color:rgba(var(--app-accent-rgb),.45); background:rgba(var(--app-accent-rgb),.08); }
    .app-header-logout { color:#dc2626; }
    .app-header-logout:hover { color:#b91c1c; border-color:#fecaca; background:#fef2f2; }
    html[data-app-mode="dark"] .app-header-logout:hover { background:rgba(220,38,38,.12); border-color:rgba(248,113,113,.35); }
    @media (min-width:768px) { .app-top-header { padding-left:24px; padding-right:24px; } }
    @media (max-width:767px) {
      .app-top-header { min-height:64px; padding:9px 11px; gap:8px; }
      .app-header-brand-logo { width:38px; height:38px; }
      .app-header-page small { display:none; }
      .app-header-page strong { font-size:12px; }
      .app-header-user { border:0; background:transparent; padding:0; gap:7px; }
      .app-header-user-copy { max-width:92px; }
      .app-header-user-copy strong { font-size:10px; }
      .app-header-user-copy small { font-size:8px; }
      .app-header-avatar { width:31px; height:31px; }
      .app-header-icon-button { width:36px; height:36px; }
    }


    /* Splash screen ringan untuk pemuatan awal aplikasi */
    .splash-screen {
      position: fixed;
      inset: 0;
      z-index: 110;
      display: grid;
      place-items: center;
      overflow: hidden;
      padding: 24px;
      background:
        radial-gradient(circle at 20% 18%, rgba(var(--app-accent-rgb), .20), transparent 31%),
        radial-gradient(circle at 82% 82%, rgba(14, 165, 233, .16), transparent 34%),
        linear-gradient(145deg, #f8fafc 0%, #eef2ff 52%, #f0f9ff 100%);
      opacity: 1;
      visibility: visible;
      transition: opacity .38s ease, visibility .38s ease;
    }
    .splash-screen.is-leaving {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .splash-content {
      position: relative;
      z-index: 2;
      width: min(420px, 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      animation: splashContentEnter .7s cubic-bezier(.2,.75,.25,1) both;
    }
    .splash-logo-shell {
      width: 92px;
      height: 92px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 28px;
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(148,163,184,.25);
      box-shadow: 0 24px 60px rgba(15,23,42,.16), 0 0 0 9px rgba(255,255,255,.38);
      animation: splashLogoFloat 2.4s ease-in-out infinite;
    }
    .splash-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
    .splash-logo-fallback {
      display: none;
      width: 100%;
      height: 100%;
      place-items: center;
      color: #fff;
      background: linear-gradient(145deg, var(--app-accent), #0ea5e9);
      font-size: 28px;
      font-weight: 900;
      letter-spacing: .04em;
    }
    .splash-eyebrow {
      margin: 28px 0 6px;
      color: var(--app-accent);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .28em;
    }
    .splash-title {
      margin: 0;
      color: #0f172a;
      font-size: clamp(28px, 7vw, 40px);
      line-height: 1.08;
      font-weight: 800;
      letter-spacing: -.035em;
    }
    .splash-status {
      min-height: 20px;
      margin: 13px 0 20px;
      color: #64748b;
      font-size: 13px;
      font-weight: 500;
    }
    .splash-progress {
      width: min(260px, 72vw);
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(148,163,184,.25);
    }
    .splash-progress span {
      display: block;
      width: 42%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--app-accent), #0ea5e9);
      animation: splashProgress 1.15s ease-in-out infinite;
    }
    .splash-version {
      margin: 16px 0 0;
      color: #94a3b8;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .splash-orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(2px);
      opacity: .72;
      animation: splashOrbMove 6s ease-in-out infinite alternate;
    }
    .splash-orb-one {
      width: 210px;
      height: 210px;
      top: -74px;
      right: -58px;
      background: rgba(var(--app-accent-rgb), .13);
    }
    .splash-orb-two {
      width: 250px;
      height: 250px;
      left: -100px;
      bottom: -94px;
      background: rgba(14,165,233,.11);
      animation-delay: -.8s;
    }
    .operation-loading-card {
      min-width: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px 28px;
      border: 1px solid rgba(226,232,240,.85);
      border-radius: 22px;
      background: rgba(255,255,255,.96);
      box-shadow: 0 24px 70px rgba(15,23,42,.24);
    }
    @keyframes splashContentEnter {
      from { opacity: 0; transform: translateY(16px) scale(.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes splashLogoFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }
    @keyframes splashProgress {
      0% { transform: translateX(-120%); }
      52% { transform: translateX(115%); }
      100% { transform: translateX(260%); }
    }
    @keyframes splashOrbMove {
      from { transform: translate3d(0,0,0) scale(1); }
      to { transform: translate3d(20px,-14px,0) scale(1.08); }
    }
    html[data-app-mode="dark"] .splash-screen {
      background:
        radial-gradient(circle at 20% 18%, rgba(var(--app-accent-rgb), .22), transparent 31%),
        radial-gradient(circle at 82% 82%, rgba(14,165,233,.13), transparent 34%),
        linear-gradient(145deg, #020617 0%, #0f172a 52%, #111827 100%);
    }
    html[data-app-mode="dark"] .splash-title { color: #f8fafc; }
    html[data-app-mode="dark"] .splash-status { color: #94a3b8; }
    html[data-app-mode="dark"] .splash-logo-shell {
      background: rgba(15,23,42,.92);
      border-color: rgba(71,85,105,.7);
      box-shadow: 0 24px 60px rgba(0,0,0,.38), 0 0 0 9px rgba(30,41,59,.42);
    }
    html[data-app-mode="dark"] .operation-loading-card {
      background: rgba(15,23,42,.97);
      border-color: #334155;
    }
    html[data-app-mode="dark"] .operation-loading-card p { color: #e2e8f0 !important; }
    @media (prefers-reduced-motion: reduce) {
      .splash-content,
      .splash-logo-shell,
      .splash-progress span,
      .splash-orb { animation: none !important; }
      .splash-screen { transition-duration: .01ms; }
    }


    /* Penyempurnaan visual: tombol datar, brand sejajar header, QR putih, dan menu scanner mobile seragam */
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
      box-shadow: none !important;
    }
    button:focus-visible,
    input[type="button"]:focus-visible,
    input[type="submit"]:focus-visible,
    input[type="reset"]:focus-visible {
      outline: 2px solid var(--app-accent);
      outline-offset: 2px;
    }
    .theme-swatch.active {
      box-shadow: none !important;
      outline: 3px solid var(--app-accent);
      outline-offset: 2px;
    }
    #desktop-sidebar {
      box-shadow: none !important;
    }
    #sidebar-brand-row {
      height: 72px;
      min-height: 72px;
      padding: 12px 24px !important;
      box-sizing: border-box;
    }
    #app-shell.sidebar-collapsed #sidebar-brand-row {
      height: 72px;
      min-height: 72px;
      padding: 12px !important;
    }
    .app-top-header {
      height: 72px;
      min-height: 72px;
      box-shadow: none !important;
    }
    .qr-code-surface,
    #qrcode-container {
      background: #ffffff !important;
      color-scheme: light;
    }
    .qr-code-surface {
      border-color: #e2e8f0 !important;
    }
    #qrcode-container canvas,
    #qrcode-container img {
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      background: #ffffff !important;
    }
    html[data-app-mode="dark"] .qr-code-surface,
    html[data-app-mode="dark"] #qrcode-container {
      background: #ffffff !important;
    }
    html[data-app-mode="dark"] .qr-code-surface {
      border-color: #cbd5e1 !important;
    }
    @media (max-width: 767px) {
      .app-top-header {
        height: 64px;
        min-height: 64px;
      }
      .nav-mobile > i {
        font-size: 1rem;
        line-height: 1;
        transition: transform .18s ease;
      }
    }


/* Warna swatch dipindahkan dari inline style HTML. */
.theme-swatch[data-theme-accent="#2563eb"] { background:#2563eb; }
.theme-swatch[data-theme-accent="#7c3aed"] { background:#7c3aed; }
.theme-swatch[data-theme-accent="#059669"] { background:#059669; }
.theme-swatch[data-theme-accent="#d97706"] { background:#d97706; }
.theme-swatch[data-theme-accent="#e11d48"] { background:#e11d48; }
.theme-swatch[data-theme-accent="#0891b2"] { background:#0891b2; }

/* ===== Pembaruan v2: auth/register, scanner kotak, template, mobile ===== */
.auth-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}
.auth-mode-button{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:10px;color:#64748b;font-size:13px;font-weight:700;cursor:pointer;pointer-events:auto;touch-action:manipulation;transition:.18s ease}
.auth-mode-button.active{background:#fff;color:#2563eb;border:1px solid #dbeafe}
html[data-app-mode="dark"] .auth-mode-switch{border-color:#334155;background:#0f172a}
html[data-app-mode="dark"] .auth-mode-button.active{background:#1e293b;color:#60a5fa;border-color:#334155}

/* Scanner utama selalu 1:1 agar framing QR konsisten di desktop dan mobile. */
#scanner-frame{width:min(100%,560px);aspect-ratio:1/1;margin-inline:auto;min-height:0}
#scanner-frame #reader{position:absolute;inset:0;width:100%;height:100%;min-height:0!important;border-radius:inherit}
#scanner-frame #reader>div,#scanner-frame #reader__scan_region{width:100%!important;height:100%!important;min-height:0!important}
#scanner-frame #reader video,#scanner-frame #reader canvas{width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;object-fit:cover;border-radius:inherit}

/* ===== Pembaruan v2.20: check-in terpadu dan bulk action tamu ===== */
.checkin-manual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.checkin-method-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:.85rem 1rem;min-width:0;padding:1.25rem;border:1px solid var(--app-border,#e2e8f0);border-radius:1rem;background:var(--app-panel,#fff);box-shadow:0 1px 3px rgba(15,23,42,.06)}
.checkin-method-icon{display:grid;grid-row:1;place-items:center;width:3rem;height:3rem;border-radius:.85rem;font-size:1.2rem}
.checkin-method-icon.is-code{background:#dbeafe;color:#2563eb}.checkin-method-icon.is-name{background:#dcfce7;color:#059669}
.checkin-method-eyebrow{margin:0 0 .18rem;color:var(--app-accent,#2563eb);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.checkin-method-card h3,.checkin-scan-heading h3{margin:0;color:var(--app-text,#0f172a);font-size:1rem;font-weight:800}
.checkin-method-card>div:nth-child(2)>p:last-child,.checkin-scan-heading p:last-child{margin:.25rem 0 0;color:var(--app-muted,#64748b);font-size:.78rem;line-height:1.55}
.checkin-code-form{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;gap:.65rem}
.checkin-code-form input,.checkin-name-search-wrap input{width:100%;min-width:0;border:1px solid var(--app-border,#cbd5e1);border-radius:.75rem;background:var(--app-panel,#fff);color:var(--app-text,#0f172a);font-size:.84rem;outline:none;transition:border-color .18s ease,box-shadow .18s ease}
.checkin-code-form input{padding:.75rem .9rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.checkin-code-form input:focus,.checkin-name-search-wrap input:focus{border-color:var(--app-accent,#2563eb);box-shadow:0 0 0 4px color-mix(in srgb,var(--app-accent,#2563eb) 13%,transparent)}
.checkin-code-form button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:.7rem 1rem;border-radius:.75rem;background:var(--app-accent,#2563eb);color:#fff;font-size:.8rem;font-weight:800;transition:filter .18s ease,opacity .18s ease}
.checkin-code-form button:hover{filter:brightness(.94)}.checkin-code-form button:disabled{cursor:not-allowed;opacity:.55}
.checkin-method-hint{grid-column:1/-1;margin:-.2rem 0 0;color:var(--app-muted,#64748b);font-size:.7rem}
.checkin-name-search-wrap{position:relative;grid-column:1/-1}.checkin-name-search-wrap>i{position:absolute;top:50%;left:.9rem;transform:translateY(-50%);color:#94a3b8;font-size:.8rem;pointer-events:none}.checkin-name-search-wrap input{padding:.75rem .9rem .75rem 2.35rem}
.checkin-name-results{grid-column:1/-1;max-height:250px;overflow-y:auto;border:1px solid var(--app-border,#e2e8f0);border-radius:.8rem;background:var(--app-page,#f8fafc)}
.checkin-name-empty{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:74px;padding:1rem;color:var(--app-muted,#64748b);font-size:.75rem;text-align:center}
.checkin-name-result{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;width:100%;padding:.72rem .8rem;border-bottom:1px solid var(--app-border,#e2e8f0);text-align:left;transition:background .18s ease}
.checkin-name-result:last-child{border-bottom:0}.checkin-name-result:hover{background:color-mix(in srgb,var(--app-accent,#2563eb) 7%,var(--app-panel,#fff))}
.checkin-name-result-copy{min-width:0}.checkin-name-result-copy strong{display:block;overflow:hidden;color:var(--app-text,#0f172a);font-size:.8rem;text-overflow:ellipsis;white-space:nowrap}.checkin-name-result-copy span{display:block;margin-top:.18rem;color:var(--app-muted,#64748b);font-size:.68rem}
.checkin-name-result-action{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .65rem;border-radius:.55rem;background:#059669;color:#fff;font-size:.68rem;font-weight:800;white-space:nowrap}.checkin-name-result.is-attended .checkin-name-result-action{background:#d1fae5;color:#047857}.checkin-name-result:disabled{cursor:default}.checkin-name-result:disabled:hover{background:transparent}
.checkin-scan-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border:1px solid #dbeafe;border-radius:1rem;background:linear-gradient(135deg,#eff6ff,#fff)}
.checkin-scan-heading>span{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:0 0 auto;border-radius:.8rem;background:#2563eb;color:#fff;font-size:1.15rem}
.guest-select-checkbox{width:1rem;height:1rem;border-radius:.3rem;accent-color:#dc2626;cursor:pointer}

html[data-app-mode="dark"] .checkin-method-icon.is-code{background:#172554;color:#93c5fd}
html[data-app-mode="dark"] .checkin-method-icon.is-name{background:#052e24;color:#6ee7b7}
html[data-app-mode="dark"] .checkin-scan-heading{border-color:#1e3a5f;background:linear-gradient(135deg,#172554,#0f172a)}
html[data-app-mode="dark"] .checkin-name-result-action{background:#047857}
html[data-app-mode="dark"] .checkin-name-result.is-attended .checkin-name-result-action{background:#064e3b;color:#a7f3d0}

@media(max-width:900px){.checkin-manual-grid{grid-template-columns:1fr}}
@media(max-width:480px){.checkin-method-card{grid-template-columns:2.6rem minmax(0,1fr);padding:1rem}.checkin-method-icon{width:2.6rem;height:2.6rem}.checkin-code-form{grid-template-columns:1fr}.checkin-code-form button{width:100%}.checkin-name-result{align-items:start}.checkin-name-result-action span{display:none}}

/* ===== Pembaruan v2.21: scanner alat, ekspor, dan UI check-in ringkas ===== */
.guest-list-toolbar{padding:1rem;border:1px solid var(--app-border,#e2e8f0);border-radius:1rem;background:var(--app-panel,#fff);box-shadow:0 1px 3px rgba(15,23,42,.05)}
.guest-filter-count{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:.5rem .8rem;border:1px solid var(--app-border,#e2e8f0);border-radius:.7rem;background:var(--app-page,#f8fafc);color:var(--app-muted,#64748b);font-size:.72rem;white-space:nowrap}.guest-filter-count strong{margin-right:.25rem;color:var(--app-text,#0f172a);font-size:.82rem}
.guest-bulk-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .75rem;padding:.72rem .8rem;border:1px solid color-mix(in srgb,#dc2626 22%,var(--app-border,#e2e8f0));border-radius:1rem;background:linear-gradient(135deg,color-mix(in srgb,#fee2e2 66%,var(--app-panel,#fff)),var(--app-panel,#fff));box-shadow:0 8px 24px rgba(127,29,29,.08)}
#guest-bulk-actions.hidden{display:none}
.guest-bulk-summary{display:flex;align-items:center;gap:.7rem;min-width:0}.guest-bulk-icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;flex:0 0 auto;border-radius:.65rem;background:#dc2626;color:#fff;font-size:.78rem}.guest-bulk-summary strong,.guest-bulk-summary small{display:block}.guest-bulk-summary strong{color:var(--app-text,#0f172a);font-size:.8rem}.guest-bulk-summary small{margin-top:.08rem;color:var(--app-muted,#64748b);font-size:.64rem}
.guest-bulk-controls{display:flex;align-items:center;justify-content:flex-end;gap:.45rem}.guest-bulk-controls button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:36px;padding:.48rem .7rem;border-radius:.6rem;font-size:.68rem;font-weight:800;transition:.18s ease}.guest-bulk-secondary{border:1px solid var(--app-border,#e2e8f0);background:var(--app-panel,#fff);color:var(--app-muted,#64748b)}.guest-bulk-secondary:hover{border-color:#fca5a5;color:#b91c1c}.guest-bulk-delete{background:#dc2626;color:#fff;box-shadow:0 5px 12px rgba(220,38,38,.18)}.guest-bulk-delete:hover{background:#b91c1c}.guest-bulk-controls button:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}

.checkin-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.checkin-page-heading h2{margin:.1rem 0 0;color:var(--app-text,#0f172a);font-size:clamp(1.55rem,3vw,2rem);font-weight:800}.checkin-page-heading>div>p:last-child{margin:.3rem 0 0;color:var(--app-muted,#64748b);font-size:.82rem}.checkin-online-badge{display:inline-flex;align-items:center;gap:.42rem;padding:.48rem .7rem;border:1px solid #bbf7d0;border-radius:999px;background:#f0fdf4;color:#15803d;font-size:.68rem;font-weight:800;white-space:nowrap}.checkin-online-badge i{font-size:.45rem}
.checkin-mode-switcher{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;padding:.42rem;border:1px solid var(--app-border,#e2e8f0);border-radius:1rem;background:var(--app-page,#f8fafc)}
.checkin-mode-button{display:grid;grid-template-columns:2.3rem minmax(0,1fr);align-items:center;gap:.68rem;min-width:0;padding:.68rem .75rem;border:1px solid transparent;border-radius:.75rem;color:var(--app-muted,#64748b);text-align:left;transition:.18s ease}.checkin-mode-button>i{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:.65rem;background:var(--app-panel,#fff);font-size:.95rem;box-shadow:0 1px 3px rgba(15,23,42,.07)}.checkin-mode-button span,.checkin-mode-button strong,.checkin-mode-button small{display:block;min-width:0}.checkin-mode-button strong{overflow:hidden;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.checkin-mode-button small{margin-top:.08rem;font-size:.6rem;font-weight:600;opacity:.78}.checkin-mode-button:hover{color:var(--app-text,#0f172a)}.checkin-mode-button.active{border-color:color-mix(in srgb,var(--app-accent,#2563eb) 25%,var(--app-border,#e2e8f0));background:var(--app-panel,#fff);color:var(--app-accent,#2563eb);box-shadow:0 5px 18px rgba(15,23,42,.07)}.checkin-mode-button.active>i{background:var(--app-accent,#2563eb);color:#fff}
.checkin-workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:1rem}.checkin-panel-shell,.checkin-result-card,.checkin-help-card{border:1px solid var(--app-border,#e2e8f0);border-radius:1rem;background:var(--app-panel,#fff);box-shadow:0 1px 3px rgba(15,23,42,.05)}.checkin-panel-shell{min-width:0;padding:1.1rem}.checkin-mode-panel{min-width:0}.manual-checkin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.hardware-scanner-hero{display:flex;align-items:center;gap:1rem;padding:.3rem .2rem 1rem}.hardware-scanner-hero h3,.camera-simple-head h3{margin:0;color:var(--app-text,#0f172a);font-size:1.1rem;font-weight:800}.hardware-scanner-hero p:last-child,.camera-simple-head p:last-child{max-width:670px;margin:.28rem 0 0;color:var(--app-muted,#64748b);font-size:.76rem;line-height:1.55}.hardware-scanner-visual{position:relative;display:grid;place-items:center;width:4.5rem;height:4.5rem;flex:0 0 auto;overflow:hidden;border-radius:1rem;background:linear-gradient(145deg,#111827,#334155);color:#fff;font-size:1.55rem;box-shadow:0 12px 24px rgba(15,23,42,.18)}.hardware-scanner-visual span{position:absolute;left:12%;right:12%;height:2px;background:#ef4444;box-shadow:0 0 10px #ef4444;animation:hardware-scan-line 1.8s ease-in-out infinite}@keyframes hardware-scan-line{0%,100%{top:26%}50%{top:72%}}
.hardware-scanner-form{padding:1rem;border:1px solid var(--app-border,#e2e8f0);border-radius:.85rem;background:var(--app-page,#f8fafc)}.hardware-scanner-form>label{display:block;margin-bottom:.48rem;color:var(--app-text,#0f172a);font-size:.7rem;font-weight:800}.hardware-scanner-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem}.hardware-scanner-input-wrap{position:relative}.hardware-scanner-input-wrap>i{position:absolute;top:50%;left:1rem;transform:translateY(-50%);color:var(--app-accent,#2563eb)}.hardware-scanner-input-wrap input{width:100%;height:50px;padding:0 1rem 0 2.7rem;border:1px solid var(--app-border,#cbd5e1);border-radius:.72rem;background:var(--app-panel,#fff);color:var(--app-text,#0f172a);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9rem;font-weight:800;letter-spacing:.04em;outline:none;text-transform:uppercase}.hardware-scanner-input-wrap input:focus{border-color:var(--app-accent,#2563eb);box-shadow:0 0 0 4px color-mix(in srgb,var(--app-accent,#2563eb) 13%,transparent)}.hardware-scanner-form button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-width:108px;padding:0 1rem;border-radius:.72rem;background:var(--app-accent,#2563eb);color:#fff;font-size:.76rem;font-weight:800}.hardware-scanner-form button:disabled{cursor:not-allowed;opacity:.55}
.hardware-scanner-status{display:flex;align-items:center;gap:.72rem;margin-top:.8rem;padding:.7rem .8rem;border:1px solid var(--app-border,#e2e8f0);border-radius:.78rem;background:var(--app-page,#f8fafc)}.hardware-scanner-status>span{display:grid;place-items:center;width:1.9rem;height:1.9rem;flex:0 0 auto;border-radius:.55rem}.hardware-scanner-status strong,.hardware-scanner-status small{display:block}.hardware-scanner-status strong{color:var(--app-text,#0f172a);font-size:.75rem}.hardware-scanner-status small{margin-top:.08rem;color:var(--app-muted,#64748b);font-size:.64rem}.hardware-scanner-status.is-ready>span{background:#dcfce7;color:#16a34a}.hardware-scanner-status.is-checking>span{background:#dbeafe;color:#2563eb}.hardware-scanner-status.is-success>span{background:#d1fae5;color:#059669}.hardware-scanner-status.is-warning>span{background:#fef3c7;color:#d97706}.hardware-scanner-status.is-error>span{background:#fee2e2;color:#dc2626}
.hardware-scanner-steps{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1rem;padding-top:1rem;border-top:1px dashed var(--app-border,#e2e8f0);color:var(--app-muted,#64748b);font-size:.65rem;font-weight:700}.hardware-scanner-steps span{display:inline-flex;align-items:center;gap:.35rem}.hardware-scanner-steps b{display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:color-mix(in srgb,var(--app-accent,#2563eb) 12%,transparent);color:var(--app-accent,#2563eb);font-size:.58rem}.hardware-scanner-steps>i{font-size:.5rem;color:#cbd5e1}
.camera-simple-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.camera-simple-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.45rem}.camera-simple-actions button,.camera-simple-actions label{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:38px;padding:.48rem .7rem;border-radius:.65rem;font-size:.68rem;font-weight:800;cursor:pointer}.camera-primary-action{background:#059669;color:#fff}.camera-stop-action{background:#e2e8f0;color:#475569}.camera-gallery-action{border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8}.camera-simple-actions button:disabled{cursor:not-allowed;opacity:.5}
#checkin-panel-camera #scanner-frame{width:min(100%,500px);max-height:min(500px,58vh)}
.camera-advanced-settings{margin-top:.8rem;border:1px solid var(--app-border,#e2e8f0);border-radius:.78rem;background:var(--app-page,#f8fafc)}.camera-advanced-settings>summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.72rem .82rem;color:var(--app-muted,#64748b);font-size:.7rem;font-weight:800;cursor:pointer;list-style:none}.camera-advanced-settings>summary::-webkit-details-marker{display:none}.camera-advanced-settings>summary>i{font-size:.55rem;transition:transform .18s ease}.camera-advanced-settings[open]>summary>i{transform:rotate(180deg)}.camera-advanced-content{display:grid;gap:.65rem;padding:0 .82rem .82rem}.camera-permission-compact,.camera-compatibility-compact{display:grid;align-items:center;gap:.7rem;padding:.72rem;border:1px solid var(--app-border,#e2e8f0);border-radius:.7rem;background:var(--app-panel,#fff)}.camera-permission-compact{grid-template-columns:minmax(0,1fr) auto}.camera-permission-compact strong,.camera-compatibility-compact strong{color:var(--app-text,#0f172a);font-size:.72rem}.camera-permission-compact p,.camera-compatibility-compact p{margin:.18rem 0 0;color:var(--app-muted,#64748b);font-size:.63rem}.camera-permission-compact>button,.camera-compatibility-actions button,.camera-compatibility-compact>button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;padding:.45rem .6rem;border:1px solid var(--app-border,#e2e8f0);border-radius:.55rem;background:var(--app-page,#f8fafc);color:var(--app-muted,#64748b);font-size:.63rem;font-weight:800}.camera-permission-compact #camera-permission-help{grid-column:1/-1;padding:.6rem;border:1px solid #fecaca;border-radius:.55rem;background:#fef2f2;color:#b91c1c;font-size:.63rem}.camera-compatibility-compact{grid-template-columns:auto minmax(0,1fr) auto}.camera-compatibility-compact>i{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.55rem;background:#dcfce7;color:#15803d}.camera-compatibility-compact #browser-platform-badge{display:inline-flex;margin-left:.4rem;padding:.18rem .42rem;border-radius:999px;background:var(--app-page,#f8fafc);color:var(--app-muted,#64748b);font-size:.58rem}.camera-compatibility-actions{display:flex;gap:.35rem}.camera-compatibility-compact>button{grid-column:1/-1}.camera-device-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.45rem}.camera-device-row select,.camera-device-row button{min-height:38px;border:1px solid var(--app-border,#e2e8f0);border-radius:.6rem;background:var(--app-panel,#fff);color:var(--app-text,#0f172a);font-size:.66rem;outline:none}.camera-device-row select{padding:0 .7rem}.camera-device-row button{display:inline-flex;align-items:center;gap:.35rem;padding:0 .7rem;font-weight:800}.camera-device-row button:disabled{opacity:.5}
.checkin-result-column{display:grid;gap:.8rem}.checkin-result-card{padding:1.15rem}.checkin-result-icon{display:grid;place-items:center;width:2.8rem;height:2.8rem;margin-bottom:.8rem;border-radius:.75rem;background:color-mix(in srgb,var(--app-accent,#2563eb) 12%,transparent);color:var(--app-accent,#2563eb);font-size:1.05rem}.checkin-result-card h3{margin:.18rem 0 0;color:var(--app-text,#0f172a);font-size:1rem;font-weight:800}.checkin-result-card>p:not(.checkin-method-eyebrow){margin:.35rem 0 0;color:var(--app-muted,#64748b);font-size:.72rem;line-height:1.55}.checkin-help-card{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem;color:#1e40af;background:#eff6ff;border-color:#bfdbfe}.checkin-help-card>i{margin-top:.12rem}.checkin-help-card strong{display:block;font-size:.72rem}.checkin-help-card p{margin:.2rem 0 0;font-size:.64rem;line-height:1.55}

html[data-app-mode="dark"] .checkin-online-badge{border-color:#14532d;background:#052e16;color:#86efac}
html[data-app-mode="dark"] .guest-bulk-bar{border-color:#7f1d1d;background:linear-gradient(135deg,#2b1114,var(--app-panel,#0f172a))}
html[data-app-mode="dark"] .checkin-help-card{border-color:#1e3a8a;background:#172554;color:#bfdbfe}
html[data-app-mode="dark"] .camera-gallery-action{border-color:#1e3a8a;background:#172554;color:#bfdbfe}

@media(max-width:1000px){.checkin-workspace{grid-template-columns:1fr}.checkin-result-column{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.guest-bulk-bar{align-items:stretch;flex-direction:column}.guest-bulk-controls{display:grid;grid-template-columns:1fr 1fr}.guest-bulk-delete{grid-column:1/-1}.manual-checkin-grid{grid-template-columns:1fr}.camera-simple-head{align-items:stretch;flex-direction:column}.camera-simple-actions{display:grid;grid-template-columns:1fr 1fr}.camera-gallery-action{grid-column:1/-1}.checkin-result-column{grid-template-columns:1fr}}
@media(max-width:560px){.checkin-page-heading{align-items:flex-start;flex-direction:column}.checkin-mode-button{grid-template-columns:1fr;justify-items:center;padding:.58rem .35rem;text-align:center}.checkin-mode-button small{display:none}.checkin-mode-button strong{font-size:.66rem}.hardware-scanner-hero{align-items:flex-start}.hardware-scanner-visual{width:3.5rem;height:3.5rem}.hardware-scanner-input-row{grid-template-columns:1fr}.hardware-scanner-form button{min-height:44px}.hardware-scanner-steps{align-items:flex-start;flex-direction:column}.hardware-scanner-steps>i{display:none}.camera-permission-compact,.camera-compatibility-compact{grid-template-columns:1fr}.camera-compatibility-compact>i{display:none}.camera-compatibility-actions{display:grid;grid-template-columns:1fr 1fr}.camera-device-row{grid-template-columns:1fr 1fr}.camera-device-row select{grid-column:1/-1}}

.template-preset-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.template-preset{min-width:0;padding:8px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;text-align:left;perspective:500px;transition:.18s ease}
.template-preset:hover,.template-preset.active{border-color:var(--app-accent);transform:translateY(-1px)}
.template-preset>span{display:block;height:42px;border-radius:8px;background:linear-gradient(135deg,#f5e6e8,#b7893e);box-shadow:6px 7px 13px rgba(15,23,42,.16);transform:rotateX(3deg) rotateY(-3deg);transition:transform .2s ease,box-shadow .2s ease}
.template-preset:hover>span,.template-preset.active>span{transform:translateY(-2px) rotateX(0) rotateY(0);box-shadow:8px 10px 17px rgba(15,23,42,.2)}
.template-preset strong{display:block;margin-top:6px;overflow:hidden;color:#475569;font-size:10px;white-space:nowrap;text-overflow:ellipsis}
.template-preset.theme-classic>span{background:linear-gradient(135deg,#f5efe6 0 48%,#8a6b43 48%)}
.template-preset.theme-modern>span{background:linear-gradient(145deg,#111827 0 45%,#f1f5f9 45%)}
.template-preset.theme-minimal>span{background:linear-gradient(135deg,#fff,#e2e8f0)}
.template-preset.theme-dark>span{background:linear-gradient(135deg,#09090b,#b7893e)}
.template-preset.theme-botanical>span{background:linear-gradient(135deg,#e7efe7,#386641)}
.template-preset.theme-rustic>span{background:linear-gradient(135deg,#efe4d2,#8b5e3c)}
.template-preset.theme-royal>span{background:linear-gradient(135deg,#0b1f3a,#d4af37)}
.template-preset.theme-islamic>span{background:linear-gradient(135deg,#0f5132,#d6b85a)}
.template-preset.theme-pastel>span{background:linear-gradient(135deg,#fde7ef,#dbeafe)}
.template-preset.theme-luxury>span{background:linear-gradient(135deg,#050505 0 58%,#c9a227 58%)}
.template-preset.theme-sunset>span{background:linear-gradient(135deg,#f8d5b5,#c86b4a)}
.template-preset.theme-threed>span{background:linear-gradient(145deg,#17102d 0 47%,#7c3aed 48% 72%,#ddd6fe 73%);box-shadow:inset -7px -7px 10px rgba(255,255,255,.22),inset 7px 7px 12px rgba(10,5,25,.28)}

/* Preview tambahan untuk 7 template baru. */
.invitation-live-preview.theme-botanical{--preview-accent:#386641;--preview-page:#f3f7f0;--preview-hero:#263c2a;--preview-text:#253125}
.invitation-live-preview.theme-botanical .preview-hero{border-radius:0 0 42% 42%/0 0 8% 8%}
.invitation-live-preview.theme-botanical .preview-info-card{border-radius:22px;background:#fbfdf9}
.invitation-live-preview.theme-rustic{--preview-accent:#9a623f;--preview-page:#f4eadc;--preview-hero:#5c4030;--preview-text:#493428}
.invitation-live-preview.theme-rustic .preview-info-card{border-radius:6px;background:#fffaf3}
.invitation-live-preview.theme-royal{--preview-accent:#d4af37;--preview-page:#f8f4e7;--preview-hero:#0b1f3a;--preview-text:#14213d}
.invitation-live-preview.theme-royal .preview-guest-card{border:2px solid rgba(212,175,55,.55)}
.invitation-live-preview.theme-islamic{--preview-accent:#d6b85a;--preview-page:#f7f7ef;--preview-hero:#0f5132;--preview-text:#183b2b}
.invitation-live-preview.theme-islamic .preview-hero{clip-path:polygon(0 0,100% 0,100% 92%,50% 100%,0 92%)}
.invitation-live-preview.theme-pastel{--preview-accent:#c06c84;--preview-page:#fff7fa;--preview-hero:#9f7aea;--preview-text:#553c57}
.invitation-live-preview.theme-pastel .preview-overlay{background:linear-gradient(145deg,rgba(116,84,145,.65),rgba(244,182,194,.45))}
.invitation-live-preview.theme-pastel .preview-info-card{border-radius:22px}
.invitation-live-preview.theme-luxury{--preview-accent:#c9a227;--preview-page:#111;--preview-hero:#050505;--preview-text:#f7edd0;color:#f7edd0}
.invitation-live-preview.theme-luxury .preview-details{background:#111;color:#f7edd0}
.invitation-live-preview.theme-luxury .preview-info-card{background:#191919;border-color:#3a3322;color:#fff}
.invitation-live-preview.theme-luxury .preview-info-card span,.invitation-live-preview.theme-luxury .preview-closing p:last-child{color:#b8b0a0}
.invitation-live-preview.theme-sunset{--preview-accent:#c86b4a;--preview-page:#fff3e9;--preview-hero:#8f4f43;--preview-text:#5d352d}
.invitation-live-preview.theme-sunset .preview-hero{border-radius:0 0 50% 50%/0 0 12% 12%}
.invitation-live-preview.theme-threed{--preview-accent:#7c3aed;--preview-page:#f5f3ff;--preview-hero:#17102d;--preview-text:#24163d}

@media(max-width:900px){.template-preset-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:640px){
  #login-screen{padding:0!important;background:#fff!important}
  #login-screen>div{min-height:100vh!important}
  #login-screen .grid.w-full{min-height:100vh;border-radius:0!important;box-shadow:none!important}
  #login-screen .flex.min-h-\[620px\]{min-height:100vh!important;padding:24px 18px!important;align-items:flex-start!important;padding-top:max(32px,env(safe-area-inset-top))!important}
  .auth-mode-switch{position:sticky;top:0;z-index:2}
  .template-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .template-preset>span{height:36px}
  .invitation-editor-form-stack article{padding:16px!important;border-radius:16px!important}
  .invitation-live-preview{border-width:5px;border-radius:22px}
  .preview-hero{min-height:430px;padding-inline:14px}
  .preview-content h3{font-size:40px}
  #view-scanner .rounded-2xl{border-radius:16px!important}
  #scanner-frame{width:min(100%,calc(100vw - 48px));border-radius:16px!important}
  .app-content-shell{padding-left:12px!important;padding-right:12px!important}
  table{font-size:12px}
}
@media(max-width:380px){.template-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-header-user-copy{display:none}.auth-mode-button{font-size:12px}}

/* ===== Upgrade v2.6: mobile sidebar, notification center, fullscreen scanner, PWA ===== */
.mobile-bottom-nav-hidden{display:none!important}
.mobile-sidebar{display:flex;position:relative;z-index:45}
.mobile-sidebar-toggle,.mobile-sidebar-close{display:none}
.mobile-sidebar-backdrop{display:none}

.app-notification-wrap{position:relative;flex:0 0 auto}
.notification-button{position:relative}
.notification-badge{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border:2px solid var(--app-panel);border-radius:999px;background:#dc2626;color:#fff;font-size:9px;font-weight:800;line-height:1}
.notification-panel{position:absolute;top:calc(100% + 12px);right:0;width:min(390px,calc(100vw - 24px));max-height:min(560px,calc(100vh - 94px));overflow:hidden;border:1px solid var(--app-border);border-radius:18px;background:var(--app-panel);color:var(--app-text);box-shadow:0 24px 70px rgba(15,23,42,.2);z-index:80}
.notification-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 12px;border-bottom:1px solid var(--app-border)}
.notification-panel-head strong{display:block;font-size:14px}.notification-panel-head small{display:block;margin-top:2px;color:var(--app-muted);font-size:10px}.notification-panel-head button{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:var(--app-muted)}
.notification-panel-actions{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--app-border);background:var(--app-page)}
.notification-panel-actions button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:6px 10px;border:1px solid var(--app-border);border-radius:9px;background:var(--app-panel);color:var(--app-muted);font-size:10px;font-weight:700}
.notification-list{max-height:430px;overflow-y:auto;overscroll-behavior:contain}
.notification-empty{padding:34px 18px;text-align:center;color:var(--app-muted)}.notification-empty i{display:block;margin-bottom:10px;font-size:30px}.notification-empty strong{display:block;color:var(--app-text);font-size:13px}.notification-empty span{display:block;margin-top:3px;font-size:10px}
.notification-item{display:grid;grid-template-columns:38px 1fr auto;gap:10px;padding:12px 14px;border-bottom:1px solid var(--app-border);background:var(--app-panel)}
.notification-item.unread{background:rgba(var(--app-accent-rgb),.055)}
.notification-item-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#eff6ff;color:#2563eb}.notification-item.success .notification-item-icon{background:#ecfdf5;color:#059669}.notification-item.warning .notification-item-icon{background:#fffbeb;color:#d97706}.notification-item.error .notification-item-icon{background:#fef2f2;color:#dc2626}
.notification-item-copy{min-width:0}.notification-item-copy strong{display:block;font-size:11px;line-height:1.35}.notification-item-copy p{margin:3px 0 0;color:var(--app-muted);font-size:10px;line-height:1.45;word-break:break-word}.notification-item-copy time{display:block;margin-top:5px;color:var(--app-muted);font-size:9px}.notification-unread-dot{width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--app-accent)}
html[data-app-mode="dark"] .notification-item-icon{background:rgba(37,99,235,.15)}html[data-app-mode="dark"] .notification-item.success .notification-item-icon{background:rgba(5,150,105,.15)}html[data-app-mode="dark"] .notification-item.warning .notification-item-icon{background:rgba(217,119,6,.15)}html[data-app-mode="dark"] .notification-item.error .notification-item-icon{background:rgba(220,38,38,.15)}

body.scanner-fullscreen-active{overflow:hidden!important}
body.scanner-fullscreen-active #scanner-frame{position:fixed!important;inset:0!important;z-index:140!important;width:100vw!important;height:100dvh!important;max-width:none!important;aspect-ratio:auto!important;margin:0!important;border-radius:0!important;background:#000!important}
body.scanner-fullscreen-active #scanner-frame #reader,body.scanner-fullscreen-active #scanner-frame #reader video,body.scanner-fullscreen-active #scanner-frame #reader canvas{border-radius:0!important}
body.scanner-fullscreen-active #scanner-active-overlay{display:block!important}
.scanner-fullscreen-header{position:absolute;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 140px);padding:8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(2,6,23,.7);color:#fff;backdrop-filter:blur(10px);font-size:11px;white-space:nowrap}.scanner-fullscreen-header span:first-child{font-weight:800}.scanner-fullscreen-header span:last-child{overflow:hidden;color:#cbd5e1;text-overflow:ellipsis}
.scanner-fullscreen-controls{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:flex;gap:10px}
.scanner-fs-control{display:flex;align-items:center;justify-content:center;gap:7px;min-width:82px;height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(15,23,42,.78);color:#fff;font-size:11px;font-weight:800;backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(0,0,0,.25)}
.scanner-fs-stop{background:rgba(185,28,28,.84)}
body.scanner-fullscreen-active .scanner-line{left:12%;right:12%}

@media(max-width:767px){
  #app-shell{position:relative;flex-direction:column!important}
  .mobile-sidebar{position:fixed!important;top:0;bottom:0;left:0;width:min(82vw,290px)!important;max-width:290px;transform:translateX(-105%);transition:transform .24s ease;box-shadow:20px 0 50px rgba(15,23,42,.2);z-index:100!important}
  #app-shell.mobile-sidebar-open .mobile-sidebar{transform:translateX(0)}
  .mobile-sidebar-toggle{display:grid!important;order:-1}
  .mobile-sidebar-close{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border:1px solid rgba(148,163,184,.25);border-radius:10px;color:inherit;background:rgba(148,163,184,.08)}
  .mobile-sidebar-backdrop{position:fixed;inset:0;z-index:90;background:rgba(2,6,23,.5);backdrop-filter:blur(2px)}
  #app-shell.mobile-sidebar-open .mobile-sidebar-backdrop{display:block!important}
  #app-shell.sidebar-collapsed .mobile-sidebar{width:min(82vw,290px)!important}
  #app-shell.sidebar-collapsed .sidebar-brand-text,#app-shell.sidebar-collapsed .sidebar-label,#app-shell.sidebar-collapsed .sidebar-user-details{display:block!important}
  #app-shell.sidebar-collapsed #desktop-sidebar nav button,#app-shell.sidebar-collapsed #desktop-sidebar [data-action="logout"],#app-shell.sidebar-collapsed #desktop-sidebar #reset-button-desktop,#app-shell.sidebar-collapsed #desktop-sidebar #open-app-theme-button-desktop,#app-shell.sidebar-collapsed #desktop-sidebar #sidebar-toggle-button{justify-content:flex-start;padding-left:1rem;padding-right:1rem}
  #sidebar-toggle-button{display:none!important}
  .app-header-page{display:none}
  .app-header-actions{width:100%;justify-content:space-between}
  .app-data-sync-status{margin-left:auto}
  .app-header-user-copy{display:none}
  .notification-panel{position:fixed;top:72px;left:12px;right:12px;width:auto;max-height:calc(100dvh - 86px)}
  .notification-list{max-height:calc(100dvh - 190px)}
  #scanner-frame{width:min(100%,calc(100vw - 46px))}
  .scanner-fullscreen-header{max-width:calc(100% - 28px);top:max(12px,env(safe-area-inset-top));font-size:10px}
  .scanner-fullscreen-header span:last-child{display:none}
  .scanner-fullscreen-controls{left:50%;right:auto;transform:translateX(-50%);width:max-content}
}

/* ===== Patch v2.6.1: scanner controls, responsive sidebar animation, profile menu ===== */
.pointer-events-auto{pointer-events:auto!important}

/* Scanner controls must stay above the camera/video surface and remain tappable. */
body.scanner-fullscreen-active #scanner-active-overlay{
  z-index:70!important;
  pointer-events:none!important;
}
body.scanner-fullscreen-active #scanner-active-overlay .scanner-fullscreen-controls{
  z-index:90!important;
  pointer-events:auto!important;
}
body.scanner-fullscreen-active #scanner-active-overlay .scanner-fs-control{
  position:relative;
  z-index:91;
  pointer-events:auto!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
body.scanner-fullscreen-active #scanner-frame #reader{
  z-index:1!important;
}

/* Smoother width/label animation instead of abruptly display:none. */
#desktop-sidebar{
  overflow-x:hidden;
  will-change:width,transform;
  transition:width .30s cubic-bezier(.4,0,.2,1),transform .26s cubic-bezier(.4,0,.2,1),background-color .22s ease!important;
}
#desktop-sidebar .sidebar-brand-text,
#desktop-sidebar .sidebar-label{
  display:block!important;
  max-width:210px;
  opacity:1;
  visibility:visible;
  transform:translateX(0);
  overflow:hidden;
  white-space:nowrap;
  transition:max-width .26s cubic-bezier(.4,0,.2,1),opacity .18s ease,transform .26s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s;
}
#desktop-sidebar .nav-desktop,
#desktop-sidebar #open-app-theme-button-desktop,
#desktop-sidebar #reset-button-desktop,
#desktop-sidebar #sidebar-toggle-button,
#sidebar-brand-row{
  transition:padding .28s cubic-bezier(.4,0,.2,1),gap .24s ease,background-color .18s ease,color .18s ease!important;
}
#app-shell.sidebar-collapsed #desktop-sidebar .sidebar-brand-text,
#app-shell.sidebar-collapsed #desktop-sidebar .sidebar-label{
  display:block!important;
  max-width:0;
  opacity:0;
  visibility:hidden;
  transform:translateX(-8px);
  transition:max-width .24s cubic-bezier(.4,0,.2,1),opacity .13s ease,transform .24s cubic-bezier(.4,0,.2,1),visibility 0s linear .24s;
}
#app-shell.sidebar-collapsed #desktop-sidebar .nav-desktop,
#app-shell.sidebar-collapsed #desktop-sidebar #open-app-theme-button-desktop,
#app-shell.sidebar-collapsed #desktop-sidebar #reset-button-desktop,
#app-shell.sidebar-collapsed #desktop-sidebar #sidebar-toggle-button{gap:0!important}
#sidebar-toggle-icon{transition:transform .28s cubic-bezier(.4,0,.2,1)}
#app-shell.sidebar-collapsed #sidebar-toggle-icon{transform:rotate(180deg)}

/* Profile menu: logout is shown only after the profile control is pressed. */
.app-profile-wrap{position:relative;flex:0 0 auto}
#profile-menu-button{cursor:pointer;appearance:none;text-align:left}
.app-profile-chevron{margin-left:2px;color:var(--app-muted);font-size:10px;transition:transform .2s ease}
#profile-menu-button[aria-expanded="true"] .app-profile-chevron{transform:rotate(180deg)}
.profile-menu-panel{position:absolute;top:calc(100% + 10px);right:0;z-index:85;width:230px;overflow:hidden;border:1px solid var(--app-border);border-radius:15px;background:var(--app-panel);box-shadow:0 22px 55px rgba(15,23,42,.18);color:var(--app-text)}
.profile-menu-head{display:flex;align-items:center;gap:10px;padding:13px;border-bottom:1px solid var(--app-border)}
.profile-menu-avatar{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border-radius:10px;background:var(--app-accent);color:#fff;font-size:12px;font-weight:800}
.profile-menu-copy{min-width:0}.profile-menu-copy strong,.profile-menu-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-menu-copy strong{font-size:12px}.profile-menu-copy small{margin-top:2px;color:var(--app-muted);font-size:9px}
.profile-menu-logout{display:flex;width:100%;align-items:center;gap:9px;padding:11px 13px;color:#dc2626;font-size:12px;font-weight:800;text-align:left;transition:background-color .16s ease,color .16s ease}
.profile-menu-logout:hover{background:#fef2f2;color:#b91c1c}
html[data-app-mode="dark"] .profile-menu-logout:hover{background:rgba(220,38,38,.12)}

@media(max-width:767px){
  /* Keep expand/collapse available on mobile and let the drawer itself resize. */
  #sidebar-toggle-button{display:flex!important}
  .mobile-sidebar{width:min(82vw,290px)!important;max-width:290px!important;transition:width .30s cubic-bezier(.4,0,.2,1),transform .26s cubic-bezier(.4,0,.2,1),background-color .22s ease!important}
  #app-shell.sidebar-collapsed .mobile-sidebar{width:88px!important;max-width:88px!important}
  #app-shell.sidebar-collapsed .sidebar-brand-text,
  #app-shell.sidebar-collapsed .sidebar-label{display:block!important;max-width:0!important;opacity:0!important;visibility:hidden!important;transform:translateX(-8px)!important}
  #app-shell.sidebar-collapsed #desktop-sidebar nav button,
  #app-shell.sidebar-collapsed #desktop-sidebar #reset-button-desktop,
  #app-shell.sidebar-collapsed #desktop-sidebar #open-app-theme-button-desktop,
  #app-shell.sidebar-collapsed #desktop-sidebar #sidebar-toggle-button{justify-content:center!important;padding-left:.75rem!important;padding-right:.75rem!important;gap:0!important}
  #app-shell.sidebar-collapsed #sidebar-brand-row{justify-content:center!important;padding-left:.75rem!important;padding-right:.75rem!important;gap:0!important}
  #app-shell.sidebar-collapsed #sidebar-brand-row .app-brand-logo-wrap{display:none!important}
  #app-shell.sidebar-collapsed .mobile-sidebar-close{margin:0 auto}
  #app-shell.sidebar-collapsed .mazer-sidebar-title{display:none!important}
  #app-shell.sidebar-collapsed #desktop-sidebar nav,
  #app-shell.sidebar-collapsed .mazer-sidebar-footer{padding-left:14px!important;padding-right:14px!important}
  .profile-menu-panel{position:fixed;top:72px;right:12px;width:min(250px,calc(100vw - 24px))}
  .app-profile-chevron{display:none}
}

@media(prefers-reduced-motion:reduce){
  #desktop-sidebar,#desktop-sidebar *{transition-duration:.01ms!important}
}


/* ===== v2.6.2 mobile header / theme action / QR surface fixes ===== */
.app-primary-action{
  background:var(--app-accent)!important;
  color:#fff!important;
  border:1px solid rgba(var(--app-accent-rgb),.92)!important;
  box-shadow:0 10px 24px rgba(var(--app-accent-rgb),.18)!important;
}
.app-primary-action:hover{filter:brightness(.94);box-shadow:0 12px 28px rgba(var(--app-accent-rgb),.24)!important}
.app-primary-action:focus-visible{outline:3px solid rgba(var(--app-accent-rgb),.22);outline-offset:2px}
.app-primary-action:disabled{opacity:.68;cursor:not-allowed;filter:none}

#mobile-sidebar-toggle-icon{display:block;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .15s ease}
#mobile-sidebar-toggle:active #mobile-sidebar-toggle-icon{transform:scale(.86)}
#mobile-sidebar-toggle.is-open{color:var(--app-accent)!important;background:rgba(var(--app-accent-rgb),.08)!important}

/* QR must stay on a white optical surface in every application theme. */
.qr-code-surface,
#qrcode-container,
#qrcode-container canvas,
#qrcode-container img{
  background:#fff!important;
  color-scheme:light!important;
}
.qr-code-surface{isolation:isolate;width:min(100%,264px);min-height:264px;display:grid!important;place-items:center;overflow:hidden}
#qrcode-container{width:100%;min-height:232px;display:grid;place-items:center}
#qrcode-container canvas,#qrcode-container img{max-width:100%;height:auto;margin:auto}

@media(max-width:767px){
  /* Mobile uses the header control; do not show the resize control inside the drawer. */
  .gift-accounts-editor-heading{align-items:stretch;flex-direction:column}
  .gift-account-add-button{width:100%}
  .gift-account-editor-grid{grid-template-columns:1fr}
  .gift-account-holder-field{grid-column:auto}
  #sidebar-toggle-button{display:none!important}
  #app-shell.sidebar-collapsed .mobile-sidebar{width:min(82vw,290px)!important;max-width:290px!important}
  #app-shell.sidebar-collapsed #desktop-sidebar .sidebar-brand-text,
  #app-shell.sidebar-collapsed #desktop-sidebar .sidebar-label,
  #app-shell.sidebar-collapsed #desktop-sidebar .sidebar-user-details{
    display:block!important;max-width:none!important;opacity:1!important;visibility:visible!important;transform:none!important
  }
  #app-shell.sidebar-collapsed #desktop-sidebar nav button,
  #app-shell.sidebar-collapsed #desktop-sidebar #reset-button-desktop,
  #app-shell.sidebar-collapsed #desktop-sidebar #open-app-theme-button-desktop{
    justify-content:flex-start!important;padding-left:1rem!important;padding-right:1rem!important;gap:.75rem!important
  }
  #app-shell.sidebar-collapsed #sidebar-brand-row{justify-content:flex-start!important;padding-left:1.5rem!important;padding-right:1.5rem!important;gap:.75rem!important}
  #app-shell.sidebar-collapsed #sidebar-brand-row .app-brand-logo-wrap{display:grid!important}
  #app-shell.sidebar-collapsed .mazer-sidebar-title{display:block!important}
  #app-shell.sidebar-collapsed #desktop-sidebar nav,
  #app-shell.sidebar-collapsed .mazer-sidebar-footer{padding-left:1rem!important;padding-right:1rem!important}
}

/* v2.6.3: never expose the install action from an already-installed app window. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui), (display-mode: window-controls-overlay) {
  #install-app-button { display: none !important; }
}

/* The editor embeds the public invitation, so the preview uses its real layout. */
.invitation-preview-column { min-width:0; align-self:stretch; }
.invitation-preview-sticky { position:sticky; top:16px; max-height:calc(100vh - 32px); }
.invitation-preview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.invitation-preview-close { display:none; flex:0 0 auto; width:36px; height:36px; border-radius:10px; background:#e2e8f0; font-size:26px; line-height:1; color:#334155; }
#invitation-live-preview { position:relative; width:min(100%,420px); height:clamp(440px,calc(100vh - 145px),830px); margin:auto; border:7px solid #172033; border-radius:26px; background:#fff; box-shadow:0 16px 44px rgba(15,23,42,.18); }
#invitation-live-preview iframe { display:block; width:100%; height:100%; border:0; border-radius:19px; background:#fff; }
.invitation-preview-status { position:absolute; inset:0; z-index:1; display:grid; place-items:center; padding:32px; text-align:center; color:#475569; background:#f8fafc; font-size:14px; line-height:1.5; }
.invitation-preview-status[hidden] { display:none!important; }
.whatsapp-message-preview { margin:10px 0 0; font:13px/1.55 inherit; white-space:pre-wrap; overflow-wrap:anywhere; color:#065f46; }
.invitation-preview-backdrop[hidden] { display:none!important; }
.invitation-preview-backdrop { position:fixed; inset:0; z-index:109; background:rgba(2,6,23,.68); backdrop-filter:blur(4px); }
#view-invitation-editor.is-preview-expanded .invitation-preview-column { position:fixed; z-index:110; inset:12px; display:grid; place-items:center; margin:0; width:auto; }
#view-invitation-editor.is-preview-expanded .invitation-preview-sticky { position:static; width:min(100%,480px); max-height:100%; padding:14px; border-radius:20px; background:var(--app-panel,#fff); box-shadow:0 25px 70px rgba(0,0,0,.32); overflow:auto; }
#view-invitation-editor.is-preview-expanded #invitation-live-preview { height:min(78vh,830px); }
#view-invitation-editor.is-preview-expanded .invitation-preview-close { display:block; }
.invitation-preview-fab { display:none; }
@media (max-width:1050px) {
  .invitation-preview-column { display:none; }
  .invitation-preview-fab { position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:75; display:flex; align-items:center; gap:8px; padding:12px 17px; border-radius:999px; color:#fff; background:#9f1239; box-shadow:0 12px 30px rgba(136,19,55,.28); font-size:13px; font-weight:700; }
  #view-invitation-editor.is-preview-expanded .invitation-preview-fab { display:none; }
  #view-invitation-editor.is-preview-expanded .invitation-preview-column { inset:8px; }
}
#wedding-gallery-dropzone.is-dragging { border-color:#e11d48; background:#fff1f2; box-shadow:0 0 0 4px rgba(225,29,72,.1); }
#upload-wedding-gallery-button:disabled { opacity:.55; cursor:wait; }
.gallery-layout-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.gallery-layout-choice { position:relative; cursor:pointer; }
.gallery-layout-choice input { position:absolute; width:1px; height:1px; opacity:0; }
.gallery-layout-choice-content { display:flex; flex-direction:column; height:100%; gap:4px; padding:12px; border:2px solid #e2e8f0; border-radius:14px; background:var(--app-panel,#fff); color:#334155; }
.gallery-layout-choice input:checked + .gallery-layout-choice-content { border-color:#e11d48; background:#fff1f2; }
.gallery-layout-choice input:focus-visible + .gallery-layout-choice-content { outline:3px solid #be123c; outline-offset:2px; }
.gallery-layout-choice strong { font-size:13px; }.gallery-layout-choice small { color:#64748b; font-size:11px; }
.gallery-layout-sample { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,15px); gap:3px; margin-bottom:7px; overflow:hidden; }
.gallery-layout-sample i { display:block; border-radius:3px; background:#fda4af; }
.sample-collage i:first-child { grid-column:span 2; grid-row:span 2; }.sample-collage i:last-child { grid-column:span 2; }
.sample-grid i { grid-column:span 2; }.sample-filmstrip { grid-template-columns:repeat(4,40%); }.sample-filmstrip i { grid-row:span 2; }
@media(max-width:640px) { .gallery-layout-choices { grid-template-columns:1fr; } .gallery-layout-choice-content { padding:10px 12px; } }
.whatsapp-message-preview { font-family:inherit; font-size:13px; line-height:1.55; }

/* v2.16.0: editor Undangan Digital dan Undangan Kartu (fisik). */
.invitation-editor-type-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:6px;border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc}
.invitation-editor-type-switch button{display:flex;min-height:76px;align-items:center;gap:13px;padding:13px 15px;border:1px solid transparent;border-radius:14px;color:#64748b;text-align:left;transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.invitation-editor-type-switch button:hover{color:#334155;background:#fff;transform:translateY(-1px)}
.invitation-editor-type-switch button.is-active{border-color:#f9a8b8;background:#fff;color:#9f1239;box-shadow:0 8px 24px rgba(136,19,55,.09)}
.invitation-editor-type-switch button>i{display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;border-radius:13px;background:#e2e8f0;color:#475569;font-size:18px}
.invitation-editor-type-switch button.is-active>i{background:#ffe4e6;color:#be123c}
.invitation-editor-type-switch strong,.invitation-editor-type-switch small{display:block}.invitation-editor-type-switch strong{font-size:14px}.invitation-editor-type-switch small{margin-top:3px;color:#64748b;font-size:11px;line-height:1.35}
.invitation-editor-surface{display:grid;gap:20px}.invitation-editor-surface[hidden],[data-invitation-editor-surface][hidden]{display:none!important}
.invitation-preview-close-floating{position:absolute;z-index:5;top:10px;right:10px}
.card-invitation-preview-shell{display:grid;place-items:center;min-height:460px;padding:20px;overflow:auto;border-radius:22px;background:radial-gradient(circle at top,#fff 0,#f8fafc 58%,#e2e8f0 100%)}
.card-invitation-preview{--card-accent:#b7893e;--card-background:#fffdf9;--card-text:#2f251e;position:relative;width:min(100%,380px);overflow:hidden;background:var(--card-background);color:var(--card-text);border:1px solid color-mix(in srgb,var(--card-accent) 32%,#ddd);box-shadow:0 18px 45px rgba(15,23,42,.18);padding:34px 30px 26px;text-align:center}
.physical-card-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.physical-card-decoration{position:absolute;inset:0;pointer-events:none}.physical-card-decoration i{position:absolute;display:block;border:1px solid color-mix(in srgb,var(--card-accent) 42%,transparent);border-radius:50%}.physical-card-decoration i:first-child{width:210px;height:210px;right:-105px;top:-105px}.physical-card-decoration i:nth-child(2){width:138px;height:138px;left:-72px;bottom:-66px}.physical-card-decoration i:last-child{inset:13px;border-radius:10px}
.physical-card-eyebrow{margin:0;color:var(--card-accent);font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.physical-card-monogram{display:grid;place-items:center;width:53px;height:53px;margin:18px auto 13px;border:1px solid var(--card-accent);border-radius:50%;color:var(--card-accent);font:600 23px Georgia,serif}.physical-card-hosts{margin:0;font:600 30px/1.04 Georgia,serif;color:var(--card-text)}.physical-card-line{width:68px;height:2px;margin:16px auto;background:var(--card-accent)}.physical-card-to{margin:0;color:color-mix(in srgb,var(--card-text) 64%,transparent);font-size:10px}.physical-card-guest{margin:5px 0 0;font:600 20px Georgia,serif}.physical-card-category{display:inline-block;margin-top:7px;padding:4px 9px;border-radius:99px;background:color-mix(in srgb,var(--card-accent) 12%,transparent);color:var(--card-accent);font-size:8px;font-weight:800}.physical-card-details{width:100%;margin:17px auto 0;padding:12px 6px;border-top:1px solid color-mix(in srgb,var(--card-accent) 18%,transparent);border-bottom:1px solid color-mix(in srgb,var(--card-accent) 18%,transparent)}.physical-card-details strong,.physical-card-details span{display:block}.physical-card-details strong{font-size:11px}.physical-card-details span{margin-top:3px;color:color-mix(in srgb,var(--card-text) 68%,transparent);font-size:9px;line-height:1.4}.physical-card-qr-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;text-align:left}.physical-card-qr{display:grid;width:72px;height:72px;flex:0 0 72px;place-items:center;border:1px solid color-mix(in srgb,var(--card-accent) 20%,transparent);border-radius:8px;padding:5px;background:#fff}.physical-card-qr img{width:100%;height:100%;object-fit:contain}.physical-card-qr-placeholder{color:#0f172a;font-size:53px;line-height:1}.physical-card-qr-copy strong,.physical-card-qr-copy span,.physical-card-qr-copy small{display:block}.physical-card-qr-copy strong{font-size:10px}.physical-card-qr-copy span{margin-top:3px;color:color-mix(in srgb,var(--card-text) 68%,transparent);font-size:8px;line-height:1.35}.physical-card-qr-copy small{margin-top:4px;color:var(--card-accent);font-size:8px;font-weight:800}.physical-card-brand{margin-top:auto;padding-top:15px;color:color-mix(in srgb,var(--card-text) 60%,transparent);font-size:7px;letter-spacing:.08em;text-transform:uppercase}
.card-template-botanical .physical-card-decoration i:first-child,.card-template-botanical .physical-card-decoration i:nth-child(2){border-radius:80% 10% 80% 10%;border-width:2px;transform:rotate(28deg)}.card-template-botanical .physical-card-monogram{border-radius:80% 20% 80% 20%;transform:rotate(-6deg)}
.card-template-modern{border:0;border-left:18px solid var(--card-accent);text-align:left}.card-template-modern .physical-card-content{align-items:flex-start}.card-template-modern .physical-card-monogram{margin-left:0;border-radius:9px}.card-template-modern .physical-card-line{margin-left:0}.card-template-modern .physical-card-details{padding-left:0;text-align:left}.card-template-modern .physical-card-qr-row{align-self:stretch;justify-content:flex-start}.card-template-modern .physical-card-decoration i:last-child{display:none}
.card-template-minimal{border:1px solid color-mix(in srgb,var(--card-text) 16%,transparent)}.card-template-minimal .physical-card-decoration{display:none}.card-template-minimal .physical-card-monogram{border:0;margin-bottom:7px}
.card-invitation-preview.orientation-landscape{width:min(100%,440px);padding:25px 32px}.card-invitation-preview.orientation-landscape .physical-card-content{display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:auto auto auto;column-gap:28px;align-content:center}.orientation-landscape .physical-card-eyebrow,.orientation-landscape .physical-card-monogram,.orientation-landscape .physical-card-hosts,.orientation-landscape .physical-card-line,.orientation-landscape .physical-card-to,.orientation-landscape .physical-card-guest,.orientation-landscape .physical-card-category{grid-column:1}.orientation-landscape .physical-card-details,.orientation-landscape .physical-card-qr-row{grid-column:2}.orientation-landscape .physical-card-details{grid-row:1/2;margin:0}.orientation-landscape .physical-card-qr-row{grid-row:2/4;margin-top:12px}.orientation-landscape .physical-card-brand{grid-column:1/-1;align-self:end;margin-top:10px}.orientation-landscape .physical-card-hosts{font-size:24px}.orientation-landscape .physical-card-monogram{margin-top:10px;margin-bottom:10px}.orientation-landscape .physical-card-qr{width:58px;height:58px;flex-basis:58px}.orientation-landscape .physical-card-qr-placeholder{font-size:43px}
#view-invitation-editor.is-preview-expanded #card-invitation-preview-shell{min-height:min(72vh,720px)}
html[data-app-mode="dark"] .invitation-editor-type-switch{border-color:#334155;background:#0f172a}html[data-app-mode="dark"] .invitation-editor-type-switch button:hover,html[data-app-mode="dark"] .invitation-editor-type-switch button.is-active{background:#1e293b;color:#fda4af}html[data-app-mode="dark"] .card-invitation-preview-shell{background:radial-gradient(circle at top,#334155 0,#1e293b 55%,#0f172a 100%)}
@media(max-width:640px){.invitation-editor-type-switch{grid-template-columns:1fr}.invitation-editor-type-switch button{min-height:68px}.card-invitation-preview-shell{min-height:400px;padding:12px}.card-invitation-preview{padding:28px 22px 22px}.physical-card-hosts{font-size:25px}.physical-card-qr{width:62px;height:62px;flex-basis:62px}.physical-card-qr-placeholder{font-size:45px}.card-invitation-preview.orientation-landscape{padding:20px}.card-invitation-preview.orientation-landscape .physical-card-content{column-gap:18px}.orientation-landscape .physical-card-hosts{font-size:20px}.orientation-landscape .physical-card-qr-copy span{display:none}}

/* v2.17.0: kartu dua sisi dengan sampul dan isi lengkap. */
.card-preview-side-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px;padding:5px;border:1px solid #e2e8f0;border-radius:13px;background:#f8fafc}
.card-preview-side-switch button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;border-radius:9px;color:#64748b;font-size:12px;font-weight:700;transition:.2s ease}
.card-preview-side-switch button.is-active{background:#fff;color:#7c3aed;box-shadow:0 4px 14px rgba(76,29,149,.12)}
.card-invitation-preview[hidden]{display:none!important}.physical-card-cover-text{max-width:290px;margin:0 auto 14px;color:color-mix(in srgb,var(--card-text) 76%,transparent);font-size:9px;line-height:1.55}
.physical-card-inside{padding:20px 18px}.physical-card-inside .card-inside-content{justify-content:flex-start;gap:7px}.card-inside-intro h2{margin:4px 0;color:var(--card-accent);font:600 20px Georgia,serif}.card-inside-intro>p:last-child{max-width:330px;margin:0 auto;font-size:8px;line-height:1.42}.card-inside-couple-wrap{width:100%}.card-inside-couple-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;width:100%;padding:8px;border-top:1px solid color-mix(in srgb,var(--card-accent) 18%,transparent);border-bottom:1px solid color-mix(in srgb,var(--card-accent) 18%,transparent)}.card-inside-couple-grid article span,.card-inside-couple-grid article strong,.card-inside-couple-grid article small{display:block}.card-inside-couple-grid article span{color:var(--card-accent);font-size:6px;font-weight:800;text-transform:uppercase}.card-inside-couple-grid article strong{margin-top:2px;font:600 12px Georgia,serif}.card-inside-couple-grid article small{margin-top:2px;font-size:6px;line-height:1.3}.card-inside-couple-grid>i{color:var(--card-accent);font:italic 16px Georgia,serif}.card-inside-quote{margin:5px auto 0;max-width:320px;color:color-mix(in srgb,var(--card-text) 74%,transparent);font:italic 7px/1.35 Georgia,serif}.card-inside-events{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:100%}.card-inside-event{padding:7px;border:1px solid color-mix(in srgb,var(--card-accent) 22%,transparent);border-radius:7px}.card-inside-event strong,.card-inside-event span,.card-inside-event b,.card-inside-event small{display:block}.card-inside-event strong{color:var(--card-accent);font:600 11px Georgia,serif}.card-inside-event span,.card-inside-event small{margin-top:2px;font-size:6px;line-height:1.25}.card-inside-event b{margin-top:3px;font-size:7px}.card-inside-extras{display:grid;gap:5px;width:100%}.card-inside-gift{padding:6px;border-radius:7px;background:color-mix(in srgb,var(--card-accent) 8%,transparent)}.card-inside-gift strong,.card-inside-gift span{display:block}.card-inside-gift strong{color:var(--card-accent);font-size:7px}.card-inside-gift span{margin-top:2px;font-size:6px;line-height:1.25}.physical-card-inside .physical-card-qr-row{gap:9px;margin-top:0}.physical-card-inside .physical-card-qr{width:54px;height:54px;flex-basis:54px}.physical-card-inside .physical-card-qr-placeholder{font-size:40px}.physical-card-inside .physical-card-qr-copy strong{font-size:8px}.physical-card-inside .physical-card-qr-copy span,.physical-card-inside .physical-card-qr-copy small{font-size:6px}.card-inside-closing strong,.card-inside-closing p{display:block;margin:0}.card-inside-closing strong{color:var(--card-accent);font:600 9px Georgia,serif}.card-inside-closing p{margin-top:2px;font-size:6px;line-height:1.3}.physical-card-inside .physical-card-brand{padding-top:5px}
.card-side-cover.orientation-landscape .card-cover-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;column-gap:24px;align-content:center}.card-side-cover.orientation-landscape .physical-card-eyebrow,.card-side-cover.orientation-landscape .physical-card-monogram,.card-side-cover.orientation-landscape .physical-card-hosts,.card-side-cover.orientation-landscape .physical-card-line{grid-column:1}.card-side-cover.orientation-landscape .physical-card-cover-text,.card-side-cover.orientation-landscape .physical-card-to,.card-side-cover.orientation-landscape .physical-card-guest,.card-side-cover.orientation-landscape .physical-card-category{grid-column:2}.card-side-inside.orientation-landscape .card-inside-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr auto;column-gap:12px;row-gap:5px;align-content:start}.card-side-inside.orientation-landscape .card-inside-intro{grid-column:1;grid-row:1}.card-side-inside.orientation-landscape .card-inside-couple-wrap{grid-column:1;grid-row:2/4}.card-side-inside.orientation-landscape .card-inside-events{grid-column:2;grid-row:1/3}.card-side-inside.orientation-landscape .card-inside-extras{grid-column:2;grid-row:3}.card-side-inside.orientation-landscape .physical-card-brand{grid-column:1/-1;grid-row:4}.card-size-a6.card-side-inside,.card-size-square.card-side-inside{padding:14px 12px}.card-size-a6 .card-inside-content,.card-size-square .card-inside-content{gap:4px}
html[data-app-mode="dark"] .card-preview-side-switch{border-color:#334155;background:#0f172a}html[data-app-mode="dark"] .card-preview-side-switch button.is-active{background:#1e293b;color:#c4b5fd}
@media(max-width:640px){.physical-card-inside{padding:15px 12px}.card-inside-intro h2{font-size:17px}.card-inside-couple-grid{gap:5px;padding:6px}.card-inside-event{padding:5px}.card-side-inside.orientation-landscape .card-inside-content{column-gap:8px}.physical-card-cover-text{font-size:8px}}

/* Souvenir redemption v2.22.0 */
.souvenir-settings{padding:18px 22px;border:1px solid var(--app-border,#e2e8f0);border-radius:18px;background:var(--app-panel,#fff);color:var(--app-text,#1e293b)}
.souvenir-settings summary{cursor:pointer;font-weight:700}.souvenir-settings p{margin:12px 0;color:var(--app-muted,#64748b);font-size:13px;line-height:1.6}
#souvenir-popup-close{padding:12px 18px;border:0;border-radius:12px;background:var(--app-accent,#435ebe);color:#fff;font-weight:700;cursor:pointer}
.souvenir-result-modal{position:fixed;inset:0;z-index:220!important;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,.7);backdrop-filter:blur(5px)}
.souvenir-popup-panel{width:100%;max-width:500px;max-height:90dvh;overflow:auto;border-radius:24px;padding:28px;background:var(--app-panel,#fff);color:var(--app-text,#1e293b);box-shadow:0 28px 90px #0005}
.souvenir-popup-panel h2{font-size:22px;font-weight:800;line-height:1.3;margin:14px 0 8px}.souvenir-popup-panel p{font-size:14px;line-height:1.65;margin-bottom:18px}
.souvenir-popup-icon{width:62px;height:62px;display:grid;place-items:center;border-radius:18px;font-size:28px;background:#d1fae5;color:#047857}.souvenir-popup-icon.is-warning{background:#fef3c7;color:#b45309}.souvenir-popup-icon.is-error{background:#fee2e2;color:#b91c1c}
#souvenir-popup-detail{padding:14px;border:1px solid var(--app-border,#e2e8f0);border-radius:14px;font-size:13px}#souvenir-popup-detail:empty{display:none}
#souvenir-popup-detail>div{display:flex;justify-content:space-between;gap:16px;padding:7px 0}#souvenir-popup-detail dt{color:var(--app-muted,#64748b)}#souvenir-popup-detail dd{font-weight:700;text-align:right;overflow-wrap:anywhere;max-width:65%}
#souvenir-popup-close{width:100%;margin-top:20px}.souvenir-badge{display:inline-block;white-space:nowrap;padding:6px 10px;border-radius:20px;font-size:11px;font-weight:700;background:#fef3c7;color:#92400e}.souvenir-badge.is-received{background:#d1fae5;color:#065f46}
@media(max-width:480px){.souvenir-popup-panel{padding:22px}}

#view-log table{min-width:1100px}

/* Business-size guest access cards */
.souvenir-category-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--app-border,#e2e8f0);font-size:14px}.souvenir-category-row span{color:var(--app-muted,#64748b)}
.access-editor-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}.access-editor-heading h2{font-size:27px;font-weight:800;color:var(--app-text,#172033);margin:5px 0}.access-editor-heading p{font-size:14px;color:var(--app-muted,#64748b);line-height:1.6}
.access-size-badge{white-space:nowrap;padding:9px 14px;border:1px solid var(--app-border,#e2e8f0);border-radius:12px;color:var(--app-accent,#435ebe);background:var(--app-panel,#fff);font-weight:700;font-size:13px}
.access-editor-grid{display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:24px;align-items:start}.access-editor-panel{padding:24px;border:1px solid var(--app-border,#e2e8f0);border-radius:20px;background:var(--app-panel,#fff);color:var(--app-text,#172033)}
.access-editor-panel h3{font-size:17px;font-weight:800;margin:0 0 8px}.access-editor-panel p{font-size:13px;color:var(--app-muted,#64748b);line-height:1.6;margin:8px 0 18px}.access-editor-panel label{display:block;font-size:13px;font-weight:700;margin:16px 0 7px}.access-editor-panel input,.access-editor-panel select,.access-editor-panel textarea{width:100%;border:1px solid var(--app-border,#cbd5e1);border-radius:10px;background:var(--app-panel,#fff);color:inherit;padding:10px;font-size:13px}.access-editor-panel textarea{resize:vertical}.access-color-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.access-color-fields label{font-size:12px}.access-color-fields input{height:42px;margin-top:8px;padding:4px;cursor:pointer}
.access-primary-button{width:100%;margin-top:20px;padding:13px;border-radius:12px;background:var(--app-accent,#435ebe);color:white;font-size:14px;font-weight:700}.access-primary-button:disabled{opacity:.65}
.access-preview-stage{display:grid;place-items:center;min-height:280px;padding:24px 0;background:linear-gradient(135deg,#f1f5f9,#e2e8f0);border-radius:14px;margin:22px 0}#access-card-preview{width:100%;max-width:680px;aspect-ratio:90/55}#access-card-preview svg{display:block;width:100%;height:auto;box-shadow:0 14px 34px #0f172a25}
.access-export-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.access-export-actions button{padding:11px 8px;border:1px solid var(--app-border,#cbd5e1);border-radius:10px;font-size:12px;font-weight:700}.access-export-actions button:hover{color:var(--app-accent,#435ebe);background:rgba(67,94,190,.06)}
@media(max-width:1100px){.access-editor-grid{grid-template-columns:1fr}.access-preview-column{grid-row:1}.access-preview-stage{min-height:200px}}@media(max-width:480px){.access-editor-panel{padding:18px}.access-editor-heading{flex-direction:column;gap:12px}.access-export-actions{grid-template-columns:repeat(2,1fr)}.access-preview-stage{padding:16px 0;min-height:160px}.souvenir-category-row{flex-direction:column;gap:4px}}

/* Access-card template picker and balanced preview */
.access-template-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 10px;font-size:13px;font-weight:700}.access-template-heading strong{padding:5px 9px;border-radius:8px;background:rgba(67,94,190,.08);color:var(--app-accent,#435ebe);font-size:11px}
.access-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.access-template-option{position:relative;display:flex;min-width:0;flex-direction:column;overflow:hidden;padding:5px;border:1px solid var(--app-border,#dbe2eb);border-radius:11px;background:var(--app-panel,#fff);color:var(--app-text,#172033);text-align:left;transition:border-color .15s,box-shadow .15s}.access-template-option:hover{border-color:var(--app-accent,#435ebe);box-shadow:0 4px 12px rgba(15,23,42,.07)}.access-template-option:focus-visible{outline:2px solid var(--app-accent,#435ebe);outline-offset:3px}.access-template-option.is-selected{border-color:var(--app-accent,#435ebe);box-shadow:0 0 0 1px var(--app-accent,#435ebe)}
.access-template-thumbnail{display:block;width:100%;aspect-ratio:90/55;overflow:hidden;border-radius:6px;background:#f1f5f9}.access-template-thumbnail svg{display:block;width:100%;height:auto}.access-template-name{padding:7px 3px 3px;font-size:11px;font-weight:700}.access-template-check{position:absolute;right:8px;bottom:8px;display:none;align-items:center;justify-content:center;width:17px;height:17px;background:var(--app-accent,#435ebe);color:#fff;border-radius:50%;font-size:10px}.access-template-option.is-selected .access-template-check{display:flex}
.access-customize{margin-top:20px;padding-top:16px;border-top:1px solid var(--app-border,#e2e8f0)}.access-customize summary{cursor:pointer;font-size:13px;font-weight:700;line-height:1.6}.access-preview-column{position:sticky;top:90px}.access-preview-stage{padding:28px 20px}.access-preview-column .access-editor-panel{padding:26px}.access-preview-column .access-editor-panel p{max-width:620px}
@media(max-width:1100px){.access-preview-column{position:static}}@media(max-width:480px){.access-template-grid{gap:8px}.access-preview-column .access-editor-panel{padding:18px}.access-preview-stage{padding:16px 10px}.access-template-name{font-size:10px}.access-template-check{right:6px;bottom:6px;width:15px;height:15px}}

/* Guest access-card popup. Component tokens are owned here. */
:root{--access-dialog-surface:#FBF9F4;--access-dialog-stage:#F4F1EA;--access-dialog-ink:#1A1A1A;--access-dialog-muted:#625E55;--access-dialog-border:#D6D1C6;--access-dialog-action:#4E634A;--access-dialog-action-hover:#3D5039;--access-dialog-danger:#A33428;--access-dialog-heading:Georgia,'Times New Roman',serif;--access-dialog-body:'Nunito',system-ui,sans-serif;--z-dialog:600;--z-toast:900;--scrollbar-thumb:#cbd5e1;--scrollbar-track:#f1f5f9;--scrollbar-hover:#94a3b8;--scrollbar-active:#64748b;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-width:thin}
html[data-app-mode="dark"]{--access-dialog-surface:#22251F;--access-dialog-stage:#2B3027;--access-dialog-ink:#F4F1EA;--access-dialog-muted:#C1C4B8;--access-dialog-border:#515848;--access-dialog-action:#B7CCAB;--access-dialog-action-hover:#CCDDBF;--access-dialog-danger:#FFB4A5}
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb)}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover)}::-webkit-scrollbar-thumb:active{background:var(--scrollbar-active)}
.stella-native-toast{z-index:var(--z-toast)}
.access-guest-modal{position:fixed;inset:0;z-index:var(--z-dialog);align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(26,26,26,.65);font-family:var(--access-dialog-body);color:var(--access-dialog-ink)}
.access-guest-panel{display:flex;flex-direction:column;width:100%;max-width:740px;max-height:calc(100dvh - 48px);border:1px solid var(--access-dialog-border);border-radius:20px;background:var(--access-dialog-surface);overflow:hidden}
.access-guest-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 28px 20px;border-bottom:1px solid var(--access-dialog-border)}
.access-guest-eyebrow{margin:0 0 7px;font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--access-dialog-muted)}
.access-guest-heading h2{margin:0;font-family:var(--access-dialog-heading);font-size:32px;font-weight:400;letter-spacing:-.035em;line-height:1.15}
.access-guest-heading #guest-access-card-description{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--access-dialog-muted)}
.access-guest-body{min-height:0;overflow-y:auto;scrollbar-gutter:stable;padding:20px 28px}
.access-guest-identity{margin:0 0 14px;font-size:14px;font-weight:700;overflow-wrap:anywhere}
.access-guest-stage{display:grid;place-items:center;min-width:0;aspect-ratio:90/55;padding:18px;border:1px solid var(--access-dialog-border);border-radius:10px;background:var(--access-dialog-stage)}
#guest-access-card-preview{width:100%;aspect-ratio:90/55}#guest-access-card-preview svg{display:block;width:100%;height:auto}
.access-guest-status{min-height:42px;margin:16px 0 0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.access-guest-status.is-error{color:var(--access-dialog-danger)}
.access-guest-note{margin:12px 0 0;font-size:12px;line-height:1.65;color:var(--access-dialog-muted)}
.access-guest-actions{display:flex;gap:10px;padding:18px 28px;border-top:1px solid var(--access-dialog-border)}
.access-guest-actions button,.access-guest-close,.access-guest-retry{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:1px solid var(--access-dialog-border);border-radius:10px;background:transparent;color:inherit;cursor:pointer;font:700 14px var(--access-dialog-body);transition:background-color .15s}
.access-guest-actions button{flex:1;padding:12px 10px}.access-guest-close{flex-shrink:0;width:44px}.access-guest-retry{padding:8px 16px;margin-top:10px}.access-guest-retry.hidden{display:none}
.access-guest-actions button:hover:not(:disabled),.access-guest-close:hover,.access-guest-retry:hover{background:var(--access-dialog-stage)}
.access-guest-actions button:active:not(:disabled),.access-guest-close:active,.access-guest-retry:active{transform:translateY(1px)}
.access-guest-modal button:focus-visible{outline:2px solid var(--access-dialog-action);outline-offset:3px}.access-guest-actions button:disabled{opacity:.45;cursor:default}
#guest-access-card-download{background:var(--access-dialog-action);border-color:var(--access-dialog-action);color:var(--access-dialog-surface)}#guest-access-card-download:hover:not(:disabled){background:var(--access-dialog-action-hover)}
.access-guest-stage[aria-busy="true"] #guest-access-card-preview{background:var(--access-dialog-surface);opacity:.45}
@media(max-width:480px){.access-guest-heading{padding:20px}.access-guest-heading h2{font-size:28px}.access-guest-body{padding:16px 20px}.access-guest-stage{padding:8px}.access-guest-actions{padding:16px 20px;gap:7px}.access-guest-actions button{gap:6px;font-size:12px;padding:11px 6px}.access-guest-panel{max-height:calc(100dvh - 40px)}}
@media(prefers-reduced-motion:reduce){.access-guest-modal button{transition:none}.access-guest-modal button:active{transform:none}}
@media(forced-colors:active){:root,*{scrollbar-color:auto}.access-guest-modal button{border:1px solid ButtonText}.access-guest-modal button:focus-visible{outline-color:Highlight}}

.access-guest-close span{font:28px/1 var(--access-dialog-body)}

/* Batch print uses the managed proofing-dialog surface and native form controls. */
.batch-open-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:11px 18px;border:1px solid var(--access-dialog-action);border-radius:12px;background:var(--access-dialog-action);color:var(--access-dialog-surface);font-weight:700;cursor:pointer}.batch-open-button:hover{background:var(--access-dialog-action-hover)}.batch-open-button:focus-visible{outline:2px solid var(--access-dialog-action);outline-offset:3px}.batch-open-button:active{transform:translateY(1px)}
.batch-panel{max-width:1100px}.batch-form{display:flex;flex-direction:column;min-height:0;flex:1}.batch-body{display:grid;grid-template-columns:minmax(270px,.9fr) minmax(0,1.1fr);gap:24px}.batch-body h3{margin:0;font:400 23px/1.25 var(--access-dialog-heading);letter-spacing:-.025em}.batch-section-heading{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}.batch-section-heading>strong{font-size:12px;color:var(--access-dialog-action)}
.batch-label,.batch-fields>label{display:block;font-size:12px;font-weight:700}.batch-label{margin:16px 0 6px}.batch-body input:not([type="checkbox"]),.batch-body select{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--access-dialog-border);border-radius:8px;background:var(--access-dialog-surface);color:inherit;font:14px var(--access-dialog-body)}.batch-body input[aria-invalid="true"]{border-color:var(--access-dialog-danger)}.batch-body input:focus-visible,.batch-body select:focus-visible{outline:2px solid var(--access-dialog-action);outline-offset:2px}.batch-body select{cursor:pointer}.batch-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.batch-fields label>input,.batch-fields label>select{display:block;margin-top:6px}.batch-fields #batch-custom-size{grid-column:1/-1;margin:0}.batch-fields.hidden{display:none}
.batch-search-field{display:flex;gap:7px;align-items:center}.batch-search-field input{min-width:0;flex:1}.batch-body button:not([type="submit"]){min-height:36px;border:1px solid var(--access-dialog-border);border-radius:8px;padding:6px 10px;background:transparent;color:inherit;cursor:pointer;font:700 12px var(--access-dialog-body)}.batch-body button:hover:not(:disabled){background:var(--access-dialog-stage)}.batch-body button:focus-visible{outline:2px solid var(--access-dialog-action);outline-offset:2px}.batch-body button:active:not(:disabled){transform:translateY(1px)}.batch-body button:disabled{opacity:.45;cursor:default}.batch-selection-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.batch-guest-list{max-height:295px;min-height:100px;overflow-y:auto;scrollbar-gutter:stable;border-top:1px solid var(--access-dialog-border);border-bottom:1px solid var(--access-dialog-border)}.batch-guest-row{display:flex;align-items:flex-start;gap:11px;padding:11px 3px;border-bottom:1px solid var(--access-dialog-border);cursor:pointer}.batch-guest-row:last-child{border-bottom:0}.batch-guest-row:hover{background:var(--access-dialog-stage)}.batch-guest-row>input{width:18px;height:18px;flex-shrink:0;margin:3px 0 0;accent-color:var(--access-dialog-action);cursor:pointer}.batch-guest-row>span{min-width:0;overflow-wrap:anywhere}.batch-guest-row strong{display:block;font-size:13px;line-height:1.5}.batch-guest-row small{display:block;margin-top:3px;font-size:11px;color:var(--access-dialog-muted)}.batch-pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:12px}.batch-hint{margin:10px 0 0;color:var(--access-dialog-muted);font-size:12px;line-height:1.65}.batch-checks{display:flex;flex-direction:column;gap:9px;margin:16px 0;font-size:12px}.batch-checks label{display:flex;gap:8px;align-items:flex-start;cursor:pointer}.batch-checks input{margin-top:3px;accent-color:var(--access-dialog-action);cursor:pointer}.batch-layout{display:grid;grid-template-columns:minmax(0,1fr) 115px;gap:16px;align-items:start;padding:16px;background:var(--access-dialog-stage);border:1px solid var(--access-dialog-border);border-radius:10px}.batch-layout strong{font-size:13px;line-height:1.6;display:block}.batch-layout p{font-size:12px;line-height:1.6;margin:8px 0 0}.batch-layout svg{width:100%;height:auto;display:block;max-height:180px}.batch-layout svg rect.batch-paper{fill:var(--access-dialog-surface);stroke:var(--access-dialog-border);stroke-width:2}.batch-layout svg rect:not(.batch-paper){fill:var(--access-dialog-stage);stroke:var(--access-dialog-action);stroke-width:.8}.batch-layout svg text{fill:var(--access-dialog-ink);font:10px Arial,sans-serif}.batch-feedback{grid-column:1/-1;padding-top:4px}.batch-feedback .access-guest-status{margin:0;min-height:24px}.access-guest-actions .batch-primary{flex:0 1 auto;min-width:240px;background:var(--access-dialog-action);border-color:var(--access-dialog-action);color:var(--access-dialog-surface)}.access-guest-actions .batch-primary:hover:not(:disabled){background:var(--access-dialog-action-hover)}
@media(max-width:800px){.batch-body{grid-template-columns:1fr;gap:24px}.batch-guest-list{max-height:210px}.batch-panel .access-guest-actions .batch-primary{flex:1}.batch-fields{gap:10px}.batch-layout{grid-template-columns:minmax(0,1fr) 95px}}
@media(prefers-reduced-motion:reduce){.batch-open-button:active,.batch-body button:active{transform:none}}
.access-guest-heading #batch-print-description{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--access-dialog-muted)}