:root {
    --app-slate-50: #f8fafc;
    --app-slate-100: #f1f5f9;
    --app-slate-200: #e2e8f0;
    --app-slate-300: #cbd5e1;
    --app-slate-400: #94a3b8;
    --app-slate-500: #64748b;
    --app-slate-600: #475569;
    --app-slate-700: #334155;
    --app-slate-800: #1e293b;
    --app-slate-900: #0f172a;
    --app-slate-950: #020617;
    --app-sky-50: #f0f9ff;
    --app-sky-100: #e0f2fe;
    --app-sky-300: #7dd3fc;
    --app-sky-400: #38bdf8;
    --app-sky-500: #0ea5e9;
    --app-sky-600: #0284c7;
    --app-sky-700: #0369a1;
    --app-sky-900: #0c4a6e;
    --app-emerald-50: #ecfdf5;
    --app-emerald-200: #a7f3d0;
    --app-emerald-300: #6ee7b7;
    --app-emerald-700: #047857;
    --app-emerald-800: #065f46;
    --app-emerald-900: #064e3b;
    --app-amber-50: #fffbeb;
    --app-amber-200: #fde68a;
    --app-amber-300: #fcd34d;
    --app-amber-700: #b45309;
    --app-amber-800: #92400e;
    --app-amber-900: #78350f;
    --app-amber-950: #451a03;
    --app-red-50: #fef2f2;
    --app-red-200: #fecaca;
    --app-red-300: #fca5a5;
    --app-red-700: #b91c1c;
    --app-red-800: #991b1b;
    --app-red-900: #7f1d1d;
    --app-red-950: #450a0a;
    --app-radius: 1rem;
    --app-radius-sm: 0.75rem;
    --app-shadow: 0 1px 3px rgb(15 23 42 / 0.1), 0 1px 2px -1px rgb(15 23 42 / 0.1);
    --bs-body-font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --bs-body-color: var(--app-slate-950);
    --bs-body-bg: var(--app-slate-100);
    --bs-primary: var(--app-sky-700);
    --bs-primary-rgb: 3, 105, 161;
    --bs-secondary-color: var(--app-slate-600);
    --bs-border-color: var(--app-slate-200);
    --bs-border-radius: 0.75rem;
    --bs-border-radius-lg: 1rem;
}

html,
body {
    min-height: 100%;
}

body {
    color: var(--app-slate-950);
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
}

.fw-medium {
    font-weight: 500;
}

.fw-semibold {
    font-weight: 600;
}

.font-monospace {
    font-variant-ligatures: none;
}

.font-body {
    font-family: var(--bs-body-font-family);
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.tracking-wide {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.pre-line {
    white-space: pre-line;
}

.break-anywhere {
    overflow-wrap: anywhere;
}

.text-muted-light {
    color: var(--app-slate-400) !important;
}

.text-muted-app {
    color: var(--app-slate-500) !important;
}

.text-secondary {
    color: var(--app-slate-600) !important;
}

.text-muted-strong {
    color: var(--app-slate-700) !important;
}

.text-brand {
    color: var(--app-sky-700) !important;
}

.text-brand-light {
    color: var(--app-sky-300) !important;
}

.text-success-strong {
    color: var(--app-emerald-700) !important;
}

.text-warning-strong {
    color: var(--app-amber-700) !important;
}

.app-container {
    width: min(100% - 3rem, 80rem);
    margin-inline: auto;
}

.content-width-md {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
}

.content-width-lg {
    width: 100%;
    max-width: 56rem;
    margin-inline: auto;
}

.content-width-xl {
    width: 100%;
    max-width: 64rem;
    margin-inline: auto;
}

.content-width-2xl {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
}

.page-kicker {
    margin: 0;
    color: var(--app-sky-700);
    font-size: 0.875rem;
    font-weight: 600;
}

.page-title {
    margin: 0.5rem 0 0;
    font-size: clamp(1.75rem, 4vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.page-description {
    margin: 0.5rem 0 0;
    color: var(--app-slate-600);
}

.section-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.link-accent {
    color: var(--app-sky-700);
    font-size: 0.875rem;
    font-weight: 600;
}

.link-accent:hover,
.link-accent:focus-visible {
    color: var(--app-sky-900);
}

.product-name-link {
    color: var(--app-slate-950);
    font-weight: 600;
}

.product-name-link:hover,
.product-name-link:focus-visible {
    color: var(--app-sky-700);
}

.app-card,
.table-card,
.filter-panel {
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius);
    background: #fff;
    box-shadow: var(--app-shadow);
}

.app-card,
.filter-panel {
    padding: 1.5rem;
}

.table-card {
    overflow: hidden;
}

.card-heading {
    border-bottom: 1px solid var(--app-slate-200);
    padding: 1.25rem 1.5rem;
}

.stat-card {
    height: 100%;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius);
    background: #fff;
    padding: 1.25rem;
    box-shadow: var(--app-shadow);
}

.stat-label {
    margin: 0;
    color: var(--app-slate-500);
    font-size: 0.875rem;
}

.stat-value {
    margin: 0.5rem 0 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.app-table {
    margin-bottom: 0;
    color: var(--app-slate-950);
    font-size: 0.875rem;
}

.app-table > :not(caption) > * > * {
    border-bottom-color: var(--app-slate-100);
    padding: 1rem 1.25rem;
    vertical-align: middle;
}

.app-table > thead > tr > th {
    border-bottom-color: var(--app-slate-200);
    background: var(--app-slate-50);
    color: var(--app-slate-500);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

.app-table.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: var(--app-slate-50);
}

.empty-state {
    padding-block: 3rem !important;
    color: var(--app-slate-500) !important;
    text-align: center;
}

.app-per-page-select {
    width: 9rem;
}

.app-min-product {
    min-width: 12rem;
}

.table-pagination {
    border-top: 1px solid var(--app-slate-200);
    padding: 1rem 1.25rem;
}

.pagination {
    --bs-pagination-color: var(--app-slate-700);
    --bs-pagination-hover-color: var(--app-sky-700);
    --bs-pagination-active-bg: var(--app-slate-950);
    --bs-pagination-active-border-color: var(--app-slate-950);
    --bs-pagination-border-color: var(--app-slate-200);
    --bs-pagination-border-radius: 0.625rem;
    margin-bottom: 0;
}

.pagination .page-link {
    font-size: 0.875rem;
    font-weight: 600;
}

.form-label,
.field-label {
    margin-bottom: 0.5rem;
    color: var(--app-slate-700);
    font-size: 0.875rem;
    font-weight: 600;
}

.form-control,
.form-select {
    min-height: 3rem;
    border-color: var(--app-slate-300);
    border-radius: var(--app-radius-sm);
    padding: 0.6875rem 1rem;
}

textarea.form-control {
    min-height: auto;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--app-sky-500);
    box-shadow: 0 0 0 0.25rem rgb(14 165 233 / 0.1);
}

.form-check-input:checked {
    border-color: var(--app-sky-600);
    background-color: var(--app-sky-600);
}

.form-text {
    margin-top: 0.375rem;
    color: var(--app-slate-500);
    font-size: 0.75rem;
}

.btn {
    border-radius: var(--app-radius-sm);
    padding: 0.6875rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.btn-sm {
    padding: 0.5rem 1rem;
}

.btn-dark {
    --bs-btn-bg: var(--app-slate-950);
    --bs-btn-border-color: var(--app-slate-950);
    --bs-btn-hover-bg: var(--app-slate-800);
    --bs-btn-hover-border-color: var(--app-slate-800);
}

.btn-primary {
    --bs-btn-bg: var(--app-sky-700);
    --bs-btn-border-color: var(--app-sky-700);
    --bs-btn-hover-bg: var(--app-sky-900);
    --bs-btn-hover-border-color: var(--app-sky-900);
}

.btn-sky {
    --bs-btn-color: var(--app-slate-950);
    --bs-btn-bg: var(--app-sky-400);
    --bs-btn-border-color: var(--app-sky-400);
    --bs-btn-hover-color: var(--app-slate-950);
    --bs-btn-hover-bg: var(--app-sky-300);
    --bs-btn-hover-border-color: var(--app-sky-300);
}

.btn-danger-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-red-800);
    --bs-btn-border-color: var(--app-red-800);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-red-900);
    --bs-btn-hover-border-color: var(--app-red-900);
}

