body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    background: #eef2f5;
    color: #2e2e2e;
}

/* NAV BAR - Unchanged as requested */
nav {
    background: #ffffff;
    padding: 10px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nav-left {
    display: flex;
    align-items: center;
    position: absolute;
    left: 30px;
}

.nav-left img {
    height: 40px;
    margin-right: 10px;
}

.logo-link {
    text-decoration: none;
}

.logo-text {
    font-weight: 700;
    font-size: 20px;
    color: #4a90e2;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.nav-right {
    display: flex;
    gap: 12px;
    position: absolute;
    right: 30px;
    align-items: center;
}

.nav-right a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: color 0.2s;
    cursor: pointer;
}

.nav-right a:hover {
    color: #4a90e2;
}

.nav-right .active-link {
    color: #4a90e2;
}

.nav-right form {
    margin: 0;
}

.logout-button {
    padding: 8px 18px;
    border-radius: 999px;
    background: #f87171;
    font-size: 14px;
    border: none;
}

.logout-button:hover {
    background: #ef4444;
    box-shadow: 0 4px 10px rgba(248, 113, 113, 0.4);
}

.breadcrumbs-wrap {
    background: #ffffff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.breadcrumbs {
    margin: 0 auto;
    padding: 10px 0;
    font-size: 0.9rem;
    color: #64748b;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.breadcrumbs a {
    color: #4a90e2;
    text-decoration: none;
    font-weight: 600;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.crumb-current {
    color: #0f172a;
    font-weight: 600;
}

.crumb-sep {
    color: #c0c8d8;
}


/* MODERN UPDATED STYLES BELOW */

.container {
    padding: 5px 5px;
    max-width: 95%;
    margin: 1px auto 0 auto; /* 40px top margin */
    overflow-y: auto;
}


.similarity-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1px;
    margin-top: 1px;
    height: 100%; /* optional for height control */
}

/* .similarity-container .section {
    flex: 1;
} */


.section {
    display: none;
    background: #ffffff;
    padding: 30px 35px;
    border-radius: 18px;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.active {
    display: block;
}


form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

form label {
    font-weight: 600;
    font-size: 14px;
    color: #475569;
}

input[type="file"],
input[type="text"],
input[type="password"] {
    padding: 10px 12px;
    border: none;
    background: #f0f3f7;
    border-radius: 10px;
    font-size: 16px;
    transition: box-shadow 0.2s ease;
    box-shadow: inset 2px 2px 5px #d1d9e6, inset -2px -2px 5px #ffffff;
}

input[type="file"]:focus,
input[type="text"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px #4a90e2;
}

button {
    padding: 14px;
    border: none;
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3);
}

.primary-button {
    width: 100%;
    background: #4a90e2;
}

.primary-button:hover {
    background: #3b82f6;
}

#preview {
    text-align: center;
}

#preview img {
    max-width: 100%;
    border: 2px dashed #c3cfe2;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

#similarity-preview {
    margin-top: 20px;
    text-align: center;
}

/* LOGIN PAGE */
body.login-page {
    background: linear-gradient(120deg, #dbeafe, #eef2ff);
}

.login-page-wrapper {
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1);
}

.login-card h1 {
    margin: 0 0 6px;
    font-size: 28px;
}

.login-subtitle {
    margin: 0 0 24px;
    color: #64748b;
}

.login-error {
    background: #fee2e2;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: 14px;
}

#similarity-preview img {
    max-width: 100%;
    /* border: 2px dashed #c3cfe2; */
    /* padding: 10px; */
    /* border-radius: 10px; */
    background: #ffffff;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); */
}

#similarity-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px; /* Adjust this height based on your layout */
}

#recommend-button {
    display: none;
    padding: 14px 24px;
    background: linear-gradient(135deg, #4a90e2, #357ab8);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#recommend-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(74, 144, 226, 0.3);
}

/* @media (max-width: 768px) {
    #lookalikes div {
        flex-direction: column;
        align-items: center;
    }
} */


/* Home page */
.home-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 30px 80px;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.hero-panel {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.hero-panel h1 {
    margin: 0 0 12px 0;
    font-size: 36px;
    font-weight: 700;
    color: #1f2a44;
}

.hero-panel p {
    margin: 0;
    font-size: 18px;
    color: #4a5468;
}

.feature-group {
    margin: 20px 0;
    padding: 18px;
    border-radius: 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.feature-group__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.feature-group__header h2 {
    margin: 0 0 6px 0;
    font-size: 22px;
    color: #111827;
}

.feature-group__header p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    max-width: 520px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.feature-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.08),
        0 4px 10px rgba(15, 23, 42, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 18px 36px rgba(15, 23, 42, 0.12),
        0 6px 16px rgba(15, 23, 42, 0.08);
}

.feature-card__header {
    display: flex;
    justify-content: flex-start;
}

.feature-card__tag {
    display: inline-block;
    padding: 4px 10px;
    background: #eef4ff;
    color: #1d4ed8;
    font-weight: 600;
    font-size: 12px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.feature-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.feature-card p {
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    flex: 1;
}

.feature-card__cta {
    font-weight: 700;
    color: #1d4ed8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.feature-card__cta::after {
    content: '→';
    font-size: 14px;
}

.points-panel {
    background: #ffffff;
    border-radius: 22px;
    padding: 32px;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.08),
        0 4px 10px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.points-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
}

.points-panel__header h2 {
    margin: 0 0 8px 0;
    font-size: 26px;
    color: #111827;
}

.points-panel__header p {
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    max-width: 520px;
}

.points-ring-guideline {
    margin-top: 12px;
    max-width: 760px;
    padding: 12px 14px;
    border: 2px solid #f97316;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: #7c2d12;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.16);
}

.points-ring-guideline strong {
    display: inline-block;
    margin-right: 6px;
    color: #9a3412;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.points-ring-guideline__legend {
    display: block;
    margin-top: 4px;
}

.points-ring-guideline b {
    color: #111827;
    font-weight: 800;
}

.points-panel__filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
}

.points-panel__filters label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.points-panel__filters select {
    padding: 10px 12px;
    border: none;
    background: #f0f3f7;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: inset 2px 2px 5px #d1d9e6, inset -2px -2px 5px #ffffff;
}

.points-panel__filters input {
    padding: 10px 12px;
    border: none;
    background: #f0f3f7;
    border-radius: 10px;
    font-size: 14px;
    box-shadow: inset 2px 2px 5px #d1d9e6, inset -2px -2px 5px #ffffff;
}

.points-panel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.points-panel__page {
    font-weight: 600;
    color: #334155;
}

.points-nav {
    padding: 8px 18px;
    border-radius: 999px;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 13px;
}

