:root {
    --ph-dark: #07152f;
    --ph-navy: #0b1f4d;
    --ph-blue: #006cff;
    --ph-electric-blue: #00a8ff;
    --ph-cyan: #00e5ff;
    --ph-purple: #6c35ff;
    --ph-violet: #8b2cff;
    --ph-magenta: #d719ff;
    --ph-gold: #ffb800;
    --ph-bg: #f6f8ff;
    --ph-white: #fff;
    --ph-text: #101828;
    --ph-muted: #667085;
    --ph-border: #eaecf0;
    --ph-input-border: #dde3ee;
    --ph-link: #0054cc;
    --ph-blue-soft: #eff6ff;
    --ph-purple-soft: #f5f0ff;
    --ph-success: #027a48;
    --ph-success-soft: #ecfdf3;
    --ph-danger: #b42318;
    --ph-danger-soft: #fff1f3;
    --ph-gold-text: #865900;
    --ph-gold-soft: #fff8e6;
    --ph-footer-text: #aab4cc;
    --ph-gradient: linear-gradient(135deg, #00e5ff 0%, #006cff 35%, #6c35ff 68%, #d719ff 100%);
    --ph-button-gradient: linear-gradient(135deg, #007bff 0%, #6c35ff 55%, #d719ff 100%);
    --ph-button-contrast: linear-gradient(rgb(7 21 47 / 14%), rgb(7 21 47 / 14%));
    --ph-dark-gradient: linear-gradient(135deg, #07152f 0%, #0b1f4d 50%, #15104a 100%);
    --ph-shadow-small: 0 2px 8px rgb(15 23 42 / 5%);
    --ph-shadow-card: 0 8px 30px rgb(15 23 42 / 7%);
    --ph-radius-small: 8px;
    --ph-radius-control: 12px;
    --ink: var(--ph-text);
    --muted: var(--ph-muted);
    --line: var(--ph-border);
    --green: var(--ph-link);
    --paper: var(--ph-white);
    --soft: var(--ph-bg);
    --coral: var(--ph-danger);
}

body { background: var(--ph-bg); }
h1, h2, h3 { color: var(--ph-navy); font-weight: 800; letter-spacing: 0; }
h3 { font-weight: 700; }
input, textarea, select, button { letter-spacing: 0; }
::selection { background: var(--ph-purple-soft); color: var(--ph-navy); }
::placeholder { color: var(--ph-muted); opacity: 1; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--ph-purple);
    outline-offset: 3px;
}
button, a, input, select, textarea {
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.topline { background: var(--ph-dark); color: var(--ph-white); }
.topline b { color: var(--ph-gold); }
header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgb(255 255 255 / 94%);
    backdrop-filter: blur(16px);
    border-bottom-color: rgb(108 53 255 / 8%);
    box-shadow: var(--ph-shadow-small);
}
.nav .brand-logo { width: 240px; }
.nav nav a { min-height: 44px; display: inline-flex; align-items: center; }
.nav nav a:hover, .nav nav .selected { color: var(--ph-link); }
.nav nav .selected { text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 2px; }
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pwa-header-install { min-height: 40px; padding: 8px 13px; border: 0; color: var(--ph-white); background: var(--ph-button-gradient); font-size: 12px; box-shadow: 0 4px 14px rgb(108 53 255 / 18%); }
.pwa-header-install:hover { color: var(--ph-white); transform: translateY(-1px); }
.pwa-ios-guide { max-width: 210px; margin: 0; color: var(--ph-muted); font-size: 10px; line-height: 1.35; }
.demo-bar { background: var(--ph-gold-soft); color: var(--ph-gold-text); }
.hero-slider { background: var(--ph-bg); }
.hero-image-only:before { display: none; }
.hero-track:has(.hero-image-only.is-current) .hero-slide:not(.is-current) { display: none; }
.hero-image-link { display: block; width: 100%; }
.hero-image-link:focus-visible { outline-offset: -4px; }
.hero-banner-image { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 700; object-fit: contain; }
.hero-controls { position: relative; bottom: auto; padding-top: 8px; padding-bottom: 8px; }
.hero-content { min-height: clamp(350px, 36.46vw, 700px); }
.hero-background { object-position: center top; }
.hero-slide:before { background: rgb(248 250 255 / 80%); }
.hero-dark:before { background: rgb(7 21 47 / 78%); }
.hero-dark h1, .hero-dark p { color: var(--ph-white); }
.hero-label { color: var(--ph-link); }
.hero-dark .hero-label { color: var(--ph-cyan); }
.hero-content p { color: var(--ph-navy); }
.hero-dark .hero-content p { color: var(--ph-white); }
.hero-content h1, .hero-content h2 { font-weight: 800; margin: 0; font-size: 40px; line-height: 1.2; max-width: 700px; }
.hero-actions button, .page-buttons button {
    min-width: 44px;
    width: 44px;
    height: 44px;
    border-color: var(--ph-input-border);
    border-radius: var(--ph-radius-control);
    background: var(--ph-white);
    color: var(--ph-navy);
}
.hero-actions button:hover, .page-buttons button:not(:disabled):hover {
    border-color: var(--ph-purple);
    background: var(--ph-purple-soft);
}
.hero-dots { gap: 0; }
.hero-dots button {
    position: relative;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    outline: none;
}
.hero-dots button:before {
    content: '';
    position: absolute;
    inset: 17px;
    background: var(--ph-muted);
    border-radius: 50%;
}
.hero-dots button.active { background: transparent; outline: none; }
.hero-dots button.active:before {
    background: var(--ph-blue);
    box-shadow: 0 0 0 3px var(--ph-white), 0 0 0 5px var(--ph-purple);
}
.hero-dots button:focus-visible { outline: 2px solid var(--ph-purple); outline-offset: -3px; }
.benefits { background: var(--ph-white); color: var(--ph-navy); }
.benefits b { color: var(--ph-purple); }
.button {
    background: var(--ph-button-contrast), var(--ph-button-gradient);
    border: 1px solid transparent;
    border-radius: var(--ph-radius-control);
    color: var(--ph-white);
    box-shadow: 0 4px 14px rgb(108 53 255 / 16%);
    font-weight: 700;
    text-shadow: 0 1px 2px rgb(7 21 47 / 28%);
}
.button:hover:not(:disabled) {
    background: var(--ph-button-contrast), var(--ph-button-gradient);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgb(108 53 255 / 25%);
}
.button:disabled { transform: none; box-shadow: none; }
.outline-button {
    min-height: 44px;
    background: var(--ph-white);
    border-color: var(--ph-input-border);
    color: var(--ph-navy);
    border-radius: var(--ph-radius-control);
}
.outline-button:hover { background: var(--ph-bg); border-color: var(--ph-purple); }
.text-link, .buy-link { color: var(--ph-link); min-height: 44px; display: inline-flex; align-items: center; }
.text-link:hover, .buy-link:hover { color: var(--ph-purple); text-decoration: underline; text-underline-offset: 4px; }
.danger-link { color: var(--ph-danger); }
.tabs button { min-height: 44px; border-radius: var(--ph-radius-small); color: var(--ph-muted); }
.tabs button:hover { background: var(--ph-blue-soft); color: var(--ph-link); }
.tabs button.active { background: var(--ph-navy); color: var(--ph-white); box-shadow: inset 0 -3px var(--ph-purple); }
.product-card { background: var(--ph-white); border-color: var(--ph-border); box-shadow: var(--ph-shadow-card); border-radius: var(--ph-radius-small); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.product-card:hover { transform: translateY(-3px); border-color: #b6c9ff; box-shadow: 0 14px 32px rgb(15 23 42 / 11%); }
.product-card:focus-within { border-color: var(--ph-purple); }
.product-info h3 a:hover { color: var(--ph-link); }
.product-info p { color: var(--ph-muted); }
.product-bottom strong, .summary-total b, .summary-total strong { color: var(--ph-link); }
.product-bottom strong { font-weight: 750; }
.product-rating { color: #b77608; font-size: 12px; font-weight: 700; margin: -2px 0 10px; }
.product-rating small { color: var(--ph-muted); font-size: 11px; font-weight: 500; }
.product-rating-empty { color: var(--ph-muted); font-weight: 500; }
.stock { color: var(--ph-success); }
.live-dot { background: var(--ph-success); }
.empty-stock { color: var(--ph-muted); }
.empty-stock .live-dot { background: var(--ph-muted); }
.buy-link { padding: 0 8px; border-radius: var(--ph-radius-small); background: var(--ph-blue-soft); }
.filter-row { color: var(--ph-muted); }
.checkbox { min-height: 44px; }
.checkbox input { accent-color: var(--ph-purple); }
.search, form input, form textarea, form select, .admin-toolbar select {
    border-color: var(--ph-input-border);
    background: var(--ph-white);
    border-radius: var(--ph-radius-control);
    color: var(--ph-text);
    min-height: 44px;
}
.search:focus-within, form input:focus, form textarea:focus, form select:focus, .admin-toolbar select:focus {
    border-color: var(--ph-purple);
    box-shadow: 0 0 0 4px rgb(108 53 255 / 10%);
}
.search input { min-height: 44px; }
.search input:focus { outline: 0; box-shadow: none; }
form label, .admin-toolbar>label { color: var(--ph-navy); }
.filter-row select { min-height: 44px; }
form input[type=checkbox] { min-height: 15px; border-radius: 3px; }
.service-band { background: var(--ph-dark-gradient); border-color: var(--ph-navy); color: var(--ph-white); }
.service-band h2 { color: var(--ph-white); }
.service-band p { color: var(--ph-footer-text); }
.service-band .eyebrow { color: var(--ph-cyan); }
footer.wrap {
    max-width: none;
    padding-left: max(32px, calc((100% - 1176px) / 2));
    padding-right: max(32px, calc((100% - 1176px) / 2));
    background: var(--ph-dark);
    color: var(--ph-footer-text);
    border-top: 1px solid rgb(170 180 204 / 18%);
}
footer .brand-logo { background: var(--ph-white); padding: 0 10px; border-radius: var(--ph-radius-small); }
.footer-links { display: grid; gap: 8px; font-size: 13px; }
.footer-links a:hover { color: var(--ph-white); }
.notice { background: var(--ph-success-soft); color: var(--ph-success); border-radius: var(--ph-radius-small); }
.notice[data-type="error"] { background: var(--ph-danger-soft); color: var(--ph-danger); }
.page-section { min-height: 65vh; padding-top: 42px; padding-bottom: 65px; }
.card { background: var(--ph-white); border: 1px solid var(--ph-border); border-radius: var(--ph-radius-small); box-shadow: var(--ph-shadow-card); padding: 24px; }
.card h2 { margin-bottom: 10px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.stats-grid .card { display: grid; gap: 8px; }
.stats-grid strong { color: var(--ph-link); font-size: 28px; }
.stats-grid span, .push-preview span { color: var(--ph-muted); font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { min-height: 44px; padding: 10px 16px; border: 1px solid var(--ph-input-border); border-radius: var(--ph-radius-control); background: var(--ph-white); color: var(--ph-navy); font-weight: 700; }
.btn:hover { border-color: var(--ph-purple); background: var(--ph-purple-soft); }
.btn.primary { border-color: transparent; color: var(--ph-white); background: var(--ph-button-gradient); }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ph-navy); }
.check-row input { width: 17px; height: 17px; accent-color: var(--ph-purple); }
.notification-verification-card, .notification-preferences-card { max-width: 720px; margin-bottom: 18px; }
.notification-otp-form { display: grid; gap: 14px; max-width: 440px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.broadcast-form { display: grid; gap: 16px; margin-bottom: 24px; }
.broadcast-form label { display: grid; gap: 7px; color: var(--ph-navy); font-size: 13px; font-weight: 700; }
.broadcast-form .field-hint { color: var(--ph-muted); font-size: 11px; font-weight: 400; }
.broadcast-form input, .broadcast-form textarea { width: 100%; min-height: 48px; box-sizing: border-box; border: 1px solid var(--ph-input-border); border-radius: var(--ph-radius-control); background: var(--ph-white); color: var(--ph-text); padding: 12px 14px; box-shadow: inset 0 1px 2px rgb(15 23 42 / 3%); }
.broadcast-form textarea { min-height: 120px; line-height: 1.55; resize: vertical; }
.broadcast-form input:hover, .broadcast-form textarea:hover { border-color: #b6c4df; }
.broadcast-form input:focus, .broadcast-form textarea:focus { outline: 0; border-color: var(--ph-purple); box-shadow: 0 0 0 4px rgb(108 53 255 / 10%); }
.push-preview { display: grid; gap: 6px; padding: 16px; border: 1px dashed #b9c7e4; border-radius: var(--ph-radius-small); background: var(--ph-blue-soft); }
.push-preview strong { color: var(--ph-navy); }
.push-preview p { margin: 0; color: var(--ph-text); font-size: 13px; }
.table-wrap { overflow-x: auto; }
.error { background: var(--ph-danger-soft); color: var(--ph-danger); border-radius: var(--ph-radius-small); }
.status { background: var(--ph-blue-soft); color: var(--ph-link); border-radius: var(--ph-radius-small); }
button.status { min-height: 44px; }
.success-mark { color: var(--ph-success); }
.order-summary { border-top-color: var(--ph-purple); }
.demo-payment { background: var(--ph-white); border-color: var(--ph-input-border); }
.admin-stats strong { color: var(--ph-navy); overflow-wrap: anywhere; }
.admin-stats div { min-width: 0; }
th { background: var(--ph-blue-soft); color: var(--ph-navy); }
td { background: var(--ph-white); }
tbody tr:hover td { background: var(--ph-bg); }
.page-buttons { flex-wrap: wrap; }
.page-buttons button.current { background: var(--ph-navy); color: var(--ph-white); border-color: var(--ph-navy); }
.hero-list-item>img, .hero-upload-preview { border-radius: var(--ph-radius-small); }
.form-actions { flex-wrap: wrap; }
#catalog { scroll-margin-top: 110px; }
@media (max-width: 640px) {
    .hero-content { min-height: 345px; }
    .hero-controls { bottom: auto; }
    .hero-background { object-position: 60% top; }
    .nav .brand-logo { width: 225px; }
    .header-actions { width: 100%; order: 3; justify-content: flex-end; }
    .pwa-ios-guide { max-width: none; text-align: right; }
    footer.wrap { padding-left: 20px; padding-right: 20px; }
    #catalog { scroll-margin-top: 170px; }
    .hero-actions { gap: 5px; }
    .product-bottom .buy-link { align-self: stretch; justify-content: space-between; }
}
.customer-order-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--ph-border); }
.customer-order-row h3 { margin: 10px 0; overflow-wrap: anywhere; }
.customer-order-row p { margin: 0; }
.customer-order-row>div:last-child { text-align: right; }
.order-number { font-size: 12px; color: var(--ph-muted); overflow-wrap: anywhere; }
.order-price { display: block; color: var(--ph-link); margin-top: 12px; }
.order-status-pending { background: var(--ph-gold-soft); color: var(--ph-gold-text); }
.order-status-completed { background: var(--ph-success-soft); color: var(--ph-success); }
.order-status-expired { background: var(--ph-danger-soft); color: var(--ph-danger); }
.order-status-ready { background: var(--ph-purple-soft); color: var(--ph-purple); }
.customer-order-detail { padding: 24px 0; border-top: 2px solid var(--ph-purple); border-bottom: 1px solid var(--ph-border); margin-bottom: 28px; }
.customer-order-detail h2 { font-size: 22px; overflow-wrap: anywhere; }
.customer-order-detail .section-heading>div { min-width: 0; }
.customer-detail-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; margin-bottom: 24px; }
.customer-detail-grid h3 { overflow-wrap: anywhere; }
.order-product-image { width: 100px; height: 100px; object-fit: contain; margin-bottom: 16px; border-radius: 8px; }
.order-facts { margin: 0; }
.order-facts>div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--ph-border); font-size: 13px; }
.order-facts dt { color: var(--ph-muted); }
.order-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.order-grand-total dd { font-weight: 700; color: var(--ph-link); }
.order-notes { white-space: pre-line; overflow-wrap: anywhere; margin-top: 16px; }
@media(max-width:640px) {
    .customer-order-row, .customer-detail-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .customer-order-row>div:last-child { text-align: left; }
}
.stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media(max-width:640px) {
    .stats-grid, .form-grid { grid-template-columns: 1fr; }
}
.qris-frame {
    position: relative;
    width: 440px;
    max-width: 100%;
    aspect-ratio: 1;
    margin: 24px 0;
    isolation: isolate;
}
.qris-template { display: block; width: 100%; height: 100%; object-fit: contain; }
.qris-code {
    position: absolute;
    top: 29%;
    left: 20%;
    width: 60%;
    aspect-ratio: 1;
    padding: 2%;
    background: #fff;
}
.qris-code img { display: block; width: 100%; height: 100%; object-fit: contain; }
[x-cloak] { display: none !important; }
.qris-timer { display: grid; gap: 8px; max-width: 440px; margin: 4px 0 18px; }
.qris-timer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--ph-muted); font-size: 13px; }
.qris-timer-clock { font: 800 28px/1 'Manrope', sans-serif; color: var(--ph-navy); font-variant-numeric: tabular-nums; }
.qris-timer-track { height: 6px; border-radius: 99px; background: var(--ph-border); overflow: hidden; }
.qris-timer-bar { display: block; height: 100%; border-radius: inherit; background: var(--ph-gradient); transition: width 1s linear, background-color .3s ease; }
.qris-timer[data-state="warning"] .qris-timer-bar { background: var(--ph-gold); }
.qris-timer[data-state="warning"] .qris-timer-clock { color: var(--ph-gold-text); }
.qris-timer[data-state="critical"] .qris-timer-bar { background: var(--ph-danger); }
.qris-timer[data-state="critical"] .qris-timer-clock { color: var(--ph-danger); }
.qris-timer-note { margin: 0; color: var(--ph-muted); font-size: 12px; }
.variant-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.variant-picker legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 500; }
.variant-options { display: grid; border: 1px solid var(--ph-input-border); border-radius: var(--ph-radius-control); background: var(--ph-white); overflow: hidden; }
.variant-option { position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 16px !important; padding: 14px 16px 14px 19px; cursor: pointer; font-weight: 400 !important; }
.variant-option + .variant-option { border-top: 1px solid var(--ph-border); }
.variant-option::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; }
.variant-option input { position: absolute; opacity: 0; pointer-events: none; }
.variant-option b { color: var(--ph-navy); font-size: 14px; overflow-wrap: anywhere; }
.variant-option .variant-price { grid-row: span 2; color: var(--ph-navy); font: 800 16px 'Manrope', sans-serif; font-variant-numeric: tabular-nums; text-align: right; }
.variant-option small { color: var(--ph-muted); font-size: 11px; }
.variant-option small.is-low { color: var(--ph-gold-text); font-weight: 700; }
.variant-option:hover:not(.is-empty) { background: var(--ph-bg); }
.variant-option:has(input:checked) { background: var(--ph-blue-soft); }
.variant-option:has(input:checked)::before { background: var(--ph-gradient); }
.variant-option:has(input:checked) .variant-price { color: var(--ph-link); }
.variant-option:has(input:focus-visible) { outline: 2px solid var(--ph-purple); outline-offset: -2px; }
.variant-option.is-empty { cursor: not-allowed; }
.variant-option.is-empty b, .variant-option.is-empty .variant-price { color: var(--ph-muted); }
.variant-option.is-empty .variant-price { text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .qris-timer-bar { transition: none; } }
.product-editor-form { display: grid; gap: 20px; max-width: 860px; padding-bottom: 90px; }
.editor-card { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--ph-border); border-radius: var(--ph-radius-control); background: var(--ph-white); min-width: 0; }
.editor-card h2 { margin: 0; font-size: 18px; }
.editor-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.variant-editor .variant-row { background: var(--ph-bg); }
.editor-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--ph-bg) 70%, transparent); }
.product-editor-page .admin-product-preview { max-width: 220px; border-radius: var(--ph-radius-small); }
@media(max-width:640px) {
    .editor-card { padding: 16px; }
}
.variant-row { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--ph-border); border-radius: var(--ph-radius-small); background: var(--ph-white); }
.variant-row-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media(max-width:640px) {
    .variant-row-fields { grid-template-columns: 1fr; }
}
.site-heading { padding-top: 20px; padding-bottom: 20px; }
.site-heading h1 { font-size: 24px; line-height: 1.4; font-weight: 700; margin: 0; text-wrap: balance; }
.site-heading p { color: var(--ph-muted); max-width: 720px; margin: 0; }
.legal-page { padding-top: 40px; padding-bottom: 65px; max-width: 800px; }
.legal-page h1 { margin-bottom: 16px; }
.legal-page ul { padding-left: 18px; line-height: 1.7; }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding-bottom: 48px; }
.review-card { border: 1px solid var(--ph-border, var(--line)); border-radius: 8px; padding: 20px; background: #fff; }
.review-card p { font-size: 14px; }
.review-card small { display: block; color: var(--muted); margin-top: 4px; }
.review-form { padding: 24px 0 32px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.review-form h2 { font-size: 22px; }
.buyer-reviews { padding-top: 40px; padding-bottom: 64px; }
.reviews-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.reviews-heading h1 { font-size:clamp(28px,4vw,40px); line-height:1.2; margin:8px 0 12px; color:#10244B; }
.rating-overview { display:grid; grid-template-columns:180px minmax(180px,1fr) minmax(180px,1fr); gap:32px; padding:32px; border:1px solid #E5EAF3; border-radius:20px; background:#fff; box-shadow:0 8px 28px #10244b06; }
.rating-score strong { display:block; font-size:44px; line-height:1.2; }
.rating-score small { font-size:16px; font-weight:400; margin-left:10px; color:#65738a; }
.rating-score p, .review-assurance p { color:#65738a; font-size:14px; }
.review-stars { color:#b77608; font-size:19px; line-height:1.5; }
.star-empty { color:#d5dbe5; }
.rating-distribution > div { display:grid; grid-template-columns:34px 1fr 30px; gap:12px; align-items:center; font-size:13px; }
.rating-distribution meter { width:100%; height:16px; accent-color:#ce900e; }
.rating-distribution meter::-webkit-meter-optimum-value { background:#ce900e; }
.review-assurance { align-self:center; padding-left:24px; border-left:1px solid #dde3ef; }
.reviews-content { display:block; padding-top:36px; }
.review-feed { max-width:900px; margin-inline:auto; }
.shop-dialog { border:1px solid #dce3ed; border-radius:8px; padding:28px; width:calc(100% - 32px); max-width:820px; max-height:calc(100dvh - 48px); overflow:auto; color:#07152f; background:#fff; box-shadow:0 20px 60px #0003; }
.shop-dialog::backdrop { background:#07152f99; }
body:has(dialog[open]) { overflow:hidden; }
.shop-dialog:not([open]) { display:none; }
.shop-dialog { margin:auto; overscroll-behavior:contain; overflow-wrap:anywhere; }
.shop-dialog input:not([type=checkbox]):not([type=radio]), .shop-dialog select, .shop-dialog textarea { max-width:100%; min-width:0; }
.shop-dialog .form-actions { flex-wrap:wrap; }
.shop-dialog .dialog-close { position:sticky; top:0; z-index:2; flex-shrink:0; }
.shop-dialog .table-scroll { max-width:100%; }
@media(max-width:430px) { .shop-dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); padding:16px; } .shop-dialog .orders-tools { flex-wrap:wrap; } }
.dialog-close { display:grid; place-items:center; width:40px; height:40px; padding:0; margin:0 0 12px auto; border:1px solid #dce3ed; background:#fff; color:#07152f; border-radius:6px; font-size:26px; }
.shop-dialog.review-compose { max-width:560px; }
.shop-dialog.review-compose h2 { font-size:24px; margin:0 0 24px; }
.orders-dialog > .orders-page { width:100%; max-width:none; padding:0; min-height:0; }
.product-editor-dialog .editor { background:none; border:0; padding:0; }
.product-editor-dialog .editor h2 { font-size:24px; }
.product-editor-dialog .form-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
.product-editor-dialog label { min-width:0; }
@media(max-width:600px) { .product-editor-dialog .form-row { grid-template-columns:1fr; } }
.shop-dialog.customer-order-detail { margin:auto; }
.service-detail { padding-block:32px 60px; }
.service-detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; margin-top:24px; align-items:start; }
.service-detail-image { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; background:#fff; }
.service-detail h1 { font-size:32px; line-height:1.3; overflow-wrap:anywhere; }
.service-description { white-space:pre-line; overflow-wrap:anywhere; }
.service-estimate { border-block:1px solid #dce3ed; padding:20px 0; margin:24px 0; }
.service-estimate strong { display:block; font-size:24px; overflow-wrap:anywhere; }
.service-estimate p { color:#65738a; font-size:14px; }
.whatsapp-button { background:#147a55; color:#fff; }
.admin-product-preview { width:140px; height:140px; object-fit:contain; margin-bottom:16px; }
.product-bottom { flex-wrap:wrap; gap:12px; }
.product-bottom strong { overflow-wrap:anywhere; }
.catalog-pagination .page-buttons a { display:grid; place-items:center; min-width:40px; height:40px; border:1px solid #dce3ed; border-radius:6px; background:#fff; }
.catalog-pagination a[aria-current=page] { background:#1254c5; color:#fff; }
.notification-settings { max-width:680px; }
.notification-settings form { display:grid; gap:16px; }
.order-phone-lookup { margin:20px 0; padding:20px; border:1px solid #dce3ed; border-radius:8px; background:#f7f9fc; }
.order-phone-lookup h3 { margin-top:0; }
.phone-lookup-form { display:flex; align-items:end; gap:12px; margin-top:14px; }
.phone-lookup-form label { flex:1; min-width:0; }
.phone-lookup-form button { flex-shrink:0; }
.admin-pagination .page-buttons button,.admin-pagination .page-buttons a { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; min-width:44px; height:44px; padding:0; font-size:14px; line-height:1; }
.admin-pagination .page-buttons button:disabled { opacity:.4; cursor:default; }
@media(max-width:600px) {
    .admin-pagination { flex-direction:column; align-items:center; gap:12px; }
    .admin-pagination .page-buttons { flex-wrap:nowrap; justify-content:center; gap:6px; }
    .admin-pagination .page-buttons .page-number-extra { display:none; }
    .phone-lookup-form { flex-direction:column; align-items:stretch; }
    .order-phone-lookup { padding:16px; }
}
@media(max-width:640px) { .shop-dialog { padding:18px; } .service-detail-grid { grid-template-columns:1fr; gap:24px; } .service-detail h1 { font-size:26px; } }
.reviews-content h2 { font-size:22px; margin:0 0 22px; }
.review-feed { min-width:0; }
.buyer-review-card { background:#fff; border:1px solid #E5EAF3; border-radius:18px; padding:24px; min-width:0; margin-bottom:20px; box-shadow:0 6px 24px #10244b05; }
.buyer-review-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.buyer-avatar { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:50%; background:#e9f1ff; color:#1254c5; font-weight:700; }
.buyer-review-top strong { font-size:14px; overflow-wrap:anywhere; }
.buyer-review-top time { display:block; color:#65738a; font-size:12px; }
.verified-review { color:#17704f; font-size:11px; margin-left:auto; }
.buyer-review-body { overflow-wrap:anywhere; white-space:pre-line; font-size:15px; line-height:1.8; }
.review-product { display:flex; align-items:center; gap:10px; padding-top:14px; margin-top:18px; border-top:1px solid #edf0f5; font-size:12px; color:#65738a; }
.review-product img { width:36px; height:36px; object-fit:contain; }
.review-product span { overflow-wrap:anywhere; }
.review-compose { min-width:0; scroll-margin-top:24px; }
.review-compose .review-form { margin:0; padding:0; border:0; }
.review-compose .button { width:100%; }
.rating-picker { border:0; padding:0; margin:0 0 20px; }
.rating-picker legend { font-size:14px; margin-bottom:10px; }
.rating-picker > div { display:flex; gap:8px; }
.rating-picker label { flex:1; margin:0; position:relative; }
.rating-picker input { position:absolute; opacity:0; width:1px; height:1px; }
.rating-picker span { display:block; text-align:center; border:1px solid #ccd6e5; padding:10px 4px; border-radius:6px; cursor:pointer; background:white; }
.rating-picker b { color:#b77608; }
.rating-picker input:checked + span { border-color:#1254c5; background:#e9f1ff; box-shadow:inset 0 0 0 1px #1254c5; }
.rating-picker input:focus-visible + span { outline:3px solid #82b3ff; outline-offset:2px; }
.reviews-empty { padding:48px 24px; text-align:center; background:#fff; border:1px solid #E5EAF3; border-radius:20px; box-shadow:0 8px 28px #10244b06; }
.reviews-empty img { object-fit:contain; }
.reviews-empty h3 { font-size:18px; margin-bottom:6px; }
.reviews-empty p { font-size:14px; color:#65738a; }
.visitor-stats { display:flex; flex-wrap:wrap; gap:40px; padding:24px 0; }
.visitor-stats strong { display:block; font-size:28px; }
.visitor-stats span { color:#65738a; font-size:14px; }
@media(max-width:760px) {
 .buyer-reviews { padding-top:28px; }
 .reviews-heading { align-items:flex-start; flex-wrap:wrap; }
 .reviews-heading h1 { font-size:28px; }
 .rating-overview { grid-template-columns:100px 1fr; gap:20px; }
 .rating-score strong { font-size:36px; }
 .review-assurance { grid-column:1/-1; padding:0; border:0; }
 .reviews-content { grid-template-columns:1fr; gap:32px; }
 .buyer-review-card { padding:18px; }
 .verified-review { margin-left:0; }
}
.review-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sales-dashboard { min-width: 0; }
.sales-dashboard .section-heading p, .balance-panel .section-heading p { margin-bottom: 0; }
.report-filters, .profit-editor { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 20px 0; }
.report-filters label, .profit-editor label { display: grid; gap: 6px; font-size: 13px; }
.report-filters input, .profit-editor input { min-width: 0; border: 1px solid var(--ph-input-border); border-radius: 8px; background: white; padding: 10px 12px; }
.profit-editor p { flex-basis: 100%; margin-bottom: 0; }
.report-period { color: var(--ph-muted); font-size: 13px; }
.report-note { font-size: 12px; max-width: 100ch; }
.sales-analysis { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; margin:28px 0; }
.sales-analysis > section { min-width:0; padding:24px; background:#fff; border:1px solid #E5EAF3; border-radius:18px; box-shadow:0 6px 24px #10244b05; }
.sales-analysis p { font-size: 13px; }
.daily-report { margin-top: 16px; font-size: 13px; }
.daily-report summary { cursor: pointer; color: var(--ph-link); font-weight: 600; }
.daily-report .table-scroll { max-height: 300px; margin-top: 12px; }
.sales-top ol { list-style: none; padding: 0; margin: 0; }
.sales-top li { display: flex; gap: 12px; justify-content: space-between; border-top: 1px solid var(--ph-border); padding: 14px 0; font-size: 13px; }
.sales-top li div { min-width: 0; overflow-wrap: anywhere; }
.sales-top li small { display: block; margin-top: 4px; font-weight: 400; color: var(--ph-muted); }
.sales-top li strong { flex-shrink: 0; text-align: right; }
.balance-panel { margin: 28px 0; }
.balance-stats small { display: block; color: var(--ph-muted); font-size: 11px; margin-top: 10px; }
.balance-stats strong { font-size: 22px; overflow-wrap: anywhere; }
.sales-ledger { margin-top: 32px; }
.sales-ledger > p { font-size: 13px; }
.sales-ledger table { min-width: 1080px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .sales-analysis { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .report-filters label { flex: 1 1 100%; }
    .report-filters button { width: 100%; }
    .sales-analysis > section { padding: 16px; }
    .balance-panel .section-heading { align-items: start; }
}
.review-form label { display: grid; gap: 8px; margin-bottom: 16px; font-size: 14px; }
.review-form input, .review-form textarea, .review-form select { width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 640px) { .review-fields { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 640px) {
    .review-grid { grid-template-columns: 1fr; }
    .site-heading { padding-top: 16px; padding-bottom: 16px; }
    .site-heading h1 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { transition: none !important; }
    .button:hover:not(:disabled), .product-card:hover { transform: none; }
}
.admin-workspace { max-width:1440px; padding-top:28px; padding-bottom:64px; }
.admin-navigation { display:flex; align-items:center; gap:24px; padding:18px 22px; margin-bottom:32px; background:#102c4a; color:#fff; border-radius:12px; }
.admin-navigation-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.admin-brand-mark { display:grid; place-items:center; width:36px; height:36px; border:1px solid #6c91ae; border-radius:9px; font-weight:800; color:#bee9ff; }
.admin-navigation-brand strong { display:block; font-size:16px; }
.admin-navigation-brand small { display:block; color:#b6ccdf; font-size:11px; margin-top:2px; }
.admin-navigation-links { display:flex; align-items:center; gap:5px; flex:1; }
.admin-navigation-links a { padding:10px 12px; border-radius:6px; color:#d4e0ed; font-size:13px; white-space:nowrap; }
.admin-navigation-links a:hover,.admin-navigation-links a[aria-current=page] { color:#102c4a; background:#eef6fd; }
.admin-store-link { font-size:12px; color:#d4e0ed; white-space:nowrap; }
.admin-heading { margin-bottom:24px; }
.admin-workspace h1 { font-size:clamp(26px,3vw,36px); letter-spacing:-.8px; }
.admin-workspace .admin-stats { border:1px solid #dce5ee; border-radius:10px; overflow:hidden; gap:0; background:#fff; margin-bottom:28px; }
.admin-workspace .admin-stats>div { border:0; border-radius:0; border-right:1px solid #e2e9f1; background:transparent; padding:22px; box-shadow:none; }
.admin-workspace .admin-stats>div:last-child { border-right:0; }
.admin-workspace .admin-stats strong { font-size:clamp(22px,2.4vw,30px); color:#173d61; font-variant-numeric:tabular-nums; }
.admin-workspace .admin-stats span { color:#5e7081; font-size:12px; }
.admin-workspace .admin-tabs { gap:4px; border-bottom:1px solid #dce5ee; padding-bottom:10px; margin-bottom:26px; }
.admin-workspace .admin-tabs button { background:transparent; border:0; color:#55697d; border-radius:6px; padding:12px 15px; white-space:nowrap; }
.admin-workspace .admin-tabs button.active { background:#e3eef9; color:#164c79; box-shadow:inset 0 -2px #246fa7; }
.admin-workspace .table-scroll { background:#fff; border:1px solid #dce5ee; border-radius:10px; }
.admin-workspace table { margin:0; width:100%; }
.admin-workspace th { background:#edf3f8; color:#4b6278; padding:14px 16px; font-size:11px; font-weight:700; }
.admin-workspace td { padding:16px; border-bottom:1px solid #edf1f6; font-size:13px; }
.admin-workspace tbody tr:hover { background:#f7faff; }
.admin-workspace td small { color:#6c7c8c; margin-top:5px; }
.admin-workspace .button { background:#195b91; box-shadow:none; }
.admin-workspace .button:hover { background:#12446e; }
.admin-workspace .visitor-stats { margin:24px 0; gap:16px; }
.admin-workspace .visitor-stats>div { background:#fff; border:1px solid #dce5ee; border-left:3px solid #246fa7; border-radius:6px; padding:22px; }
.admin-workspace .visitor-stats strong { font-variant-numeric:tabular-nums; }
.admin-workspace .report-filters,.admin-workspace .admin-toolbar { background:#edf3f8; border-radius:8px; padding:16px; }
.admin-workspace .notification-settings { background:#fff; border:1px solid #dce5ee; border-radius:10px; padding:28px; }
button:disabled { cursor:not-allowed; opacity:.55; }
@media(max-width:1000px) {
 .admin-navigation { flex-wrap:wrap; gap:16px; }
 .admin-navigation-links { order:3; flex-basis:100%; }
 .admin-store-link { margin-left:auto; }
}
@media(max-width:600px) {
 .admin-workspace { padding-top:16px; }
 .admin-navigation { padding:16px; margin-bottom:24px; }
 .admin-navigation-links { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
 .admin-navigation-links a { padding:11px 8px; font-size:12px; text-align:center; }
 .admin-workspace .admin-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:12px; }
 .admin-workspace .admin-stats { grid-template-columns:1fr 1fr; }
 .admin-workspace .admin-stats>div { padding:16px 12px; border-bottom:1px solid #e2e9f1; }
 .admin-workspace .admin-stats strong { font-size:20px; overflow-wrap:anywhere; }
 .admin-workspace .notification-settings { padding:18px; }
 .admin-workspace .admin-toolbar { padding:12px; }
 .admin-workspace .visitor-stats { grid-template-columns:1fr; }
}

/* Business dashboard and buyer feedback surfaces. */
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:24px 0; }
.metric-card { min-width:0; padding:22px; border:1px solid #E5EAF3; border-radius:18px; background:#fff; box-shadow:0 6px 24px #10244b05; }
.metric-label { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.metric-label h3 { margin:0; font-size:13px; line-height:1.5; color:#526681; overflow-wrap:anywhere; }
.metric-icon { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; border-radius:10px; background:#edf3ff; color:#1769F4; }
.metric-icon svg { width:22px; height:22px; }
.metric-card:nth-child(2) .metric-icon { color:#9815E8; background:#f5ecff; }
.metric-value { display:block; font:750 clamp(20px,2vw,28px)/1.3 'Manrope',sans-serif; color:#10244B; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.metric-card p { margin:12px 0 0; color:#65738a; font-size:12px; line-height:1.6; }
.revenue-chart { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; margin:24px 0; }
.chart-axis { height:200px; display:flex; flex-direction:column; justify-content:space-between; color:#65738a; font-size:10px; text-align:right; font-variant-numeric:tabular-nums; }
.chart-plot { min-width:0; }
.chart-plot svg { display:block; width:100%; height:200px; overflow:visible; }
.chart-plot rect:hover,.chart-plot rect:focus { fill:#9815E8; outline:none; }
.chart-dates { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:#65738a; margin-top:10px; }
.chart-empty { min-height:220px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:24px 12px; color:#65738a; background:#F5F7FF; border-radius:12px; margin:20px 0; }
.chart-empty>span { font-size:40px; color:#1769F4; margin-bottom:12px; }
.chart-empty h4 { margin:0 0 10px; font-size:15px; color:#10244B; }
.chart-empty p { margin:0; max-width:32ch; line-height:1.6; }
.top-products table { table-layout:fixed; }
.top-products th:first-child { width:34px; }
.top-products th:nth-child(2) { width:38%; }
.top-products th:last-child { width:62px; }
.admin-workspace .top-products th,.admin-workspace .top-products td { padding:12px 8px; overflow-wrap:anywhere; }
.product-rank { font-weight:700; color:#1769F4; }
.top-product-name { font-weight:600; line-height:1.6; }
.balance-panel { padding:24px; border:1px solid #E5EAF3; border-radius:18px; background:white; box-shadow:0 6px 24px #10244b05; }
.balance-panel .balance-stats { margin-bottom:0; }
.balance-panel .balance-stats strong { font-size:clamp(18px,1.7vw,24px); }
.reviews-heading p { color:#65738a; margin-bottom:0; }
.reviews-heading .button { background:linear-gradient(110deg,#1769F4,#9815E8); min-height:46px; }
.review-feed { max-width:1000px; }
.empty-review-label { display:block; color:#65738a; font-size:13px; margin:18px 0 8px; }
.reviews-empty .button { margin-top:12px; }
.rating-score { align-self:center; }
.review-assurance { line-height:1.7; }
.verified-review { border-radius:6px; padding:5px 8px; background:#ecf8f1; }
.review-compose .review-form { display:grid; gap:16px; }
.review-compose .review-form label { margin:0; }
@media(max-width:1100px) { .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .sales-analysis { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) { .rating-overview { padding:24px; grid-template-columns:110px minmax(0,1fr); gap:24px; } .review-assurance { grid-column:1/-1; padding:16px 0 0; border-left:0; border-top:1px solid #E5EAF3; } }
@media(max-width:600px) {
 .metric-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
 .metric-card { padding:20px; }
 .metric-value { font-size:26px; }
 .metric-label { margin-bottom:12px; }
 .admin-workspace .report-filters { display:grid; grid-template-columns:minmax(0,1fr); padding:16px; }
 .report-filters input,.report-filters button { width:100%; min-height:44px; }
 .balance-panel { padding:18px; }
 .balance-panel .balance-stats { grid-template-columns:minmax(0,1fr); }
 .balance-panel .section-heading { flex-wrap:wrap; gap:16px; }
 .balance-panel .section-heading button { width:100%; }
 .top-products table,.top-products tbody,.top-products tr,.top-products td { display:block; width:100%; }
 .top-products thead { display:none; }
 .admin-workspace .top-products tr { position:relative; padding:16px 12px 16px 40px; border-bottom:1px solid #E5EAF3; }
 .admin-workspace .top-products td { border:0; padding:4px 0; }
 .admin-workspace .top-products .product-rank { position:absolute; left:8px; top:20px; width:24px; }
 .top-products td[data-label]::before { content:attr(data-label); display:inline-block; color:#65738a; min-width:110px; font-size:12px; }
 .reviews-heading { gap:20px; }
 .reviews-heading .button { width:100%; }
 .rating-overview { grid-template-columns:minmax(0,1fr); padding:22px; }
 .rating-score { text-align:center; }
 .rating-distribution { width:100%; }
 .review-assurance { grid-column:auto; }
 .reviews-empty { padding:32px 20px; }
 .buyer-review-top>div { min-width:0; flex:1; }
 .verified-review { margin-left:0; }
 header .nav { gap:12px; }
 header .brand-logo img { max-width:180px; height:auto; }
 header .nav>nav { max-width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
}
.admin-mobile-menu { display:none; }
.admin-workspace .section-heading > div { min-width:0; flex:1 1 280px; }
.admin-workspace .section-heading p { max-width:65ch; margin:8px 0 0; }
.admin-workspace .admin-records td { overflow-wrap:anywhere; }
.delivery-picker { position:relative; width:208px; max-width:100%; padding-bottom:19px; }
.delivery-segments { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; margin:0; padding:4px; border:1px solid #d5e0ea; border-radius:8px; background:#f0f4f8; min-width:0; }
.delivery-choice { position:relative; margin:0; cursor:pointer; min-width:0; }
.delivery-choice input { position:absolute; width:1px; height:1px; opacity:0; }
.delivery-option { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:56px; padding:7px 5px; border:1px solid transparent; border-radius:5px; color:#536579; line-height:1.3; transition:background .15s,color .15s; }
.delivery-option strong { font-size:13px; font-weight:700; }
.delivery-option > span { font-size:11px; }
.delivery-choice:hover .delivery-option { background:#e2eaf3; }
.delivery-choice input:checked + .delivery-option { background:#fff; border-color:#b6cce2; color:#12466f; box-shadow:0 1px 3px #132b4612; }
.delivery-choice input[value=buyer]:checked + .delivery-option { background:#e5f6ee; border-color:#94cfb0; color:#145d3c; }
.delivery-choice input:focus-visible + .delivery-option { outline:2px solid #006cff; outline-offset:2px; }
.delivery-segments:disabled { opacity:.6; cursor:wait; }
.delivery-saving { position:absolute; bottom:0; left:0; font-size:11px; color:#536579; line-height:16px; }
@media(max-width:420px) { .admin-workspace .admin-records td[data-label="Pengiriman hasil"] { grid-template-columns:1fr; gap:8px; } .admin-workspace .admin-records td[data-label="Pengiriman hasil"] > * { grid-column:1; } .delivery-picker { width:100%; } }
@media(prefers-reduced-motion:reduce) { .delivery-option { transition:none; } }
.admin-workspace .admin-records .text-link { display:inline-flex; align-items:center; min-height:44px; padding:8px 10px; }
.admin-workspace .admin-records td:last-child { min-width:130px; }
.admin-order-flow { counter-reset:order-step; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; margin:24px 0; border-block:1px solid #dce5ee; }
.admin-order-flow li { counter-increment:order-step; padding:22px 18px; border-right:1px solid #dce5ee; }
.admin-order-flow li:last-child { border-right:0; }
.admin-order-flow li::before { content:counter(order-step); display:block; color:#246fa7; font-weight:700; margin-bottom:10px; }
.admin-order-flow strong,.admin-order-flow span { display:block; }
.admin-order-flow span { color:#55697d; line-height:1.6; font-size:14px; margin-top:6px; }
.admin-integration-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.admin-integration-grid article { background:#fff; border:1px solid #dce5ee; border-radius:12px; padding:24px; min-width:0; }
.admin-integration-grid h3 { margin:0 0 12px; }
.admin-integration-grid p { color:#55697d; line-height:1.7; }
.admin-integration-grid dl { margin:20px 0; }
.admin-integration-grid dt { color:#55697d; font-size:13px; margin-top:14px; }
.admin-integration-grid dd { margin:5px 0 0; overflow-wrap:anywhere; }
.admin-integration-grid code { font-size:13px; color:#164c79; }
.admin-workspace button:focus-visible,.admin-workspace a:focus-visible,.admin-mobile-menu select:focus-visible { outline:3px solid #246fa7; outline-offset:3px; }
@media(max-width:700px) {
 .admin-workspace .admin-tabs { display:none; }
 .admin-mobile-menu { display:grid; gap:8px; color:#55697d; font-size:13px; margin:20px 0; }
 .admin-mobile-menu select { width:100%; min-height:48px; border:1px solid #c7d5e3; border-radius:8px; padding:12px; background:#fff; color:#102c4a; font:inherit; font-size:16px; }
 .admin-workspace .section-heading { flex-wrap:wrap; gap:12px; }
 .admin-workspace .section-heading > .button,.admin-workspace .section-heading > .outline-button { flex:1 1 auto; text-align:center; }
 .admin-workspace .admin-toolbar { display:flex; flex-wrap:wrap; gap:12px; }
 .admin-workspace .admin-toolbar > label { flex:1 1 100px; min-width:0; }
 .admin-workspace .admin-toolbar > .admin-search { flex-basis:100%; }
 .admin-workspace .admin-toolbar input,.admin-workspace .admin-toolbar select { width:100%; min-width:0; min-height:44px; font-size:16px; }
 .admin-workspace .table-scroll:has(> .admin-records) { border:0; background:transparent; overflow:visible; }
 .admin-workspace .admin-records,.admin-workspace .admin-records tbody { display:block; width:100%; min-width:0; }
 .admin-workspace .admin-records thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .admin-workspace .admin-records tr { display:block; margin:0 0 14px; padding:6px 16px; background:#fff; border:1px solid #dce5ee; border-radius:10px; }
 .admin-workspace .admin-records td { display:grid; grid-template-columns:100px minmax(0,1fr); gap:4px 12px; width:auto; min-width:0; padding:12px 0; border-bottom:1px solid #edf3f8; text-align:left; white-space:normal; }
 .admin-workspace .admin-records td::before { content:attr(data-label); color:#55697d; font-size:12px; grid-column:1; }
 .admin-workspace .admin-records td > * { grid-column:2; min-width:0; }
 .admin-workspace .admin-records td:first-child { display:block; font-size:16px; }
 .admin-workspace .admin-records td:first-child::before { display:none; }
 .admin-workspace .admin-records td:last-child { border-bottom:0; min-width:0; }
 .admin-workspace .admin-records td[colspan] { display:block; }
 .admin-workspace .admin-records td[colspan]::before { display:none; }
 .admin-workspace .admin-records .status { justify-self:start; }
 .admin-workspace .admin-records .text-link { padding:6px 0; justify-self:start; }
 .admin-order-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .admin-order-flow li { padding:18px 12px; }
 .admin-order-flow li:nth-child(2) { border-right:0; }
 .admin-integration-grid { grid-template-columns:1fr; gap:14px; }
 .admin-integration-grid article { padding:20px; }
 .admin-workspace .profit-editor { display:flex; flex-wrap:wrap; }
 .admin-workspace .profit-editor label,.admin-workspace .profit-editor p { flex-basis:100%; }
}

.broadcast-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:start; }
.broadcast-panel { min-width:0; border:1px solid #dce5ee; border-radius:8px; padding:16px; background:#fff; }
.broadcast-panel form { display:grid; gap:12px; }
.broadcast-panel label { min-width:0; }
.broadcast-panel label:not(.checkbox),.broadcast-dialog label { display:grid; gap:6px; font-size:13px; font-weight:600; color:#344b61; }
.broadcast-panel input:not([type=checkbox]),.broadcast-panel textarea,.broadcast-dialog select { width:100%; min-width:0; padding:9px 11px; border:1px solid #cad7e4; border-radius:7px; background:#fff; color:#173d61; font:inherit; box-sizing:border-box; }
.broadcast-panel input:focus,.broadcast-panel textarea:focus,.broadcast-dialog select:focus { border-color:#1769f4; outline:3px solid #1769f41a; outline-offset:1px; }
.broadcast-panel textarea { resize:vertical; line-height:1.65; }
.broadcast-search { margin-bottom:12px; }
.broadcast-search>div { position:relative; }
.broadcast-search svg { width:20px; height:20px; position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#5e7893; pointer-events:none; }
.broadcast-panel .broadcast-search input { padding-left:40px; background:#f7fafd; min-height:42px; }
.broadcast-recipient { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid #e1e8ef; border-radius:7px; }
.broadcast-recipient:has(input:checked) { background:#eff6ff; border-color:#96bcf7; }
.broadcast-recipient .checkbox { display:flex; align-items:center; flex:1; gap:8px; margin:0; cursor:pointer; }
.broadcast-recipient input { width:18px; height:18px; accent-color:#1769f4; }
.broadcast-recipient span { display:grid; gap:2px; }
.broadcast-recipient strong { font-size:14px; color:#173d61; }
.broadcast-recipient small { color:#61768a; font-variant-numeric:tabular-nums; }
.broadcast-contact-editor { margin-top:18px; border-top:1px solid #e1e8ef; padding-top:18px; }
.broadcast-variables { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; }
.broadcast-variables code { background:#edf4ff; color:#1758b3; border:1px solid #d5e5fc; border-radius:5px; padding:5px 8px; }
.broadcast-variable-help { padding:10px 12px; border:1px solid #dce8f5; border-radius:7px; background:#f7fafd; color:#4f657a; font-size:12px; line-height:1.45; }
.broadcast-variable-help strong { color:#2d4962; }
.broadcast-variable-help ul { columns:2; column-gap:22px; margin:6px 0; padding-left:18px; }
.broadcast-variable-help li { break-inside:avoid; margin:2px 0; }
.broadcast-variable-help p { margin:6px 0 0; }
.broadcast-dialog { width:min(620px,calc(100vw - 32px)); max-height:90vh; padding:28px; border:0; border-radius:14px; overflow:auto; color:#173d61; }
.broadcast-dialog::backdrop { background:#07152fb3; }
.broadcast-dialog-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.broadcast-dialog-heading h2 { margin-bottom:8px; }
.broadcast-dialog-heading p,.broadcast-dialog .muted { font-size:13px; color:#61768a; }
.broadcast-dialog .form-actions { display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap; }
.broadcast-chat { border-radius:12px; overflow:hidden; border:1px solid #d5dfdc; margin:20px 0; }
.broadcast-chat-heading { display:flex; align-items:center; gap:12px; padding:14px 18px; background:#fff; }
.broadcast-chat-heading div { display:grid; gap:3px; }
.broadcast-chat-heading small { color:#6c7c76; font-size:12px; }
.broadcast-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#173d61; color:#fff; font-weight:700; }
.broadcast-chat-body { padding:24px 18px; background:#e9efeb; }
.broadcast-message { margin-left:24px; padding:14px; border-radius:10px 0 10px 10px; background:#dcf8c6; box-shadow:0 1px 2px #173d6112; }
.broadcast-message p { white-space:pre-wrap; overflow-wrap:anywhere; color:#20352f; margin-bottom:8px; }
.broadcast-message>small { display:block; text-align:right; font-size:10px; color:#5b7662; }
.broadcast-message img,.broadcast-message video { display:block; width:100%; max-height:280px; object-fit:contain; border-radius:6px; margin-bottom:12px; }
.broadcast-panel .form-actions { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.broadcast-panel input[type=file] { max-width:100%; }
.broadcast-panel .muted { font-size:13px; }
.broadcast-phones { display:grid; gap:8px; max-height:300px; overflow:auto; padding:8px 0; }
.broadcast-detail { margin-top:16px; }
.broadcast-detail .table-scroll { max-height:420px; overflow:auto; }
.broadcast-detail .section-heading { margin-bottom:12px; }
.broadcast-detail .form-actions { gap:8px; }
.broadcast-preview { background:#f2f6fa; border:1px solid #e1e8ef; border-radius:7px; padding:12px; max-width:520px; margin-bottom:12px; }
.broadcast-preview p { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
.broadcast-preview img,.broadcast-preview video { display:block; width:100%; max-height:360px; object-fit:contain; border-radius:6px; margin-bottom:16px; }
@media(max-width:760px) {
 .broadcast-grid { grid-template-columns:1fr; gap:16px; }
 .broadcast-panel { padding:14px; }
 .broadcast-variable-help ul { columns:1; }
 .broadcast-panel .section-heading { align-items:start; flex-direction:column; }
}

.push-diagnostics { margin: 16px 0; padding: 14px; border: 1px solid var(--ph-line, #dbe3f1); border-radius: 12px; background: var(--ph-blue-soft, #f5f8ff); }
.push-diagnostics strong { display: block; margin-bottom: 8px; }
.push-diagnostics dl { display: grid; grid-template-columns: minmax(150px, .4fr) 1fr; gap: 5px 12px; margin: 0; font-size: 12px; }
.push-diagnostics dt { color: var(--ph-muted); }
.push-diagnostics dd { margin: 0; color: var(--ph-text); }
.push-diagnostics dd[data-type="error"] { color: #b42318; }
.push-diagnostics dd[data-type="success"] { color: #087443; }
.push-android-guide { margin-top: 16px; padding: 14px; border: 1px solid #dbe3f1; border-radius: 12px; background: #f8fbff; color: var(--ph-text); font-size: 13px; line-height: 1.55; }
.push-android-guide strong { color: var(--ph-navy); }
.push-android-guide p { margin: 7px 0; }
.push-android-guide ol { margin: 8px 0 0 18px; padding: 0; }
.push-android-guide li + li { margin-top: 4px; }
@media(max-width:640px) {
    .checkout-grid.is-paying .order-summary { grid-row: auto; }
}
.product-page { padding-top: 28px; padding-bottom: 64px; }
.product-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; margin-top: 20px; }
.product-gallery { position: sticky; top: 110px; margin: 0; aspect-ratio: 1; border: 1px solid var(--ph-border); border-radius: 20px; background: var(--ph-white); overflow: hidden; box-shadow: var(--ph-shadow-card); }
.product-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-buy { display: grid; gap: 14px; min-width: 0; }
.product-buy .eyebrow { margin-bottom: 0; }
.product-buy h1 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; overflow-wrap: anywhere; }
.product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; color: var(--ph-muted); font-size: 13px; }
.product-meta > span + span::before { content: "·"; margin: 0 10px; color: var(--ph-input-border); }
.product-meta-rating { color: var(--ph-text); font-weight: 700; }
.product-meta-rating > span { color: var(--ph-gold); }
.product-meta-rating small { color: var(--ph-muted); font-weight: 400; }
.product-meta .is-low { color: var(--ph-gold-text); font-weight: 700; }
.product-meta .is-out { color: var(--ph-danger); font-weight: 700; }
.product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 16px 18px; border-radius: var(--ph-radius-control); background: var(--ph-white); border: 1px solid var(--ph-border); }
.product-price strong { font: 800 clamp(26px, 3vw, 32px)/1.1 'Manrope', sans-serif; color: var(--ph-link); font-variant-numeric: tabular-nums; }
.product-price small { color: var(--ph-muted); font-size: 13px; }
.product-buy-form { display: grid; gap: 16px; }
.product-buy-form .button { justify-self: stretch; min-height: 50px; font-size: 15px; }
.product-buy-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--ph-border); font-size: 14px; }
.product-buy-total b { font: 800 20px 'Manrope', sans-serif; color: var(--ph-navy); font-variant-numeric: tabular-nums; }
.product-details { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; margin-top: 48px; align-items: start; }
.product-details-main { display: grid; gap: 20px; min-width: 0; }
.product-section { padding: 24px; border: 1px solid var(--ph-border); border-radius: var(--ph-radius-control); background: var(--ph-white); min-width: 0; }
.product-section h2 { margin: 0 0 12px; font-size: 18px; }
.product-prose { color: var(--ph-text); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.product-reviews .editor-card-head { margin-bottom: 12px; }
.product-reviews .editor-card-head h2 { margin: 0; }
.product-reviews .buyer-review-card { box-shadow: none; margin-bottom: 12px; padding: 18px; }
@media(max-width:900px) {
    .product-hero, .product-details { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .product-gallery { position: static; max-width: 420px; }
}
@media(max-width:640px) {
    .product-page { padding-top: 18px; }
    .product-section { padding: 18px; }
    .product-buy-form .form-row { grid-template-columns: 1fr; }
}
/* Chat assistant popup */
.chat-assistant { --chat-gap: 16px; position: relative; z-index: 900; font-size: 14px; }
.chat-launcher { position: fixed; right: calc(var(--chat-gap) + env(safe-area-inset-right, 0px)); bottom: calc(var(--chat-gap) + env(safe-area-inset-bottom, 0px)); z-index: 901; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; color: var(--ph-white); background: var(--ph-button-gradient); box-shadow: 0 10px 28px rgb(108 53 255 / 32%); font-weight: 700; font-size: 14px; }
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgb(108 53 255 / 38%); }
.chat-launcher.is-open { background: var(--ph-navy); box-shadow: 0 8px 22px rgb(7 21 47 / 30%); }
.chat-panel { position: fixed; right: calc(var(--chat-gap) + env(safe-area-inset-right, 0px)); bottom: calc(var(--chat-gap) + 64px + env(safe-area-inset-bottom, 0px)); z-index: 902; display: flex; flex-direction: column; width: min(380px, calc(100vw - 2 * var(--chat-gap))); height: min(620px, calc(100dvh - 120px)); border: 1px solid var(--ph-border); border-radius: 20px; background: var(--ph-white); box-shadow: 0 24px 60px rgb(7 21 47 / 22%); overflow: hidden; transform-origin: bottom right; }
.chat-enter, .chat-leave { transition: opacity .18s ease, transform .18s ease; }
.chat-enter-start { opacity: 0; transform: translateY(12px) scale(.98); }
.chat-enter-end { opacity: 1; transform: none; }
.chat-header { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; color: var(--ph-white); background: var(--ph-dark-gradient); }
.chat-avatar { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; background: var(--ph-button-gradient); font: 800 17px 'Manrope', sans-serif; }
.chat-title { display: grid; gap: 2px; min-width: 0; flex: 1; }
.chat-title strong { font: 800 15px 'Manrope', sans-serif; }
.chat-title small { color: #c7d0e6; font-size: 12px; }
.chat-online { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #35d39a; vertical-align: 1px; }
.chat-icon-button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; color: var(--ph-white); background: rgb(255 255 255 / 8%); }
.chat-icon-button:hover { background: rgb(255 255 255 / 16%); }
.chat-log { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; background: var(--ph-bg); -webkit-overflow-scrolling: touch; }
.chat-message { display: flex; flex-direction: column; gap: 6px; max-width: 86%; }
.chat-message.is-bot { align-self: flex-start; }
.chat-message.is-user { align-self: flex-end; align-items: flex-end; }
.chat-bubble { padding: 10px 14px; border-radius: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.chat-message.is-bot .chat-bubble { border: 1px solid var(--ph-border); border-bottom-left-radius: 6px; color: var(--ph-text); background: var(--ph-white); }
.chat-message.is-user .chat-bubble { border-bottom-right-radius: 6px; color: var(--ph-white); background: var(--ph-link); }
.chat-bubble a { color: var(--ph-link); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-quick button { padding: 8px 12px; border: 1px solid var(--ph-input-border); border-radius: 999px; color: var(--ph-navy); background: var(--ph-white); font-size: 13px; }
.chat-quick button:hover { border-color: var(--ph-purple); color: var(--ph-purple); }
.chat-products { display: grid; gap: 6px; width: 100%; }
.chat-product { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--ph-border); border-radius: 12px; background: var(--ph-white); }
.chat-product:hover { border-color: var(--ph-purple); }
.chat-product b { color: var(--ph-navy); font-size: 13px; overflow-wrap: anywhere; }
.chat-product span { grid-row: span 2; align-self: center; color: var(--ph-link); font-weight: 800; font-size: 13px; white-space: nowrap; }
.chat-product small { color: var(--ph-muted); font-size: 11px; }
.chat-product em { grid-column: 1 / -1; padding-top: 6px; margin-top: 4px; border-top: 1px dashed var(--ph-border); color: var(--ph-text); font-size: 12px; font-style: normal; line-height: 1.5; }
.chat-typing { display: flex; gap: 4px; padding: 14px 16px; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ph-muted); animation: chat-dot 1s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat-form { display: grid; gap: 8px; padding: 12px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ph-border); background: var(--ph-white); }
.chat-input { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--ph-input-border); border-radius: 16px; background: var(--ph-white); }
.chat-input:focus-within { border-color: var(--ph-purple); box-shadow: 0 0 0 3px var(--ph-purple-soft); }
.chat-form .chat-input textarea { flex: 1; width: auto; min-height: 0; border-radius: 0; box-shadow: none; min-width: 0; max-height: 120px; padding: 8px 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--ph-text); font-size: 16px; line-height: 1.4; }
.chat-form .chat-input textarea:focus, .chat-form .chat-input textarea:focus-visible { outline: 0; border: 0; box-shadow: none; }
.chat-send { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border: 0; border-radius: 12px; color: var(--ph-white); background: var(--ph-button-gradient); }
.chat-error { margin: 0; color: var(--ph-danger); font-size: 12px; }
.chat-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--ph-muted); font-size: 11px; }
.chat-contact a { display: inline-flex; align-items: center; gap: 4px; color: var(--ph-link); font-weight: 700; }
.chat-contact span { flex-basis: 100%; }
@media (max-width: 640px) {
    .chat-assistant { --chat-gap: 14px; }
    .chat-launcher { width: 56px; height: 56px; padding: 0; justify-content: center; }
    .chat-launcher-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .chat-launcher.is-open { display: none; }
    .chat-panel { inset: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); background: var(--ph-dark); }
    .chat-header { padding-top: 12px; }
    .chat-message { max-width: 90%; }
    html.chat-assistant-open, html.chat-assistant-open body { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .chat-enter, .chat-leave { transition: none; }
    .chat-typing span { animation: none; }
}