:root {
    --jeni-pink: #ec008c;
    --jeni-magenta: #ff0f7b;
    --jeni-orange: #ff7a00;
    --jeni-yellow: #ffb000;
    --jeni-dark: #171717;
    --jeni-gray: #f5f6fa;
    --jeni-border: #e5e7eb;
    --jeni-text: #1f2937;
    --brand: #ec008c;
    --brand-deep: #a40062;
    --brand-soft: #fff3f8;
    --ink: #1f2937;
    --muted: #667085;
    --line: #ece1e8;
    --paper: #ffffff;
    --canvas: #fff8fb;
    --accent: #ff7a00;
    --warn: #ffb000;
    --shadow: 0 18px 40px rgba(236, 0, 140, 0.08);
}

body {
    background:
        radial-gradient(circle at top right, rgba(255, 15, 123, 0.12), transparent 28%),
        linear-gradient(180deg, #fff8fb 0%, #fffaf4 42%, #f7f3f5 100%);
    color: var(--ink);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-deep); }

.site-header, .site-footer, .admin-sidebar { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px); }
.site-header { border-bottom: 1px solid rgba(236, 0, 140, 0.08); }
.site-header .navbar { padding: 0.15rem 0; }
.site-header .navbar-brand { margin-right: 0; padding: 0; }
.site-header .navbar-toggler { padding: 0.45rem 0.65rem; }
.site-footer { border-top: 1px solid rgba(236, 0, 140, 0.08); margin-top: 4rem; }
.site-footer a { margin-left: 1rem; }

.brand-lockup { display: inline-flex; gap: 0.75rem; align-items: center; color: var(--ink); }
.brand-lockup img {
    width: 140px;
    height: auto;
    min-width: 140px;
    max-height: 72px;
    border-radius: 72px;
    background: #fff;
    padding: 0.25rem 0.45rem;
    box-shadow: var(--shadow);
    object-fit: contain;
    object-position: center;
    display: block;
}
.brand-lockup span { display: flex; flex-direction: column; line-height: 1.2; }
.brand-lockup strong { font-size: 1.05rem; }
.brand-lockup small { color: var(--muted); font-size: 0.78rem; }