.points-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.points-panel__status {
    font-size: 14px;
    color: #64748b;
}

.points-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1150px) {
    .points-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .points-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .points-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.points-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow:
        0 10px 20px rgba(15, 23, 42, 0.06),
        0 2px 6px rgba(15, 23, 42, 0.04);
}

.points-card__meta-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.points-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(239, 68, 68, 0.35);
}

.points-delete:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.points-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #475569;
}

.points-card__status {
    background: #e0e7ff;
    color: #1d4ed8;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 11px;
}

.points-card__subcat {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
}

.points-fade-control {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fee2e2;
    color: #991b1b;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.points-fade-control input {
    width: 13px;
    height: 13px;
    margin: 0;
    accent-color: #dc2626;
}

.points-card__status--saved {
    background: #dcfce7;
    color: #15803d;
}

.points-image-wrap {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    background: #e2e8f0;
}

.points-image {
    display: block;
    width: 100%;
    height: auto;
}

.points-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.points-dot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #ffffff;
    box-shadow: 0 6px 12px rgba(29, 78, 216, 0.35);
}

.points-dot--pivot {
    background: #dc2626;
    box-shadow: 0 6px 12px rgba(220, 38, 38, 0.35);
}

.points-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(29, 78, 216, 0.8);
    transform: translateY(-50%);
    box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
}

.points-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.points-ring-preview-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: normal;
}

.points-ring-preview-canvas--unavailable {
    display: none;
}

.points-cut-line {
    stroke: #f97316;
    stroke-width: 5;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.3));
}

.points-crop-box {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #f59e0b;
    background: rgba(245, 158, 11, 0.14);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.18);
}

.points-crop-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 3px;
    background: #f59e0b;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}

.points-crop-handle--nw {
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
}

.points-crop-handle--n {
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

.points-crop-handle--ne {
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
}

.points-crop-handle--e {
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
}

.points-crop-handle--se {
    right: 0;
    bottom: 0;
    transform: translate(50%, 50%);
}

.points-crop-handle--s {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
}

.points-crop-handle--sw {
    left: 0;
    bottom: 0;
    transform: translate(-50%, 50%);
}

.points-crop-handle--w {
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.points-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.points-clear {
    background: #94a3b8;
    font-size: 13px;
    padding: 10px 14px;
}

.points-crop,
.points-save-crop,
.points-clear-crop,
.points-refresh-cache {
    background: #0f766e;
    font-size: 13px;
    padding: 10px 14px;
}

.points-save-crop:disabled,
.points-refresh-cache:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.points-clear-crop {
    background: #64748b;
}

.points-submit {
    background: #1d4ed8;
    font-size: 13px;
    padding: 10px 14px;
}

.points-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.points-message {
    font-size: 12px;
    color: #64748b;
    min-height: 16px;
}

.points-message--success {
    color: #15803d;
    font-weight: 600;
}

.points-message--error {
    color: #dc2626;
    font-weight: 600;
}

.points-message--info {
    color: #1d4ed8;
    font-weight: 600;
}


/* Generic page shell */
.page-wrapper {
    margin: 0 auto;
    padding: 40px 30px 80px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.page-heading h1 {
    margin: 0 0 8px 0;
    font-size: 32px;
    color: #1f2a44;
}

.page-heading p {
    margin: 0;
    font-size: 16px;
    color: #4a5468;
    max-width: 720px;
}

.layout-stack {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.card-panel {
    background: #ffffff;
    border-radius: 18px;
    padding: 30px;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.08),
        0 4px 10px rgba(15, 23, 42, 0.05);
}

.card-panel h2 {
    margin: 0 0 6px 0;
    font-size: 22px;
    color: #111827;
}

.card-panel__subtitle {
    margin: 0 0 18px 0;
    color: #4b5563;
    font-size: 15px;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.input-label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.primary-btn,
.danger-btn {
    padding: 12px 18px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.primary-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
}

.danger-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #ffffff;
}

.primary-btn:hover,
.danger-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

.danger-btn:hover {
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.25);
}

.lookalikes-stage {
    min-height: 480px;
    position: relative;
}

.lookalikes-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lookalikes-toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lookalikes-toolbar button {
    padding: 10px 18px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.lookalikes-toolbar button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);
}

.lookalikes-seed {
    display: flex;
    gap: 18px;
    align-items: center;
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.lookalikes-seed img {
    width: 96px;
    height: 96px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.lookalikes-seed__meta h3 {
    margin: 0;
    font-size: 20px;
    color: #111827;
}

.lookalikes-seed__meta p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #4a5568;
}

.lookalikes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.lookalike-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    text-align: left;
}

.lookalike-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

.lookalike-card__image {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lookalike-card__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lookalike-card__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lookalike-card__id {
    font-weight: 600;
    color: #1f2937;
}

.lookalike-card__score {
    font-size: 12px;
    font-weight: 600;
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lookalikes-empty,
.lookalikes-error {
    padding: 18px;
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
    color: #475569;
    font-size: 14px;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.25);
}

.classifier-wrapper {
    min-height: calc(100vh - 120px);
    padding: 60px 80px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.95));
}

.classifier-header {
    margin-bottom: 30px;
}

.classifier-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.classifier-header h1 {
    margin: 0 0 10px;
    font-size: 32px;
    color: #111827;
}

.classifier-header p {
    margin: 0;
    color: #475569;
    font-size: 16px;
}

.classifier-search {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.classifier-search input[type="text"] {
    border: none;
    outline: none;
    font-size: 14px;
    min-width: 220px;
}

.classifier-search button {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

.classifier-search button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
}

.classifier-search .search-reset {
    color: #6b7280;
    font-weight: 600;
    text-decoration: none;
}

.classifier-search .search-reset:hover {
    color: #4b5563;
    text-decoration: underline;
}

.classifier-table {
    overflow-x: auto;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.classifier-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.classifier-table thead th {
    position: sticky;
    top: 0;
    background: #f1f5f9;
    color: #1f2937;
    text-align: left;
    padding: 14px 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    white-space: nowrap;
}

.classifier-table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    color: #374151;
    vertical-align: top;
    white-space: normal;
}

.classifier-table tbody td.image-cell {
    width: 110px;
    white-space: nowrap;
}

.classifier-table tbody td.description-cell {
    white-space: pre-wrap;
    line-height: 1.5;
    max-width: 520px;
}

.classifier-table tbody td img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.classifier-table tbody td a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

.classifier-table tbody td a:hover {
    text-decoration: underline;
}

.classifier-table tbody tr:nth-child(odd) {
    background: rgba(241, 245, 249, 0.5);
}

.classifier-table tbody tr:hover {
    background: rgba(191, 219, 254, 0.3);
}

.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 0 4px;
}