.btn-warning-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--app-amber-900);
    --bs-btn-border-color: var(--app-amber-900);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-amber-950);
    --bs-btn-hover-border-color: var(--app-amber-950);
}

.status-badge {
    border-radius: 9999px;
    background: var(--app-slate-100);
    color: var(--app-slate-700);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-badge--success {
    background: #d1fae5;
    color: var(--app-emerald-800);
}

.status-badge--warning {
    background: #fef3c7;
    color: var(--app-amber-800);
}

.status-badge--info {
    background: var(--app-sky-100);
    color: var(--app-sky-900);
}

.notice-success,
.notice-danger,
.notice-warning,
.notice-dark-success,
.notice-dark-danger {
    border: 1px solid;
    border-radius: var(--app-radius-sm);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
}

.notice-success {
    border-color: var(--app-emerald-200);
    background: var(--app-emerald-50);
    color: var(--app-emerald-900);
}

.notice-danger {
    border-color: var(--app-red-200);
    background: var(--app-red-50);
    color: var(--app-red-900);
}

.notice-warning {
    border-color: var(--app-amber-200);
    background: var(--app-amber-50);
    color: var(--app-amber-950);
}

.notice-dark-success {
    border-color: rgb(52 211 153 / 0.3);
    background: rgb(52 211 153 / 0.1);
    color: #a7f3d0;
}

.notice-dark-danger {
    border-color: rgb(248 113 113 / 0.3);
    background: rgb(248 113 113 / 0.1);
    color: #fecaca;
}

.warning-panel,
.danger-panel {
    border: 1px solid;
    border-radius: var(--app-radius);
    padding: 1.5rem;
}

.warning-panel {
    border-color: var(--app-amber-200);
    background: var(--app-amber-50);
    color: var(--app-amber-950);
}

.danger-panel {
    border-color: var(--app-red-200);
    background: var(--app-red-50);
    color: var(--app-red-950);
}

.warning-panel .form-control,
.warning-panel .form-select {
    border-color: var(--app-amber-300);
}

.danger-panel .form-control,
.danger-panel .form-select {
    border-color: var(--app-red-300);
}

.definition-grid dt {
    color: var(--app-slate-500);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.definition-grid dd {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}

.summary-box {
    border-radius: var(--app-radius-sm);
    background: var(--app-slate-50);
    padding: 1rem;
    font-size: 0.875rem;
}

.list-panel > * + * {
    border-top: 1px solid var(--app-slate-100);
}

.list-panel-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: inherit;
    font-size: 0.875rem;
}

.list-panel-link:hover {
    background: var(--app-slate-50);
}

.product-list-image,
.product-list-placeholder {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    border-radius: 0.5rem;
}

.product-list-image {
    object-fit: cover;
}

.product-list-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-slate-100);
    color: var(--app-slate-500);
    font-weight: 700;
}

.product-detail-image {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius-sm);
    background: var(--app-slate-50);
}

.product-detail-image img {
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    object-fit: contain;
}

.generation-panel-column {
    width: 100%;
}

.logo-preview {
    display: flex;
    min-height: 7rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius-sm);
    background: var(--app-slate-50);
    padding: 1.25rem;
}

.logo-preview img {
    max-width: 100%;
    max-height: 5rem;
    object-fit: contain;
}

.admin-body {
    min-height: 100vh;
    background: var(--app-slate-100);
}

.admin-shell {
    min-height: 100vh;
}

.admin-sidebar {
    background: var(--app-slate-950);
    color: #fff;
    padding: 1.5rem;
}

.admin-brand-row,
.admin-brand,
.admin-header,
.site-header,
.site-brand,
.site-actions {
    display: flex;
    align-items: center;
}

.admin-brand-row {
    justify-content: space-between;
    gap: 1rem;
}