.search-bar { display: flex; width: min(460px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem; }
.search-bar input { flex: 1; border: 0; outline: 0; padding: 0.55rem 0.95rem; background: transparent; }
.search-bar button { border: 0; border-radius: 999px; background: linear-gradient(135deg, #ec008c 0%, #ff4d3d 45%, #ff9f00 100%); color: #fff; padding: 0.6rem 1rem; }

.btn-brand { background: linear-gradient(135deg, #ec008c 0%, #ff4d3d 45%, #ff9f00 100%); border: 0; color: #fff; }
.btn-brand:hover { background: linear-gradient(135deg, #c60073 0%, #ea4b22 45%, #f59200 100%); color: #fff; }
.btn-outline-brand { border-color: var(--brand); color: var(--brand); }
.btn-outline-brand:hover { background: var(--brand); color: #fff; }

.hero-section { padding: 2rem 0 1rem; }
.hero-panel {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 1.5rem;
    background:
        linear-gradient(135deg, #ec008c 0%, #ff4d3d 45%, #ff9f00 100%);
    color: #fff;
    border: 1px solid rgba(236, 0, 140, 0.08);
    border-radius: 28px;
    padding: 2rem;
    box-shadow: var(--shadow);
}
.hero-panel .eyebrow,
.hero-panel p,
.hero-panel a.btn-outline-brand { color: rgba(255,255,255,0.92); }
.hero-panel .btn-outline-brand { border-color: rgba(255,255,255,0.6); }
.hero-panel .btn-outline-brand:hover { background: #fff; color: var(--jeni-dark); }
.hero-copy h1 { font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.08; margin: 0.35rem 0 1rem; }
.hero-copy p { font-size: 1.05rem; max-width: 60ch; }
.hero-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-metrics { display: grid; gap: 1rem; }
.hero-metrics div, .feature-card, .content-card, .filter-card, .stat-card, .product-card, .auth-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(236, 0, 140, 0.08);
    border-radius: 24px;
    box-shadow: var(--shadow);
}
.hero-metrics div { padding: 1.1rem 1.2rem; color: var(--jeni-text); }
.hero-metrics strong { display: block; margin-bottom: 0.3rem; }
.hero-panel .hero-metrics strong { color: var(--jeni-text); }
.hero-panel .hero-metrics span { color: var(--muted); }
.hero-metrics span, .feature-card p, .content-card p, .stat-card span { color: var(--muted); }

.feature-strip, .catalog-section { padding: 1rem 0 0; }
.feature-card, .content-card, .filter-card, .auth-card { padding: 1.4rem; }
.section-head { display: flex; justify-content: space-between; gap: 1rem; align-items: end; }
.section-head h1, .section-head h2 { margin: 0.3rem 0 0; }
.eyebrow { display: inline-block; color: var(--brand); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.product-card { overflow: hidden; }
.product-image { display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #fff1f7, #ffe9d1); }
.product-image img, .detail-image img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: 1rem; }
.product-body h3 { font-size: 1.02rem; min-height: 2.8rem; margin: 0.5rem 0; }
.product-body p { color: var(--muted); min-height: 3rem; font-size: 0.92rem; }
.badge-row { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.price-stack small { display: block; text-decoration: line-through; color: #8a97a5; }
.price-stack strong { font-size: 1.3rem; color: var(--brand-deep); }
.stock-indicator { color: var(--accent); font-weight: 600; font-size: 0.9rem; }
.product-actions { display: grid; gap: 0.6rem; margin-top: 1rem; }

.detail-image { aspect-ratio: 1; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.thumb-card { aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.thumb-card img { width: 100%; height: 100%; object-fit: cover; }
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.detail-grid div, .timeline-line, .order-line, .cart-line, .address-line, .checkout-address {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 0.95rem 1rem;
    background: #fff;
}
.detail-grid strong, .timeline-line strong, .order-line strong, .address-line strong { display: block; }
.detail-grid span, .timeline-line span, .order-line small, .address-line small, .checkout-address small { color: var(--muted); }

.cart-line, .order-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
.cart-line img { width: 84px; height: 84px; object-fit: cover; border-radius: 18px; }
.qty-form { display: flex; gap: 0.5rem; align-items: center; }
.summary-list div { display: flex; justify-content: space-between; padding: 0.4rem 0; }

.checkout-address { display: flex; gap: 0.8rem; margin-bottom: 0.8rem; }
.checkout-address input { margin-top: 0.3rem; }
.copy-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.track-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
}

.auth-shell, .auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
}
.auth-wrap { width: min(540px, calc(100vw - 2rem)); }
.auth-card h1 { margin: 0.35rem 0 1rem; }
.auth-links { display: flex; justify-content: space-between; gap: 0.8rem; margin-top: 1rem; flex-wrap: wrap; }

.admin-layout { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.admin-sidebar { padding: 1.5rem; border-right: 1px solid rgba(15, 76, 129, 0.08); position: sticky; top: 0; height: 100vh; }
.admin-nav { display: grid; gap: 0.45rem; }
.admin-nav a {
    padding: 0.8rem 1rem;
    border-radius: 14px;
    color: var(--ink);
    background: rgba(236, 0, 140, 0.05);
}
.admin-nav a:hover { background: rgba(236, 0, 140, 0.12); }
.admin-main { padding: 0 1rem; }
.table-card { overflow-x: auto; }
.stat-card { padding: 1.1rem; }
.stat-card strong { display: block; font-size: 1.8rem; color: var(--brand-deep); }
.stat-card.gradient { background: linear-gradient(135deg, #ec008c 0%, #ff4d3d 45%, #ff9f00 100%); color: #fff; }
.stat-card.gradient strong,
.stat-card.gradient span { color: #fff; }

.timeline-line, .address-line { margin-bottom: 0.8rem; }
.pagination-wrap { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.page-chip { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.page-chip.active { background: linear-gradient(135deg, #ec008c 0%, #ff4d3d 45%, #ff9f00 100%); color: #fff; border-color: transparent; }
.empty-state { text-align: center; }
.admin-product-line { display: flex; align-items: center; gap: 0.9rem; }
.admin-product-line img { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; background: #fff3f8; border: 1px solid var(--line); }
.admin-image-preview { height: 180px; border: 1px dashed var(--line); border-radius: 20px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; }
.admin-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.admin-image-preview.empty { color: var(--muted); }
.brand-strip { padding: 1rem; border-radius: 22px; background: linear-gradient(135deg, rgba(236,0,140,.08) 0%, rgba(255,77,61,.08) 45%, rgba(255,159,0,.08) 100%); border: 1px solid rgba(236,0,140,.08); }
.report-print .print-header { border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.report-print code { word-break: break-all; }
.print-shell { background: #fff; }

@media (max-width: 991px) {
    .hero-panel, .admin-layout { grid-template-columns: 1fr; }
    .admin-sidebar { position: static; height: auto; }
    .cart-line, .order-line { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .track-form { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .site-header .navbar { padding: 0.05rem 0; }
    .site-header .navbar-toggler { padding: 0.35rem 0.55rem; }
    .brand-lockup { gap: 0.65rem; }
    .brand-lockup img {
        width: 84px;
        min-width: 84px;
        max-height: 56px;
        padding: 0.15rem 0.25rem;
        border-radius: 14px;
    }
    .brand-lockup strong { font-size: 0.98rem; }
    .brand-lockup small { display: none; }
    .section-head { flex-direction: column; align-items: start; }
    .hero-panel { padding: 1.35rem; border-radius: 22px; }
    .feature-card, .content-card, .filter-card, .auth-card { padding: 1rem; }
}

@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    .content-card,
    .stat-card,
    .feature-card,
    .auth-card { box-shadow: none !important; border-radius: 0 !important; }
    table { width: 100%; border-collapse: collapse; }
    th, td { border: 1px solid #ddd; padding: 6px !important; }
}