.pagination-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.pagination-link {
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    transition: color 0.18s ease;
}

.pagination-link:hover {
    color: #1d4ed8;
}

.pagination-link.disabled {
    color: #9ca3af;
    pointer-events: none;
}

/* Configs page */
.configs-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 30px 80px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.configs-alert {
    padding: 14px 18px;
    border-radius: 12px;
    font-weight: 600;
}

.configs-alert--success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.configs-alert--error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.configs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.configs-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.08),
        0 4px 10px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.configs-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.configs-card__header h3 {
    margin: 0;
    font-size: 20px;
    color: #111827;
}

.configs-card__header p {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 13px;
}

.configs-pill {
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 700;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.configs-card__section h4 {
    margin: 0 0 12px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
}

.configs-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.configs-tree.is-collapsed {
    display: none;
}

.configs-tree--root > .configs-tree__item {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px;
    background: #f8fafc;
}

.configs-tree__item {
    display: grid;
    gap: 10px;
}

.configs-node {
    display: flex;
    align-items: center;
    gap: 10px;
}

.configs-tree ul.configs-tree {
    margin-left: 18px;
    padding-left: 16px;
    border-left: 1px dashed #cbd5f5;
}

.configs-option {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.configs-option input {
    margin-top: 2px;
}

.configs-option__title {
    flex: 1;
    font-weight: 600;
    color: #0f172a;
}

.configs-option__meta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 999px;
}

.configs-option__endpoint {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    background: #e2e8f0;
    padding: 2px 6px;
    border-radius: 999px;
}

.configs-option--locked {
    opacity: 0.7;
}

.configs-option__note {
    font-size: 11px;
    color: #ef4444;
    font-weight: 600;
}

.configs-toggle {
    border: 1px solid #cbd5f5;
    background: #ffffff;
    color: #334155;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-weight: 700;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.configs-toggle:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.configs-card__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.configs-note {
    font-size: 13px;
    color: #64748b;
}

.secondary-button {
    background: #94a3b8;
}

.secondary-button:hover {
    background: #64748b;
    box-shadow: 0 4px 10px rgba(100, 116, 139, 0.3);
}

.configs-create__panel {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px;
    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.08),
        0 4px 10px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.configs-create__panel h2 {
    margin: 0;
    color: #111827;
    font-size: 24px;
}

.configs-create__panel p {
    margin: 0;
    color: #4b5563;
}

.configs-create__form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    align-items: center;
}

.configs-create__form select {
    padding: 10px 12px;
    border: none;
    background: #f0f3f7;
    border-radius: 10px;
    font-size: 15px;
    box-shadow: inset 2px 2px 5px #d1d9e6, inset -2px -2px 5px #ffffff;
}

@media (max-width: 1024px) {
    .classifier-wrapper {
        padding: 40px 24px;
    }

    .classifier-search {
        width: 100%;
        justify-content: space-between;
        padding: 10px 16px;
    }

    .classifier-search input[type="text"] {
        flex: 1 1 auto;
        min-width: 160px;
    }

    .classifier-table table {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .nav-right {
        flex-wrap: wrap;
        gap: 12px;
    }

    .home-wrapper {
        padding: 40px 18px 60px;
    }

    .feature-card {
        padding: 22px;
    }

    .points-panel {
        padding: 24px;
    }

    .points-panel__header {
        align-items: flex-start;
    }

    .points-panel__controls {
        flex-direction: column;
    }

    .points-nav {
        width: 100%;
    }

    .page-wrapper {
        padding: 30px 18px 60px;
    }

    .classifier-header__top {
        flex-direction: column;
        align-items: stretch;
    }

    .classifier-search {
        flex-wrap: wrap;
        gap: 10px;
        border-radius: 16px;
    }
}


/* 2026 UI refresh: visual-only overrides for the shared app shell. */
:root {
    --ui-bg: #f4f6f8;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fafc;
    --ui-ink: #172033;
    --ui-muted: #647086;
    --ui-line: #dfe6ee;
    --ui-teal: #0f766e;
    --ui-blue: #2457a6;
    --ui-gold: #c47a12;
    --ui-rose: #be3455;
    --ui-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.07);
    --ui-shadow-md: 0 18px 44px rgba(15, 23, 42, 0.10);
    --ui-shadow-lg: 0 28px 70px rgba(15, 23, 42, 0.16);
    --ui-radius: 10px;
}

html {
    min-height: 100%;
    background: var(--ui-bg);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 0%, rgba(15, 118, 110, 0.10), transparent 28%),
        radial-gradient(circle at 88% 6%, rgba(196, 122, 18, 0.10), transparent 25%),
        linear-gradient(180deg, #fbfcfd 0%, var(--ui-bg) 42%, #eef2f5 100%);
    color: var(--ui-ink);
    -webkit-font-smoothing: antialiased;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.025) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 62%);
}

body > nav {
    min-height: 58px;
    padding: 12px 34px;
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav-left img {
    height: 42px;
    filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.12));
}

.logo-text {
    color: var(--ui-ink);
    font-size: 19px;
    letter-spacing: 0;
}

.logo-text::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-right: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ui-teal), var(--ui-gold));
    box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.10);
}

.logout-button,
button.logout-button {
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    background: #fff1f2;
    color: #9f1239;
    border: 1px solid #fecdd3;
    box-shadow: none;
}

.logout-button:hover,
button.logout-button:hover {
    background: #ffe4e6;
    color: #881337;
    box-shadow: 0 8px 18px rgba(190, 52, 85, 0.16);
}

.breadcrumbs-wrap {
    background: rgba(255, 255, 255, 0.70);
    border-bottom: 1px solid rgba(148, 163, 184, 0.20);
    box-shadow: none;
    backdrop-filter: blur(12px);
}

.breadcrumbs {
    max-width: 1200px;
    padding: 11px 30px;
}

.breadcrumbs a {
    color: var(--ui-teal);
}

.crumb-current {
    color: var(--ui-ink);
}

.home-wrapper,
.configs-wrapper,
.page-wrapper {
    position: relative;
    max-width: 1240px;
    padding-top: 46px;
}

.hero-panel {
    position: relative;
    max-width: 880px;
    padding: 34px 36px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--ui-radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 252, 0.88)),
        linear-gradient(120deg, rgba(15, 118, 110, 0.12), rgba(196, 122, 18, 0.10));
    box-shadow: var(--ui-shadow-md);
    overflow: hidden;
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--ui-teal), var(--ui-gold), var(--ui-rose));
}

.hero-panel::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: 0;
    width: 190px;
    height: 4px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--ui-teal), var(--ui-gold), var(--ui-rose));
}

.hero-panel h1 {
    color: var(--ui-ink);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.02;
}