.admin-brand {
    min-width: 0;
    gap: 0.75rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.admin-brand:hover,
.admin-brand:focus-visible {
    color: #fff;
}

.admin-brand-logo {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem;
}

.admin-brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.admin-brand-logo--large {
    width: 2.75rem;
    height: 2.75rem;
}

.admin-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.online-badge {
    border-radius: 9999px;
    background: rgb(52 211 153 / 0.15);
    color: var(--app-emerald-300);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-nav {
    margin-top: 2rem;
}

.admin-nav-label {
    margin: 1.75rem 0 0;
    padding-inline: 1rem;
    color: var(--app-slate-500);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
    border-radius: var(--app-radius-sm);
    padding: 0.75rem 1rem;
    color: var(--app-slate-300);
    font-size: 0.875rem;
    font-weight: 500;
}

.admin-nav-label + .admin-nav-link,
.admin-nav > .admin-nav-link:first-child {
    margin-top: 0.5rem;
}

.admin-nav-link:hover,
.admin-nav-link:focus-visible {
    background: rgb(255 255 255 / 0.05);
    color: #fff;
}

.admin-nav-link.active {
    background: rgb(255 255 255 / 0.1);
    color: #fff;
}

.admin-main-column {
    min-width: 0;
    background:
        radial-gradient(circle at 0 12%, rgb(254 240 138 / 0.24), transparent 27rem),
        linear-gradient(90deg, #fffdf5 0%, #fbfff4 100%);
}

.admin-header {
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1px solid var(--app-slate-200);
    background: #fff;
    padding: 1rem 1.5rem;
}

.admin-content {
    padding: 1.5rem;
}

.datatable-filter-grid {
    display: grid;
    gap: 1rem;
}

.datatable-filter-grid--products {
    grid-template-columns: minmax(0, 1fr);
}

.datatable-filter-grid--printable,
.datatable-filter-grid--verifications {
    grid-template-columns: minmax(0, 1fr);
}

.datatable-filter-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.datatable-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--app-slate-200);
    padding-top: 1rem;
}

.datatable-filter-actions--left {
    justify-content: flex-start;
}

.datatable-filter-actions .btn-primary {
    min-width: 8.5rem;
}

.record-count {
    flex: 0 0 auto;
    color: var(--app-slate-700) !important;
    font-size: 0.875rem;
    font-weight: 600;
}

.datatable-card {
    padding-top: 0.25rem;
}

.datatable-card .dt-container {
    width: 100%;
}

.datatable-card .dt-layout-table {
    overflow-x: auto;
}

.datatable-card .dt-layout-table > .dt-layout-cell {
    min-width: 100%;
}

.datatable-card .table {
    margin-bottom: 0;
}

.datatable-card .page-link {
    color: var(--app-slate-700);
}

.datatable-card .active > .page-link {
    border-color: var(--app-slate-950);
    background: var(--app-slate-950);
    color: #fff;
}

.datatable-card table.dataTable > tbody > tr.child ul.dtr-details {
    width: min(100%, 34rem);
}

.datatable-card table.dataTable > tbody > tr.child span.dtr-title {
    min-width: 8rem;
}

.signed-in-label {
    margin: 0;
    color: var(--app-slate-500);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.signed-in-name {
    margin: 0;
    font-weight: 600;
}

.guest-body {
    min-height: 100vh;
    background: var(--app-slate-100);
}

.guest-shell {
    min-height: 100vh;
}

.guest-visual {
    display: none;
    background: var(--app-slate-950);
    color: #fff;
    padding: 3rem;
}

.guest-copy {
    max-width: 32rem;
}

.guest-copy h2 {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

.guest-form-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.guest-form-wrap {
    width: 100%;
    max-width: 28rem;
}

.site-body {
    min-height: 100vh;
    background: var(--app-slate-950);
    color: #fff;
}

.site-shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
}

.site-glow {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 24rem;
    background: radial-gradient(circle at top right, rgb(56 189 248 / 0.22), transparent 52%);
}

.site-header {
    width: min(100% - 3rem, 80rem);
    margin-inline: auto;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.5rem;
}

.site-brand {
    min-width: 0;
    gap: 0.75rem;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.site-brand:hover,
.site-brand:focus-visible {
    color: #fff;
}

.site-brand img {
    width: auto;
    max-width: 10rem;
    height: 2.5rem;
    object-fit: contain;
}

.site-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-actions {
    flex: 0 0 auto;
    gap: 0.75rem;
}

.site-action-primary,
.site-action-secondary {
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.site-action-primary {
    background: var(--app-sky-400);
    color: var(--app-slate-950);
    font-weight: 600;
}

.site-action-primary:hover {
    background: var(--app-sky-300);
    color: var(--app-slate-950);
}

.site-action-secondary {
    border: 1px solid rgb(255 255 255 / 0.15);
    color: var(--app-slate-200);
    font-weight: 500;
}

.site-action-secondary:hover {
    border-color: rgb(56 189 248 / 0.6);
    color: #fff;
}

.hero-section {
    width: min(100% - 3rem, 80rem);
    margin-inline: auto;
    padding-block: 5rem;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.hero-kicker {
    display: inline-flex;
    border: 1px solid rgb(56 189 248 / 0.2);
    border-radius: 9999px;
    background: rgb(56 189 248 / 0.1);
    color: var(--app-sky-300);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.hero-title {
    max-width: 48rem;
    margin: 0;
    font-size: clamp(3rem, 7vw, 4.5rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
    text-wrap: balance;
}

.hero-description {
    max-width: 42rem;
    margin: 1.5rem 0 0;
    color: var(--app-slate-300);
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.glass-card {
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.5rem;
    background: rgb(255 255 255 / 0.05);
    padding: 1.75rem;
    backdrop-filter: blur(12px);
}

.glass-card h2 {
    margin: 0.75rem 0 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.glass-card p:last-child {
    margin: 0.5rem 0 0;
    color: var(--app-slate-400);
    line-height: 1.75rem;
}

.frontend-violet {
    color: #c4b5fd !important;
}

.verification-wrap {
    width: min(100% - 3rem, 48rem);
    margin-inline: auto;
    padding-block: 4rem;
}

.verification-wrap--form {
    max-width: 42rem;
    padding-block: 5rem;
}

.verification-card {
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 1.5rem;
    background: rgb(255 255 255 / 0.05);
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    backdrop-filter: blur(12px);
}

.verification-card--success {
    border-color: rgb(52 211 153 / 0.3);
    background: rgb(52 211 153 / 0.1);
    color: #6ee7b7;
}

.verification-card--info {
    border-color: rgb(56 189 248 / 0.3);
    background: rgb(56 189 248 / 0.1);
    color: var(--app-sky-300);
}

.verification-card--warning {
    border-color: rgb(251 191 36 / 0.3);
    background: rgb(251 191 36 / 0.1);
    color: #fcd34d;
}

.verification-card--danger {
    border-color: rgb(248 113 113 / 0.3);
    background: rgb(248 113 113 / 0.1);
    color: #fca5a5;
}

.verification-eyebrow {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.verification-title {
    margin: 0.75rem 0 0;
    color: #fff;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.verification-message {
    margin: 1rem 0 0;
    color: var(--app-slate-200);
    line-height: 1.75rem;
}

.dark-form-control {
    border-color: rgb(255 255 255 / 0.15);
    background: var(--app-slate-900);
    color: #fff;
}

.dark-form-control:focus {
    border-color: var(--app-sky-400);
    background: var(--app-slate-900);
    color: #fff;
    box-shadow: 0 0 0 0.25rem rgb(56 189 248 / 0.1);
}

.dark-form-control::placeholder {
    color: var(--app-slate-500);
}

select.dark-form-control {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.verification-details {
    margin-top: 2rem;
    border-top: 1px solid rgb(255 255 255 / 0.1);
    padding-top: 2rem;
}

.verification-details dt {
    color: var(--app-slate-400);
    font-size: 0.875rem;
}

.verification-details dd {
    margin: 0.25rem 0 0;
    color: #fff;
    font-weight: 600;
}

.activity-assessment {
    margin-top: 2rem;
    border-radius: var(--app-radius);
    background: rgb(2 6 23 / 0.4);
    padding: 1.25rem;
    color: var(--app-slate-200);
}

.report-panel {
    margin-top: 2rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: var(--app-radius);
    background: rgb(255 255 255 / 0.05);
    padding: 1.5rem;
}

.report-panel summary {
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}

div.dt-container .dt-layout-row:not(.dt-layout-table) {
    margin: 0;
    padding: 1rem 1.5rem;
}

div.dt-container .dt-layout-row.dt-layout-table {
    margin: 0;
}

div.dt-container .dt-info,
div.dt-container .dt-length label {
    color: var(--app-slate-600);
    font-size: 0.875rem;
}

div.dt-container .dt-processing {
    border: 1px solid var(--app-slate-200);
    border-radius: 0.75rem;
    background: rgb(255 255 255 / 0.96);
    box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 0.12);
    color: var(--app-slate-700);
}

@media (min-width: 64rem) {
    .admin-shell {
        display: grid;
        grid-template-columns: 17rem minmax(0, 1fr);
    }

    .admin-sidebar {
        min-height: 100vh;
    }

    .admin-brand-row {
        display: block;
    }

    .admin-brand-row .online-badge {
        display: inline-block;
        margin-top: 1rem;
    }

    .admin-header,
    .admin-content {
        padding-inline: 2.5rem;
    }

    .admin-content {
        padding-block: 2.5rem;
    }

    .datatable-filter-grid--products {
        grid-template-columns: minmax(20rem, 1fr) minmax(12rem, 15rem) auto;
    }

    .datatable-filter-grid--printable,
    .datatable-filter-grid--verifications {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .guest-shell {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .guest-visual {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .hero-section {
        padding-block: 8rem;
    }
}

@media (min-width: 80rem) {
    .generation-panel-column {
        width: 22rem;
    }
}

@media (max-width: 47.999rem) {
    .site-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-actions {
        width: 100%;
    }

    .site-action-primary,
    .site-action-secondary {
        flex: 1 1 0;
        text-align: center;
    }

    .app-card,
    .filter-panel,
    .verification-card {
        padding: 1.25rem;
    }

    .app-table > :not(caption) > * > * {
        padding: 0.875rem 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    .guest-body {
        background: var(--app-slate-950);
        color: #fff;
    }

    .guest-form-column .form-control {
        border-color: var(--app-slate-700);
        background: var(--app-slate-900);
        color: #fff;
    }

    .guest-form-column .form-label,
    .guest-form-column .form-check-label {
        color: var(--app-slate-300);
    }

    .guest-form-column .text-secondary {
        color: var(--app-slate-400) !important;
    }

    .guest-form-column .link-accent,
    .guest-form-column .text-brand {
        color: var(--app-sky-300) !important;
    }
}

/* Plain-PHP templates reuse the existing visual system with descriptive aliases. */
.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.page-heading h1 {
    margin: 0.5rem 0 0;
    font-size: clamp(1.75rem, 4vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -0.025em;
}

.page-heading p:last-child {
    margin: 0.5rem 0 0;
    color: var(--app-slate-600);
}

.panel-card {
    overflow: hidden;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius);
    background: #fff;
    box-shadow: var(--app-shadow);
}

.panel-card-header {
    border-bottom: 1px solid var(--app-slate-200);
    padding: 1.25rem 1.5rem;
}

.panel-card-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.panel-card .table > :not(caption) > * > * {
    border-bottom-color: var(--app-slate-100);
    padding: 1rem 1.25rem;
    vertical-align: middle;
}

.panel-card .table thead th {
    background: var(--app-slate-50);
    color: var(--app-slate-500);
    font-size: 0.75rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.metric-card {
    height: 100%;
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius);
    background: #fff;
    padding: 1.25rem;
    box-shadow: var(--app-shadow);
}

.metric-card p {
    margin: 0;
    color: var(--app-slate-500);
    font-size: 0.875rem;
}

.metric-card strong {
    display: block;
    margin-top: 0.5rem;
    font-size: 1.5rem;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-bottom: 1px solid var(--app-slate-200);
    padding: 1.25rem;
}

.filter-bar .form-control {
    min-width: min(100%, 18rem);
    flex: 1 1 18rem;
}

.filter-bar .form-select {
    max-width: 14rem;
}

.status-pill {
    display: inline-flex;
    border-radius: 9999px;
    background: var(--app-slate-100);
    color: var(--app-slate-700);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-active,
.status-ready,
.status-downloaded,
.status-completed,
.status-reviewed {
    background: #d1fae5;
    color: var(--app-emerald-800);
}

.status-pending,
.status-queued,
.status-processing,
.status-escalated {
    background: #fef3c7;
    color: var(--app-amber-800);
}

.status-blocked,
.status-voided,
.status-recalled,
.status-failed,
.status-dismissed {
    background: var(--app-red-50);
    color: var(--app-red-800);
}

.admin-guest-body {
    min-height: 100vh;
    background: var(--app-slate-100);
}

.admin-guest-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 1.5rem;
}

.admin-login-card {
    width: min(100%, 28rem);
    border: 1px solid var(--app-slate-200);
    border-radius: var(--app-radius);
    background: #fff;
    padding: 2rem;
    box-shadow: var(--app-shadow);
}

@media (max-width: 48rem) {
    .page-heading {
        flex-direction: column;
    }
}

 /*New Style start FOR Frontend*/
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --bg: #fffdf5;
      --card: rgba(243,205,151,0.3);
      --border: rgba(59,42,26,0.15);
      --text: #4a3722;
      --muted: #8a7458;
      --primary: #F3CD97;
      --secondary: #FEF2A0;
      --success: #4d9a52;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: Inter, Arial, sans-serif;
      color: var(--text) !important;
      overflow-x: hidden;
      background:
        radial-gradient(
            ellipse at 0% 100%,
            rgba(224, 187, 91, 0.16) 0%,
            rgba(224, 187, 91, 0.06) 25%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(224, 187, 91, 0.16) 0%,
            rgba(224, 187, 91, 0.06) 25%,
            transparent 50%
        ),
        #fff !important;
    }
    .site-glow{
        background: none !important;
    }
    .verification-wrap{
        width: 100%;
        max-width: 100%;
    }
    .verification-title{
        color: #1a1a1a;
    }
    .site-brand img{
        width: 100%;
        height: auto;
        max-width: 15rem;
    }
    /* =========================
       HEADER MENU
    ========================== */
    .header{
        width: 100%;
        background: #fefefe;
        box-shadow: 0px 0px 10px 0px rgba(242,143,0,0.3);
        transition: background 0.35s ease, box-shadow 0.35s ease;
    }
    .header.scroll{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        background: rgba(255,255,255,1);
        box-shadow: 0px 0px 10px 0px rgba(226,143,0,0.2);
        z-index: 9999;
    }
    .site-actions nav.main-menu{position: relative;}
    .site-actions nav ul.header-menu{
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
    }
    .site-actions nav ul.header-menu li{
      margin: 0 10px;
      position: relative;
    }
    .site-actions nav ul.header-menu li a{
      font-size: 16px;
      font-weight: 600;
      color: #271700;
      border-bottom: 1px solid transparent;
      padding: 0 0 2px;
    }
     .site-actions nav ul.header-menu li a.site-action-primary{
        color: #fff;
     }
    .site-actions nav ul.header-menu li a:hover{
      color: #ad6600;
      border-color: #ad6600;
    }
    .site-actions nav ul.header-menu li a.dropmenu{

    }
    .site-actions nav ul.header-menu ul.submenu{
      display: none;
      width: 300px;
      gap: 14px;
      position: absolute;
      list-style: none;
      flex-direction: column;
      background: #fff;
      padding: 20px;
      left: 0;
      top: 40px;
      border-radius: 10px;
      z-index: 9;
      box-shadow: 2px 3px 10px 0px rgb(200,121,7,0.1)
    }
    .site-actions nav ul.header-menu ul.submenu.show{
      display: flex;
    }
    .header-menu li.open .dropmenu svg {
      transform: rotate(180deg);
      transition: transform 0.2s ease;
    }
    .hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1100;
        position: absolute;
        right: 27px;
        top: 15px;
      }
      .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: #271700;
        border-radius: 2px;
        transition: transform 0.35s ease, opacity 0.25s ease;
      }

      /* Morph into an X when open */

      .hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }

      .hamburger.active span:nth-child(2) {
        opacity: 0;
      }

      .hamburger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* Dark overlay behind the drawer */

      .mobile-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: 1000;
      }

      .mobile-overlay.active {
        display: block;
        opacity: 1;
      }

    /* =========================
       ANIMATED BACKGROUND
    ========================== */

    body::before {
      content: "";
      position: fixed;
      width: 500px;
      height: 500px;
      background: #fdf2e2;
      filter: blur(160px);
      opacity: 0.35;
      top: -150px;
      left: -150px;
      z-index: -2;
      animation: floatGlow 8s ease-in-out infinite alternate;
    }

    body::after {
      content: "";
      position: fixed;
      width: 450px;
      height: 450px;
      background: #fcf5c9;
      filter: blur(160px);
      opacity: 0.4;
      right: -150px;
      bottom: -100px;
      z-index: -2;
      animation: floatGlow 10s ease-in-out infinite alternate-reverse;
    }

    @keyframes floatGlow {
      from {
        transform: translate(0, 0) scale(1);
      }
      to {
        transform: translate(80px, 50px) scale(1.2);
      }
    }
    /* =========================
       HERO / BANNER
    ========================== */
    .hero {
      position: relative;
      padding: 40px 0 20px;
    }
    .tredmark{
        color: #2d2200;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin: 30px 0;
        border-bottom: 2px solid #b09100;
        padding-bottom: 30px;
        font-weight: 600;
        font-size: 20px;
        text-align: center;
    }
    .banner-list{
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        list-style: none;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }
    .banner-list li{
        width: 25%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        font-weight: 600;
        text-align: center;
        color: #000;
        border-right: 1px solid #dedddd;
        padding: 0 10px;
        font-size: 14px;
        line-height: normal;
    }
    .banner-list li:last-child{
        border-right: none;
    }
    .banner-list li img{width: 70%; margin: auto;}
    .alter{font-size: 14px;}
    .verification-wrap--form{
        padding-block: 1rem;
    }
    .input-width{
        width: 60%;
    }
    .hero-content {
      /* entrance now handled by GSAP */
    }

    .badge {
      display: inline-block;
      padding: 8px 15px;
      border-radius: 30px;
      background: rgba(217,164,65,0.18);
      border: 1px solid rgba(217,164,65,0.4);
      color: #8a5e1f;
      font-size: 16px;
      margin-bottom: 20px;
    }

    .hero h1 {
      font-size: clamp(22px, 4vw, 68px);
      line-height: normal;
      font-weight: 700;
    }
    .hero h2 {
      font-size: clamp(32px, 6vw, 72px);
      font-weight: 700;
      margin: 1.5rem 0;
    }

    .gradient-text {
      background: linear-gradient(
        90deg,
        #8a5e1f,
        #D9A441,
        #E3A857,
        #8a5e1f
      );
      background-size: 300%;
      -webkit-background-clip: text;
      color: transparent;
      animation: gradientMove 5s linear infinite;
      display: block;
    }

    @keyframes gradientMove {
      0% {
        background-position: 0%;
      }
      100% {
        background-position: 300%;
      }
    }

    .hero p {
      color: #3a3b3f;
      margin: 20px 0;
      font-size: 17px;
    }
    .hero p.long{
        font-size: clamp(16px, 2vw, 26px);
        font-weight: 500;
        max-width: 550px;
    }
    .hero-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btns {
      border: none;
      padding: 14px 23px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 700;
      transition: 0.3s;
      font-size: 0.875rem;
    }

    .btn-primary1 {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: #4a3722;
      box-shadow: 0 10px 30px rgba(217,164,65,0.35);
    }

    .btn-primary1:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(217,164,65,0.5);
    }

    .btn-outline {
      color: var(--text);
      background: rgba(59,42,26,0.04);
      border: 1px solid var(--border);
    }

    .btn-outline:hover {
      background: rgba(59,42,26,0.08);
    }
    .btn-dark{
      background: linear-gradient(135deg, #271700, #000000);
      color: #ffffff;
      box-shadow: 0 10px 30px rgba(217,164,65,0.35);
    }
    .btn-dark:hover{
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(217,164,65,0.5);
    }
    .verification-wrap .btn-dark{
        background: linear-gradient(180deg, #f2d379, #e1b54a);
        color: #000;
        box-shadow: 0 10px 30px rgba(217, 164, 65, 0.35);
        border-radius: 8px;
        width: 39%;
    }
    .verification-wrap .btn-dark:hover{
        transform: translateX(1px);
    }
    /* =========================
       HERO GRAPHIC
    ========================== */

    .hero-graphic {
      position: relative;
      display: grid;
      place-items: center;
    }
    .tagline{
        position: relative;
        text-align: center;
        margin: 40px 0;
    }
    .tagline .container{
        overflow: hidden;
    }
    .tagline h5{
        position: relative;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #624324;
        display: inline-block;
        margin: 0;
    }
    .tagline h5:before{
        position: absolute;
        content: "";
        width: 100%;
        height: 2px;
        background-color: #624324;
        left: -104%;
        top: 50%;
        transform: translateY(-50%);
    }
    .tagline h5:after{
        position: absolute;
        content: "";
        width: 100%;
        height: 2px;
        background-color: #624324;
        right: -104%;
        top: 50%;
        transform: translateY(-50%);
    }
    .tagline p{
        color: #1a1a1a;
        margin: 8px 0 0;
    }
    /* =========================
       PRODUCTS
    ========================== */

    .products-section {
      max-width: 1300px;
      margin: auto;
      padding: 20px 15px;
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
      margin-bottom: 35px;
    }

    .section-head h2 {
      font-size: 38px;
      font-weight: 600;
    }

    .section-head p {
      color: var(--muted);
      margin-top: 7px;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      perspective: 1200px;
    }

    .product-card {
      border: 1px solid rgba(255,183,0,0.5);
      background: rgba(255,255,237,0.8);
      border-radius: 15px;
      overflow: hidden;
      transition: border-color 0.4s, box-shadow 0.4s;
      transform-style: preserve-3d;
      will-change: transform;
    }

    .product-card:hover {
      background: rgba(255,255,255,0.9);
      box-shadow: 0 25px 60px rgba(74,55,34,0.15);
      border: 1px solid rgba(217,164,65,0.8);
    }

    .product-image {
      height: auto;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at center,
        rgba(217,164,65,0.28),
        transparent 65%);
      padding: 50px 0;
    }

    .product-image::after {
      content: "";
      position: absolute;
      width: 140px;
      height: 140px;
      border-radius: 50%;
      border: 1px solid rgba(59,42,26,0.15);
      animation: pulse 3s ease-in-out infinite;
    }

    @keyframes pulse {
      0%,100% {
        transform: scale(0.8);
        opacity: 0.3;
      }
      50% {
        transform: scale(1.3);
        opacity: 0.8;
      }
    }

    .product-icon {
      position: relative;
      z-index: 2;
      filter: drop-shadow(0 15px 20px rgba(0,0,0,0.3));
      will-change: transform;
      cursor: pointer;
    }
    .product-icon img{
        height: 220px;
        transform: scale(1.15);
    }
    .product-info {
      padding: 20px;
    }

    .category {
      color: var(--secondary);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .product-info h3 {
      margin: 0 0 15px;
      font-size: 20px;
      font-weight: 600;
      min-height: 50px;
    }

    .product-bottom {
        position: relative;
        margin-top: 18px;
        display: flex;
        gap: 10px;
    }

    .report-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 47%;
      border: 1px solid rgba(217,164,65,0.9);
      background: rgba(217,164,65,0.15);
      color: var(--text);
      text-decoration: none;
      padding: 10px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 15px;
      transition: 0.3s;
    }
    select.report-btn{
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 16px;
    }
    .report-btn:hover {
      background-color: var(--secondary);
      border-color: var(--secondary);
      color: #4a3722;
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(217,164,65,0.45);
    }
    
    .product-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 99999;
      align-items: center;
      justify-content: center;
    }

    .product-modal-overlay.active {
      display: flex;
      opacity: 1;
    }

    .product-modal {
      background: #FFF9D8;
      border-radius: 16px;
      padding: 30px;
      max-width: 450px;
      width: 90%;
      text-align: center;
      position: relative;
      transform: scale(0.9) translateY(20px);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .product-modal-overlay.active .product-modal {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    .modal-close {
      position: absolute;
      top: 12px;
      right: 14px;
      background: none;
      border: none;
      font-size: 22px;
      cursor: pointer;
      color: #4a3722;
    }

    .modal-img {
      max-width: 250px;
      margin: 0 auto 20px;
      display: block;
    }

    .modal-name {
      margin-bottom: 8px;
    }

    /* =========================
       FEATURES
    ========================== */

    .features {
      max-width: 1300px;
      margin: auto;
      padding: 20px 15px 30px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
      perspective: 1200px;
    }

    .feature {
      position: relative;
      padding: 20px 15px;
      border: 1px solid #ecebe7;
      border-radius: 16px;
      background: #faf9f7;
      overflow: hidden;
      transform-style: preserve-3d;
      will-change: transform;
      transition: border-color 0.4s, box-shadow 0.4s;
    }

    .feature:hover {
      border-color: rgba(217,164,65,0.6);
      box-shadow: 0 25px 60px rgba(74,55,34,0.15);
    }

    /* Cursor-tracking spotlight glow */

    .feature::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(217,164,65,0.3),
        transparent 55%
      );
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }

    .feature:hover::before {
      opacity: 1;
    }

    .feature > * {
      position: relative;
      z-index: 1;
    }

    .feature-icon-wrap {
      width: 65px;
      display: grid;
      place-items: center;
      margin-bottom: 20px;
      will-change: transform;
    }

    .feature-icon {
    }

    .feature h3 {
      margin-bottom: 10px;
      font-weight: 600;
      color: #060503;
    }

    .feature p {
      color: #444645;
      line-height: 1.6;
      font-size: 16px;
    }
    .feature a{
        color: #a0701b;
        display: inline-block;
        border-bottom: 1px solid #8f6f32;
        font-weight: 600;
    }
    .light-form-control{
        border-color: #cac5b9;
        background: #fff;
        color: #707c91;
        border-radius: 5px;
        font-size: 14px;
    }
    .light-form-control:focus {
        border-color: #989dab;
        background: #f7fbff;
        color: #000;
    }
    .input-width .light-form-control{
        background: #fff url('https://verifykama.com/images/verify.svg');
        padding: 10px 8px 10px 35px;
        background-size: 13px;
        background-repeat: no-repeat;
        background-position: 10px 48%;
    }
    .input-width .light-form-control:focus {
        background: #f7fbff url('https://verifykama.com/images/verify.svg');
        padding: 10px 8px 10px 35px;
        background-size: 13px;
        background-repeat: no-repeat;
        background-position: 10px 48%;
        color: #000;
    }

    .light-form-control::placeholder {
        color: #303030;
    }

    select.light-form-control {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23525c6c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
    /* =========================
       FOOTER
    ========================== */

    footer {
      border-top: 1px solid var(--border);
      padding: 20px 15px;
      color: #000000;
      font-size: 13px;
      background-color: #e6b505;
    }

    .footer-inner {
      max-width: 1300px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    footer span {
      color: var(--text);
    }

    img, svg{max-width: 100%;}

    /* =========================
       RESULT PAGE
    ========================== */

    .product-gallery{
        margin-top: 0 !important;
        padding-block: 10px !important ;
    }
    .hero .verification-card{
        background: none !important;
        color: #1a1a1a !important;
        box-shadow: none;
        border: none;
        padding: 0 0 0 30px;
        border-left: 1px solid #dedddd;
        border-radius: 0px;
    }
    .verification-eyebrow{
        color: #1c9c01;
        letter-spacing: 1px;
        display: flex;
        gap: 8px;
        margin: 0 0 20px;
    }
    .verification-card .top-area{
        background-color: #fbfff2;
        border:1px solid #ffeeaf;
        padding: 20px;
        border-radius: 20px;
    }
    .verification-card .bottom-area{
        margin-top: 30px;
        background-color: #fff;
        border: 1px solid #e7ebf3;
        padding: 20px;
        border-radius: 20px;
    }
    .verification-title{
        color: #071d3c;
        margin: 0;
    }
    .verification-message{
        color: #5e6078;
        margin: 7px 0 0;
    }
    .product-gallery__title{
        color: var(--app-slate-400) !important;
    }
    .verification-details dt{
/*        color: #a16801 !important;*/
    }
    .verification-details dd{
        color: #000 !important;
    }
    .verification-details{
        margin-top: 0px !important;
        margin-left: 0px;
        margin-right: 0px;
        padding-bottom: 2.2rem;
    }
    .details-set{
        display: flex;
        gap: 12px;
    }
    .details-set .icons{
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        background-color: #e7f0fd;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.0.01);
    }
    .details-set .icons.yellow{
        background-color: #fdf4e3;
    }
    .details-set .icons.purple{
        background-color: #efeefd;
    }
    .details-set .icons.green{
        background-color: #e4f5eb;
    }
    .details-set .icons.red{
        background-color: #fbebf3;
    }
    .activity-assessment{
        background: #fef5e5;
        padding: 1.5rem;
        color: #001237;
        border: 1px solid #fde8ca;
    }
    .report-panel summary {
        color: #ffffff;
        cursor: pointer;
        font-weight: 600;
        background: #001ac3;
        max-width: 400px;
        text-align: center;
        padding: 15px;
        border-radius: 15px;
        font-size: 16px;
        box-shadow: 0px 0px 10px 0px rgb(0,20,255,0.5);
        transition: 0.3s all ease-in-out;
    }
    .report-panel summary:hover {
        background: #070094;
        box-shadow: 0px 0px 15px 1px rgb(57,153,255,0.7);
        transform: translateX(1px);
    }
    .report-panel{
        padding: 0;
    }
    .report-form{
        background: #ffffff;
        padding: 40px 30px;
        border-radius: 10px;
        color: #001237;
        border: 1px solid #d7d7d7;
        margin: 40px 0 0;
        box-shadow: 0px 0px 10px rgba(0,77,167,0.1);
    }
    .report-form .fraud-icon{
        background-color: #e9f0f9;
        border-radius: 50%;
        width: 75px;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .report-form h3{
        color: #4a5778;
        font-weight: 600;
        margin: 0;
    }
    .report-form p{
        color: #95a2b5;
        margin: 0;
    }
    .report-form .form-label{
        color: #4b5d77;
    }
    .report-form .form-label i{
        font-weight: 400;
        color: #adb5c2;
        font-size: 14px;
    }
    .product-gallery__dialog::backdrop{
        background: rgba(28,18,0,0.88) !important;
        backdrop-filter: blur(4px) !important;
    }
    .product-gallery__dialog{
        background: #fffae1 !important;
        color: #001237 !important;
        margin: 20px auto 0;
    }
    .product-gallery__close, .product-gallery__previous, .product-gallery__next, .product-gallery__done{
        color: #001237 !important;
    }
    .product-gallery__thumbnail{
        border: 1px solid #e5e5ff !important;
        background: #f8fafe !important;
    }
    .product-gallery__thumbnails{
        background-color: #faf7f7;
        padding: 5px;
        border-radius: 15px;
    }
    .input-glow {
      animation: inputGlow 1s ease-in-out 5;
      transform: scale(1.01);
      transition: 0.5s ease-in-out;
    }

    @keyframes inputGlow {
      0%, 100% {
        box-shadow: 0 0 0 rgba(124, 92, 255, 0);
        border-color: var(--border, #ccc);
      }
      50% {
        box-shadow: 0 0 18px 4px rgba(124, 92, 255, 0.55);
        border-color: #7c5cff;
      }
    }


    /* ========================================
           Available Batches Section
        ======================================== */

        .batch-section {
          width: 100%;
          padding: 32px;
          background: #f8fcfa;
          border-radius: 18px;
          box-sizing: border-box;
        }

        .batch-header {
          margin-bottom: 20px;
        }

        .batch-header h2 {
          margin: 0 0 6px;
          color: #10251c;
          font-size: 24px;
          line-height: 1.3;
          font-weight: 700;
        }

        .batch-header p {
          margin: 0;
          color: #687b73;
          font-size: 14px;
          line-height: 1.6;
        }


        /* ========================================
           Table Container
        ======================================== */

        .batch-table-wrapper {
          width: 100%;
          overflow-x: auto;
          background: #ffffff;
          border: 1px solid #e4eee9;
          border-radius: 12px;
        }


        /* ========================================
           Table
        ======================================== */

        .batch-table {
          width: 100%;
          min-width: 750px;
          border-collapse: collapse;
        }

        .batch-table thead {
          background: #f3f8f6;
        }

        .batch-table th {
          padding: 15px 18px;
          text-align: left;
          color: #62766d;
          font-size: 12px;
          font-weight: 600;
          border-bottom: 1px solid #e4eee9;
        }

        .batch-table td {
          padding: 16px 18px;
          color: #52665d;
          font-size: 14px;
          border-bottom: 1px solid #edf2ef;
        }

        .batch-table tbody tr:last-child td {
          border-bottom: none;
        }

        .batch-table tbody tr {
          transition: background 0.2s ease;
        }

        .batch-table tbody tr:hover {
          background: #f9fcfa;
        }

        .batch-table td strong {
          color: #263d33;
          font-weight: 600;
        }


        /* Batch Dropdown */

        .batch-select {
          min-width: 145px;
          padding: 9px 34px 9px 12px;
          border: 1px solid #dce9e3;
          border-radius: 8px;
          background-color: #ffffff;
          color: #263d33;
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          outline: none;
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right 8px center;
          background-size: 16px;
          transition: border-color 0.2s ease;
        }

        .batch-select:hover {
          border-color: #15966c;
        }

        .batch-select:focus {
          border-color: #15966c;
          box-shadow: 0 0 0 3px rgba(21, 150, 108, 0.1);
        }


        /* PDF Link */

        .report-link {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          color: #13875f;
          font-size: 13px;
          font-weight: 600;
          text-decoration: none;
        }

        .report-link:hover {
          color: #0b6747;
        }

        .pdf-icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 27px;
          height: 30px;
          border-radius: 4px;
          background: #e93535;
          color: #ffffff;
          font-size: 8px;
          font-weight: 700;
        }

        .arrow {
          font-size: 16px;
          transition: transform 0.2s ease;
        }

        .report-link:hover .arrow {
          transform: translateX(2px);
        }


        /* ========================================
           Responsive
        ======================================== */

        @media (max-width: 768px) {

          .batch-section {
            padding: 20px;
            border-radius: 14px;
          }

          .batch-header h2 {
            font-size: 20px;
          }

          .batch-header p {
            font-size: 13px;
          }

          .batch-table th,
          .batch-table td {
            padding: 13px 14px;
          }
        }


    /* =========================
       RESPONSIVE
    ========================== */
    @media (max-width: 1300px) {
     .site-body{
/*        padding: 0 15px;*/
     }
    }

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

      .hero {
        text-align: center;
        padding: 30px 15px;
      }
      .hero .verification-card{
        padding: 0;
        border: none;
      }
      .hero p {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-buttons {
        justify-content: center;
      }
    .product-bottom{
        flex-direction: column;
      }
     select.report-btn{
        text-align: center;
     } 

    }

    @media (max-width: 767px) {
        .site-brand img{
            max-width: 200px;
        }

        .verification-wrap{
            padding-block:1rem;
        }
      .site-header{
        gap: 0;
      }

      .hero h1 {
        font-size: 25px;
      }

      .product-grid {
        grid-template-columns: 1fr;
      }

      .features {
        grid-template-columns: 1fr;
      }

      .section-head {
        display: block;
      }
      .hamburger {
        display: flex;
      }

      header > .header-menu {
        display: none;
      }
      /* Slide-in drawer */

      .main-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 88%;
        height: 0;
        max-width: 320px;
        background: #FFF9D8;
        box-shadow: -10px 0 30px rgba(0,0,0,0.15);
        transform: translateX(300%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1050;
        overflow-y: auto;
      }

      .site-actions nav.main-menu.active {
        transform: translateX(0);
        position: fixed;
        height: 100%;
        padding: 90px 15px 30px;
      }

      .mobile-menu .header-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .main-menu .header-menu > li {
        width: 100%;
        margin: 10px 0;
      }

      .main-menu .header-menu > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 4px;
        color: #271700;
        text-decoration: none;
        font-weight: 600;
      }

      .main-menu .dropmenu svg {
        transition: transform 0.3s ease;
      }

      .main-menu li.open > .dropmenu svg {
        transform: rotate(180deg);
      }

      /* Submenu as accordion */

      .site-actions nav ul.header-menu ul.submenu {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
        overflow: hidden;
        transition: max-height 0.35s ease;
        width: 100%;
        padding: 5px;
        position: relative;
        top: inherit;
      }

      .main-menu .submenu a {
        display: block;
        padding: 8px 4px;
        color: #5a4a30;
        text-decoration: none;
        font-size: 14px;
      }
      .site-action-primary{
        justify-content: center !important;
      }
      .site-actions nav ul.header-menu li a.site-action-primary {
        margin-top: 20px;
      }
      .banner-list li{font-size: 12px;}
      .verification-card form{flex-wrap: wrap;}
      .input-width, .verification-wrap .btn-dark{width: 100%}
      .hero .col-lg-4 .img-fluid{max-width: 125px;}
      .tredmark{margin: 20px 0;padding-bottom: 10px;font-size: 16px;}
      .verification-title{font-size: 20px;}
    }