.hero-panel p,
.page-heading p,
.card-panel__subtitle {
    color: var(--ui-muted);
    line-height: 1.55;
}

.feature-grid {
    gap: 20px;
}

.feature-group {
    padding: 22px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: var(--ui-radius);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: var(--ui-shadow-sm);
    backdrop-filter: blur(10px);
}

.feature-group__header h2,
.page-heading h1,
.card-panel h2,
.points-panel__header h2,
.configs-card__header h3 {
    color: var(--ui-ink);
}

.feature-card,
.points-panel,
.points-card,
.card-panel,
.configs-card,
.classifier-table,
.lookalike-card,
.lookalikes-seed {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: var(--ui-radius);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--ui-shadow-sm);
}

.feature-card {
    min-height: 180px;
    padding: 22px;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--ui-teal), var(--ui-gold));
    opacity: 0;
    transition: opacity 0.18s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ui-shadow-md);
}

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

.feature-card__tag,
.configs-pill,
.points-card__status {
    background: #e8f7f5;
    color: #0f524c;
    border: 1px solid #bde7e1;
    letter-spacing: 0.04em;
}

.feature-card h3 {
    color: var(--ui-ink);
}

.feature-card p {
    color: #526173;
    line-height: 1.5;
}

.feature-card__cta {
    color: var(--ui-teal);
}

.feature-card--disabled {
    opacity: 0.62;
    filter: grayscale(0.22);
}

.points-panel,
.card-panel,
.configs-card {
    padding: 28px;
}

.points-card {
    background: rgba(255, 255, 255, 0.90);
}

.points-image-wrap,
.lookalike-card__image {
    background: linear-gradient(180deg, #f8fafc, #eef3f7);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

input[type="file"],
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea,
.points-panel__filters input,
.points-panel__filters select,
.classifier-search input[type="text"],
.configs-create__form select {
    border: 1px solid #d5dfe8;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ui-ink);
    box-shadow: none;
}

input[type="file"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--ui-teal);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
}

.primary-button,
.primary-btn,
.points-submit,
.points-nav,
.classifier-search button,
.lookalikes-toolbar button,
.configs-card button,
.configs-create__form button {
    background: linear-gradient(135deg, var(--ui-teal), var(--ui-blue));
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.18);
}

.primary-button:hover,
.primary-btn:hover,
.points-submit:hover,
.points-nav:hover,
.classifier-search button:hover,
.lookalikes-toolbar button:hover {
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.24);
}

.danger-btn,
.points-delete {
    background: linear-gradient(135deg, #e11d48, #be123c);
}

.points-clear,
.points-clear-crop {
    background: #64748b;
}

.points-crop,
.points-save-crop,
.points-refresh-cache {
    background: #0f766e;
}

.classifier-wrapper {
    background:
        radial-gradient(circle at 16% 0%, rgba(15, 118, 110, 0.12), transparent 28%),
        linear-gradient(180deg, #fbfcfd, #eef3f7);
}

.classifier-search {
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
}

.classifier-table thead th {
    background: #eef3f7;
    color: #41536a;
}

.classifier-table tbody tr:nth-child(odd) {
    background: #f8fafc;
}

.classifier-table tbody tr:hover {
    background: #e8f7f5;
}

@media (max-width: 768px) {
    body > nav {
        min-height: 64px;
        padding: 10px 16px;
    }

    .nav-left {
        left: 16px;
    }

    .nav-right {
        right: 16px;
    }

    .logo-text {
        font-size: 16px;
    }

    .logo-text::before {
        display: none;
    }

    .breadcrumbs {
        padding: 10px 18px;
    }

    .hero-panel {
        padding: 28px 22px;
    }
}


/* 2026 premium palette pass: less white, richer surfaces. */
:root {
    --ui-bg: #e8edf1;
    --ui-page: #f1f4f6;
    --ui-surface: #fbf7ef;
    --ui-surface-soft: #edf4f2;
    --ui-panel: #172033;
    --ui-panel-2: #203047;
    --ui-ink: #152033;
    --ui-muted: #607086;
    --ui-line: #cfd9df;
    --ui-teal: #0f766e;
    --ui-blue: #26547c;
    --ui-gold: #b9791d;
    --ui-rose: #a83d57;
}

html,
body {
    background: var(--ui-page);
}

body {
    background:
        radial-gradient(circle at 10% -4%, rgba(15, 118, 110, 0.18), transparent 30%),
        radial-gradient(circle at 92% 0%, rgba(185, 121, 29, 0.18), transparent 28%),
        linear-gradient(180deg, #dfe7eb 0%, #eef2f3 38%, #e3eaed 100%);
}

body::before {
    opacity: 0.7;
    background-image:
        linear-gradient(rgba(21, 32, 51, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 32, 51, 0.035) 1px, transparent 1px);
}

body > nav {
    background: rgba(22, 32, 49, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.20);
}

.logo-text {
    color: #f8fafc;
}

.logo-text::before {
    background: linear-gradient(135deg, #2dd4bf, #d99b35);
    box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.12);
}

.breadcrumbs-wrap {
    background: rgba(31, 45, 64, 0.82);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.breadcrumbs,
.breadcrumbs a,
.crumb-current,
.crumb-sep {
    color: #cbd5e1;
}

.breadcrumbs a:hover {
    color: #ffffff;
}

.hero-panel {
    background:
        linear-gradient(135deg, rgba(23, 32, 51, 0.98), rgba(36, 61, 80, 0.94) 62%, rgba(15, 90, 86, 0.92)),
        linear-gradient(120deg, rgba(185, 121, 29, 0.20), rgba(168, 61, 87, 0.14));
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.24);
}

.hero-panel h1,
.hero-panel p {
    color: #f8fafc;
}

.hero-panel p {
    color: #cbd5e1;
}

.feature-group {
    background: rgba(228, 236, 238, 0.82);
    border-color: rgba(123, 139, 154, 0.30);
}

.feature-card,
.points-panel,
.points-card,
.card-panel,
.configs-card,
.classifier-table,
.lookalike-card,
.lookalikes-seed {
    background: linear-gradient(180deg, #fbf7ef 0%, #f3f0e9 100%);
    border-color: rgba(135, 116, 85, 0.22);
    box-shadow: 0 14px 32px rgba(42, 34, 25, 0.09);
}

.feature-card:nth-child(3n + 1)::before {
    background: linear-gradient(90deg, #0f766e, #b9791d);
}

.feature-card:nth-child(3n + 2)::before {
    background: linear-gradient(90deg, #26547c, #0f766e);
}

.feature-card:nth-child(3n + 3)::before {
    background: linear-gradient(90deg, #a83d57, #b9791d);
}

.feature-card:hover {
    box-shadow: 0 22px 48px rgba(42, 34, 25, 0.14);
}

.feature-card__tag,
.configs-pill,
.points-card__status,
.pill,
.mode-chip,
.rank-category {
    background: #dfefe9;
    color: #0d5f58;
    border-color: #afd6cc;
}

.feature-card:nth-child(3n + 2) .feature-card__tag {
    background: #e3ecf4;
    color: #254f77;
    border-color: #bdd0df;
}

.feature-card:nth-child(3n + 3) .feature-card__tag {
    background: #f4e7dc;
    color: #8a4b10;
    border-color: #e1c6a5;
}

.feature-card h3,
.feature-group__header h2,
.page-heading h1,
.card-panel h2,
.points-panel__header h2,
.configs-card__header h3 {
    color: #152033;
}

.feature-card p,
.feature-group__header p,
.page-heading p,
.card-panel__subtitle,
.points-panel__header p {
    color: #5d6877;
}

input[type="file"],
input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea,
.points-panel__filters input,
.points-panel__filters select,
.classifier-search input[type="text"],
.configs-create__form select {
    background: #fffdf8;
    border-color: #cdbfaaa;
}

.primary-button,
.primary-btn,
.points-submit,
.points-nav,
.classifier-search button,
.lookalikes-toolbar button,
.configs-card button,
.configs-create__form button {
    background: linear-gradient(135deg, #0f766e, #26547c);
}

.classifier-wrapper,
.configs-wrapper,
.page-wrapper,
.home-wrapper {
    color: #152033;
}

.login-page-wrapper .login-card {
    background: #fbf7ef;
    border: 1px solid rgba(135, 116, 85, 0.22);
}


/* Breadcrumb refinement for premium shell. */
.breadcrumbs-wrap {
    background: rgba(20, 30, 46, 0.78);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(14px);
}

.breadcrumbs {
    max-width: 1240px;
    min-height: 38px;
    padding: 8px 30px;
    gap: 8px;
    color: #94a3b8;
    font-size: 0.82rem;
}

.breadcrumbs a,
.crumb-current {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    text-decoration: none;
    line-height: 1;
}

.breadcrumbs a {
    color: #dbe7ef;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 700;
}

.breadcrumbs a:hover {
    color: #ffffff;
    background: rgba(20, 184, 166, 0.18);
    border-color: rgba(45, 212, 191, 0.28);
    text-decoration: none;
}

.crumb-current {
    color: #f8fafc;
    background: rgba(185, 121, 29, 0.18);
    border: 1px solid rgba(217, 155, 53, 0.26);
    font-weight: 800;
}

.crumb-sep {
    color: rgba(203, 213, 225, 0.48);
    font-weight: 800;
}

@media (max-width: 768px) {
    .breadcrumbs {
        padding: 8px 16px;
        font-size: 0.78rem;
    }
}


/* Wide transparent Adamas Tech navbar logo. */
.nav-left img {
    width: 188px;
    height: auto;
    max-height: 54px;
    object-fit: contain;
    image-rendering: auto;
    transform: translateZ(0);
}

@media (max-width: 768px) {
    .nav-left img {
        width: 142px;
        max-height: 44px;
    }
}


/* Breadcrumb nav reset: prevent global nav styles leaking into breadcrumbs. */
.breadcrumbs-wrap > nav.breadcrumbs,
nav.breadcrumbs {
    position: static;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
}

.breadcrumbs-wrap > nav.breadcrumbs {
    padding-left: 30px;
    padding-right: 30px;
}

@media (max-width: 768px) {
    .breadcrumbs-wrap > nav.breadcrumbs {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* Breadcrumb content alignment with page containers. */
.breadcrumbs-wrap > nav.breadcrumbs,
nav.breadcrumbs {
    max-width: 1240px;
    padding-left: 30px;
    padding-right: 30px;
}

@media (min-width: 1300px) {
    .breadcrumbs-wrap > nav.breadcrumbs,
    nav.breadcrumbs {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .breadcrumbs-wrap > nav.breadcrumbs,
    nav.breadcrumbs {
        padding-left: 18px;
        padding-right: 18px;
    }
}


/* Warm cream navbar variant. */
body > nav {
    background: rgba(250, 244, 232, 0.94);
    border-bottom: 1px solid rgba(166, 139, 99, 0.22);
    box-shadow: 0 12px 30px rgba(92, 72, 48, 0.10);
    backdrop-filter: blur(16px);
}

.logo-text {
    color: #1f2a37;
}

.logo-text::before {
    background: linear-gradient(135deg, #0f766e, #c47a12);
    box-shadow: 0 0 0 5px rgba(196, 122, 18, 0.11);
}

.nav-left img {
    filter: drop-shadow(0 5px 10px rgba(92, 72, 48, 0.12));
}

.logout-button,
button.logout-button {
    background: #fffaf2;
    color: #8a4b10;
    border-color: #e6d1ad;
}

.logout-button:hover,
button.logout-button:hover {
    background: #f6ead7;
    color: #6f3a06;
    box-shadow: 0 8px 18px rgba(138, 75, 16, 0.14);
}

.breadcrumbs-wrap {
    background: rgba(244, 236, 222, 0.88);
    border-bottom: 1px solid rgba(166, 139, 99, 0.18);
    box-shadow: 0 8px 20px rgba(92, 72, 48, 0.07);
}

.breadcrumbs,
.crumb-sep {
    color: #897865;
}

.breadcrumbs a {
    color: #35566f;
    background: rgba(255, 250, 242, 0.78);
    border-color: rgba(166, 139, 99, 0.20);
}

.breadcrumbs a:hover {
    color: #1f2a37;
    background: #fffaf2;
    border-color: rgba(15, 118, 110, 0.28);
}

.crumb-current {
    color: #1f2a37;
    background: rgba(223, 239, 233, 0.90);
    border-color: rgba(15, 118, 110, 0.22);
}


/* Transparent breadcrumb bar variant. */
.breadcrumbs-wrap {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.breadcrumbs-wrap > nav.breadcrumbs,
nav.breadcrumbs {
    background: transparent;
    box-shadow: none;
}

.breadcrumbs a {
    background: rgba(255, 250, 242, 0.62);
    border-color: rgba(166, 139, 99, 0.18);
}

.crumb-current {
    background: rgba(223, 239, 233, 0.72);
    border-color: rgba(15, 118, 110, 0.18);
}


/* Remove rainbow accents; use restrained single accents. */
.logo-text::before {
    background: #0f766e;
    box-shadow: 0 0 0 5px rgba(15, 118, 110, 0.10);
}

.hero-panel::before,
.recommendations-page > .hero-panel.card::before {
    background: #0f766e;
}

.hero-panel::after,
.analytics-header::before {
    background: #b9791d;
}

.feature-card::before,
.feature-card:nth-child(3n + 1)::before,
.feature-card:nth-child(3n + 2)::before,
.feature-card:nth-child(3n + 3)::before {
    background: #0f766e;
}

.feature-card__tag,
.feature-card:nth-child(3n + 2) .feature-card__tag,
.feature-card:nth-child(3n + 3) .feature-card__tag,
.configs-pill,
.points-card__status,
.pill,
.mode-chip,
.rank-category {
    background: #dfefe9;
    color: #0d5f58;
    border-color: #afd6cc;
}

.metric-card,
.metric-card:nth-child(2),
.metric-card:nth-child(3),
.metric-card:nth-child(4),
.metric-card:nth-child(5),
.metric-card:nth-child(6),
.metric-card:nth-child(7),
.metric-card:nth-child(8) {
    border-top-color: #0f766e;
}

.recommendations-page > .hero-panel.card,
.analytics-header,
.hero-panel {
    background: linear-gradient(135deg, rgba(23, 32, 51, 0.98), rgba(36, 61, 80, 0.95) 64%, rgba(15, 90, 86, 0.92));
}


/* Compact dashboard spacing. */
.home-wrapper {
    padding-top: 24px;
    padding-bottom: 48px;
    gap: 26px;
}

.home-wrapper .hero-panel {
    padding-top: 24px;
    padding-bottom: 24px;
}

.feature-group {
    margin: 8px 0;
}

@media (max-width: 768px) {
    .home-wrapper {
        padding-top: 18px;
        padding-bottom: 40px;
        gap: 20px;
    }
}


/* Wider dashboard content area. */
.home-wrapper {
    width: min(100% - 32px, 1480px);
    max-width: 1480px;
    padding-left: 0;
    padding-right: 0;
}

.home-wrapper .hero-panel {
    max-width: 100%;
}

@media (max-width: 768px) {
    .home-wrapper {
        width: calc(100% - 24px);
    }
}


/* Adaptive percentage page width alignment. */
:root {
    --content-width: 94vw;
    --content-max-width: none;
}

.home-wrapper,
.breadcrumbs-wrap > nav.breadcrumbs,
nav.breadcrumbs {
    width: var(--content-width);
    max-width: var(--content-max-width);
    box-sizing: border-box;
}

.home-wrapper {
    padding-left: 0;
    padding-right: 0;
}

.breadcrumbs-wrap > nav.breadcrumbs,
nav.breadcrumbs {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 1600px) {
    :root {
        --content-width: 92vw;
    }
}

@media (max-width: 1024px) {
    :root {
        --content-width: 94vw;
    }
}

@media (max-width: 768px) {
    :root {
        --content-width: calc(100vw - 24px);
    }
}


/* Hero panel width alignment with adaptive content. */
.home-wrapper > .hero-panel,
.home-wrapper > .hero-panel.card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

/* Create-points workbench repair after the 2026 shell refresh. */
.create-points-page .page-wrapper {
    width: var(--content-width, 94vw);
    max-width: none;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}

.create-points-page .points-panel {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.create-points-page .points-panel__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: start;
}

.create-points-page .points-panel__filters {
    width: 100%;
    min-width: 0;
}

.create-points-page .points-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: start;
}

.create-points-page .points-card,
.create-points-page .points-card__meta,
.create-points-page .points-card__meta-left {
    min-width: 0;
}

.create-points-page .points-card__meta {
    align-items: flex-start;
}

.create-points-page .points-card__meta-left {
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 7px 8px;
    line-height: 1.25;
}

.create-points-page .points-card__id {
    flex: 1 0 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    color: #172033;
    font-weight: 800;
}

.create-points-page .points-card__subcat {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.create-points-page .points-card__status,
.create-points-page .points-fade-control {
    flex: 0 0 auto;
    white-space: nowrap;
}

.create-points-page .points-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.create-points-page .points-actions button {
    width: 100%;
    min-height: 38px;
    padding: 9px 10px;
    font-size: 12px;
    line-height: 1.15;
    white-space: nowrap;
}

@media (max-width: 980px) {
    .create-points-page .points-panel__header {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1400px) {
    .create-points-page .points-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .create-points-page .points-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .create-points-page .points-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .create-points-page .page-wrapper {
        width: calc(100vw - 24px);
    }

    .create-points-page .points-panel {
        padding: 20px;
    }
}

@media (max-width: 520px) {
    .create-points-page .points-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .create-points-page .points-actions {
        grid-template-columns: 1fr;
    }
}

/* Keep hero panels visually consistent across pages with local card styles. */
.hero-panel,
.hero-panel.card,
.recommendations-page > .hero-panel.card {
    background: linear-gradient(135deg, rgba(23, 32, 51, 0.98), rgba(36, 61, 80, 0.95) 64%, rgba(15, 90, 86, 0.92)) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

.hero-panel h1,
.hero-panel h2,
.hero-panel h3 {
    color: #f8fafc !important;
}

.hero-panel p,
.hero-panel .muted,
.hero-panel .status,
.hero-panel small {
    color: #cbd5e1 !important;
}

.scale-jewellery-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.scale-jewellery-card {
    min-height: 0;
}

.scale-jewellery-card__header {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.scale-jewellery-count {
    flex: 0 0 auto;
    border: 1px solid rgba(100, 116, 139, 0.26);
    border-radius: 999px;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.72);
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.scale-jewellery-sku-list {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    max-height: 230px;
    overflow: auto;
    padding: 10px;
    border: 1px solid rgba(100, 116, 139, 0.20);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.58);
}

.scale-jewellery-sku {
    max-width: 100%;
    border: 1px solid rgba(100, 116, 139, 0.22);
    border-radius: 6px;
    padding: 5px 8px;
    background: #ffffff;
    color: #1f2937;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.scale-jewellery-empty {
    color: #64748b;
    font-size: 13px;
    font-weight: 650;
}
.scale-jewellery-sku-list--page {
    max-height: none;
    min-height: 160px;
}

.scale-jewellery-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 14px;
}

.scale-jewellery-pagination-bar .result-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.scale-jewellery-pagination-bar .scale-jewellery-search {
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.scale-jewellery-pagination-bar button,
.scale-jewellery-pagination-bar input[type="number"],
.scale-jewellery-pagination-bar input[type="search"] {
    border: 1px solid rgba(100, 116, 139, 0.24);
    border-radius: 999px;
    background: #ffffff;
    color: #152033;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 700;
}

.scale-jewellery-pagination-bar input[type="number"] {
    width: 78px;
    text-align: center;
}

.scale-jewellery-pagination-bar input[type="search"] {
    width: min(240px, 100%);
}

.scale-jewellery-pagination-bar button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.scale-jewellery-output-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.scale-jewellery-output-card {
    position: relative;
    border: 1px solid rgba(100, 116, 139, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(42, 34, 25, 0.08);
}

.scale-jewellery-output-card.failed {
    border-color: rgba(220, 38, 38, 0.32);
}

.scale-jewellery-output-image {
    position: relative;
    min-height: 260px;
    aspect-ratio: 4 / 5;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    cursor: zoom-in;
}

.scale-jewellery-output-image.is-zoomed {
    cursor: grab;
}

.scale-jewellery-output-image.dragging {
    cursor: grabbing;
}

.scale-jewellery-output-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom-scale, 1));
    transform-origin: center center;
    transition: transform 0.12s ease;
    user-select: none;
    -webkit-user-drag: none;
}

.scale-jewellery-output-card.loading img {
    opacity: 0.42;
}


.necklace-coordinate-editor {
    position: absolute;
    inset: 0;
    transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom-scale, 1));
    transform-origin: center center;
    transition: transform 0.12s ease;
    z-index: 3;
    pointer-events: none;
}

.necklace-coordinate-editor__layer {
    position: absolute;
    pointer-events: auto;
    cursor: crosshair;
}

.necklace-coordinate-editor__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}


.necklace-coordinate-editor__guide {
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 8 6;
    filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.18));
}

.necklace-coordinate-editor__guide--fade-top {
    stroke: rgba(11, 158, 245, 0.95);
}

.necklace-coordinate-editor__guide--fade-bottom {
    stroke: rgba(255, 0, 255, 0.9);
}

.necklace-coordinate-editor__guide--fade-end {
    stroke: rgba(212, 182, 6, 0.95);
    stroke-dasharray: none;
}

.necklace-coordinate-editor__line {
    stroke: rgba(29, 78, 216, 0.92);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 2px 5px rgba(15, 23, 42, 0.28));
}

.necklace-coordinate-editor__line--draft {
    stroke-dasharray: 10 6;
}

.necklace-coordinate-editor__dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background: #1d4ed8;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(var(--handle-scale, 1));
    transform-origin: center center;
    box-shadow: 0 4px 8px rgba(29, 78, 216, 0.3);
    cursor: grab;
    padding: 0;
    z-index: 2;
}

.necklace-coordinate-editor__dot:active {
    cursor: grabbing;
}

.necklace-coordinate-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.necklace-coordinate-controls[hidden],
.necklace-save-fade-btn[hidden] {
    display: none !important;
}

.necklace-coordinate-controls button {
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 6px;
    background: #ffffff;
    color: #334155;
    font-weight: 700;
    padding: 7px 10px;
    cursor: pointer;
}

.necklace-coordinate-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.necklace-fade-controls {
    display: grid;
    gap: 6px;
}

.necklace-fade-control-row {
    display: grid;
    grid-template-columns: minmax(78px, 0.8fr) minmax(120px, 1.4fr) 70px;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 700;
}

.necklace-fade-control-row label {
    white-space: nowrap;
}

.necklace-fade-control-row input[type="range"] {
    width: 100%;
    accent-color: #152033;
}

.necklace-fade-control-row input[type="number"] {
    width: 70px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    border-radius: 6px;
    padding: 6px 7px;
    color: #152033;
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.necklace-fade-line-handle {
    position: absolute;
    left: 0;
    width: 100%;
    height: 30px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: transparent;
    cursor: ns-resize;
    z-index: 4;
    padding: 0;
}

.necklace-fade-line-handle:hover,
.necklace-fade-line-handle:focus {
    transform: translateY(-50%);
    box-shadow: none;
}

.necklace-fade-line-handle::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 14px;
    height: 3px;
    border-radius: 999px;
    transition: height 0.12s ease, top 0.12s ease, filter 0.12s ease;
}

.necklace-fade-line-handle:hover::before,
.necklace-fade-line-handle:focus::before {
    top: 13px;
    height: 5px;
    filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.22));
}

.necklace-fade-line-handle--top::before {
    background: repeating-linear-gradient(
        to right,
        rgba(11, 158, 245, 0.95) 0 8px,
        transparent 8px 14px
    );
}

.necklace-fade-line-handle--bottom::before {
    background: repeating-linear-gradient(
        to right,
        rgba(255, 0, 255, 0.9) 0 8px,
        transparent 8px 14px
    );
}

.scale-jewellery-output-image.necklace-coordinate-editing {
    cursor: crosshair;
}

.scale-jewellery-output-card .loader-ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #e2e8f0;
    border-top-color: var(--ui-teal, #0f766e);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: loader-spin 0.9s linear infinite;
    pointer-events: none;
}

.scale-jewellery-zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid rgba(148, 163, 184, 0.42);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
}

.scale-jewellery-zoom-controls button {
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.scale-jewellery-zoom-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.scale-jewellery-zoom-controls span {
    min-width: 42px;
    text-align: center;
    color: #334155;
    font-size: 0.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.9);
}

.fullscreen-overlay[hidden] {
    display: none;
}

.fullscreen-image {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 16px;
    background: #0f172a;
}

.fullscreen-close {
    position: absolute;
    top: 20px;
    right: 20px;
    border: none;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 700;
}

.fullscreen-close:hover {
    background: #e2e8f0;
}

.fullscreen-active {
    overflow: hidden;
}

.necklace-cache-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.necklace-cache-modal[hidden] {
    display: none;
}

.necklace-cache-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(3px);
}

.necklace-cache-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.24);
    padding: 22px;
    color: #152033;
}

.necklace-cache-modal__dialog h2 {
    margin: 0 0 10px;
    font-size: 1.1rem;
    line-height: 1.25;
}

.necklace-cache-modal__dialog p {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
}

.necklace-cache-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.necklace-cache-modal__actions button {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 9px 14px;
    font-weight: 800;
    cursor: pointer;
}

.necklace-cache-modal__secondary {
    background: #ffffff;
    color: #334155;
}

.necklace-cache-modal__secondary:hover {
    background: #f8fafc;
}

.necklace-cache-modal__primary {
    background: #152033;
    color: #ffffff;
    border-color: #152033 !important;
}

.necklace-cache-modal__primary:hover {
    background: #0f172a;
}

.scale-jewellery-output-meta {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 12px;
    background: #ffffff;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.scale-jewellery-output-meta--top {
    border-top: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.scale-jewellery-output-meta--bottom {
    border-top: 1px solid rgba(148, 163, 184, 0.22);
}

.scale-jewellery-output-meta strong,
.scale-jewellery-output-meta span {
    overflow-wrap: anywhere;
}

.scale-jewellery-meta-header {
    display: grid;
    gap: 5px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.scale-jewellery-meta-header strong {
    color: #111827;
    font-size: 0.86rem;
    font-weight: 850;
    letter-spacing: 0;
}

.scale-jewellery-meta-status {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.scale-jewellery-render-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border-radius: 6px;
    background: #f8fafc;
    color: #526174;
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.25;
}

.scale-jewellery-meta-group {
    display: grid;
    gap: 6px;
}

.scale-jewellery-meta-group--fade {
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    background: #fbfdff;
}

.scale-jewellery-meta-label {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.scale-jewellery-meta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.scale-jewellery-meta-details {
    min-height: 24px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.35;
}

.scale-jewellery-meta-details span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

@media (max-width: 900px) {
    .scale-jewellery-output-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .scale-jewellery-output-grid {
        grid-template-columns: 1fr;
    }
}



@keyframes loader-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.scale-jewellery-model-switch {
    align-self: flex-start;
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
}

.scale-jewellery-model-switch button {
    min-width: 82px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #374151;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.scale-jewellery-model-switch button.active {
    background: #111827;
    color: #ffffff;
}

.scale-jewellery-model-switch button:disabled {
    cursor: wait;
    opacity: 0.65;
}


.scale-jewellery-output-meta .earring-save-pan-btn,
.scale-jewellery-output-meta .necklace-save-pan-btn {
    display: none;
}

.scale-jewellery-output-meta .earring-save-pan-btn,
.scale-jewellery-output-meta .necklace-save-pan-btn,
.scale-jewellery-output-meta .necklace-save-fade-btn,
.scale-jewellery-output-meta .scale-jewellery-fix-btn {
    align-self: flex-start;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #7a1f3d;
    border-radius: 6px;
    background: #7a1f3d;
    color: #ffffff;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.scale-jewellery-output-meta .earring-save-pan-btn:disabled,
.scale-jewellery-output-meta .necklace-save-pan-btn:disabled,
.scale-jewellery-output-meta .necklace-save-fade-btn:disabled,
.scale-jewellery-output-meta .scale-jewellery-fix-btn:disabled {
    cursor: wait;
    opacity: 0.65;
}


.scale-jewellery-scale-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.scale-jewellery-scale-control button {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    line-height: 1;
}

.scale-jewellery-scale-control span {
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.scale-jewellery-scale-control .scale-jewellery-show-btn,
.scale-jewellery-scale-control .scale-jewellery-save-btn {
    min-width: 54px;
    padding: 0 10px;
    background: #7a1f3d;
    border-color: #7a1f3d;
    color: #ffffff;
}

.scale-jewellery-scale-control button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.necklace-guide-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 14px;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
}

.necklace-guide-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.necklace-guide-legend i {
    width: 20px;
    height: 3px;
    display: inline-block;
    border-radius: 999px;
}

.legend-pivot {
    background: rgba(29, 78, 216, 0.92);
}

.legend-fade-top {
    background: repeating-linear-gradient(
        to right,
        rgba(11, 158, 245, 0.95) 0 8px,
        transparent 8px 14px
    );
}

.legend-fade-bottom {
    background: repeating-linear-gradient(
        to right,
        rgba(255, 0, 255, 0.9) 0 8px,
        transparent 8px 14px
    );
}

.legend-fade-end {
    background: rgba(212, 182, 6, 0.95);
}

.necklace-preview-image {
    background: #111827;
}
.necklace-preview-image.is-asset-view {
    background: #ffffff;
}

.necklace-preview-image.is-asset-view img {
    padding: 10px;
    box-sizing: border-box;
}

.scale-jewellery-pagination-bar .debug-toggle-btn {
    border-color: #7a1f3d;
    color: #7a1f3d;
}

.scale-jewellery-pagination-bar .debug-toggle-btn.active {
    background: #7a1f3d;
    color: #ffffff;
}


.scale-jewellery-ai-fix-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(5px);
}

.scale-jewellery-ai-fix-overlay[hidden] {
    display: none;
}

.scale-jewellery-ai-fix-dialog {
    width: min(920px, 94vw);
    max-height: 92vh;
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.32);
}

.scale-jewellery-ai-fix-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.scale-jewellery-ai-fix-header strong {
    color: #111827;
    font-size: 0.95rem;
    font-weight: 850;
}

.scale-jewellery-ai-fix-close {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font-weight: 800;
}

.scale-jewellery-ai-fix-body {
    min-height: 260px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #0f172a;
}

.scale-jewellery-ai-fix-body img {
    max-width: 100%;
    max-height: 76vh;
    display: block;
    object-fit: contain;
    transform: translate(var(--ai-fix-pan-x, 0px), var(--ai-fix-pan-y, 0px)) scale(var(--ai-fix-zoom, 1));
    transform-origin: center center;
    transition: transform 120ms ease;
    user-select: none;
    touch-action: none;
}

.scale-jewellery-ai-fix-body.dragging img {
    cursor: grabbing;
    transition: none;
}

.scale-jewellery-ai-fix-body img:not([hidden]) {
    cursor: grab;
}

.scale-jewellery-ai-fix-body img[hidden] {
    display: none !important;
}

.scale-jewellery-ai-fix-overlay.loading .scale-jewellery-ai-fix-body {
    background: linear-gradient(135deg, #111827, #1f2937);
}

.scale-jewellery-ai-fix-overlay.loading .scale-jewellery-ai-fix-body::before {
    content: "Generating jewellery fix";
    position: absolute;
    left: 50%;
    top: calc(50% + 38px);
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
}

.scale-jewellery-ai-fix-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.scale-jewellery-ai-fix-toggle,
.scale-jewellery-ai-fix-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.scale-jewellery-ai-fix-toggle {
    overflow: hidden;
    gap: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
}

.scale-jewellery-ai-fix-toggle button {
    min-width: 74px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: #334155;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 850;
    line-height: 1;
}

.scale-jewellery-ai-fix-toggle button.active {
    background: #111827;
    color: #ffffff;
}

.scale-jewellery-ai-fix-toggle button:disabled {
    cursor: default;
    opacity: 0.45;
}

.scale-jewellery-ai-fix-zoom-controls button {
    min-width: 32px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    font-weight: 800;
    line-height: 1;
}

.scale-jewellery-ai-fix-zoom-controls button:disabled {
    cursor: default;
    opacity: 0.45;
}

.scale-jewellery-ai-fix-zoom-controls span {
    min-width: 46px;
    text-align: center;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.scale-jewellery-ai-fix-status {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 750;
}

.scale-jewellery-ai-fix-overlay.loading .scale-jewellery-ai-fix-body::after {
    content: "";
    width: 38px;
    height: 38px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -19px 0 0 -19px;
    border: 4px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    border-radius: 999px;
    animation: loader-spin 0.8s linear infinite;
}