.preview-eyebrow,
.preview-label,
.preview-workspace-kicker { display: inline-block; color: #8a6500; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.preview-eyebrow { margin-bottom: 8px; }
.preview-page { padding: 32px 0 72px; }
.preview-intro,
.preview-next { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 28px 30px; border: 1px solid rgba(17,24,39,.1); border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(11,15,24,.05); }
.preview-intro h2,
.preview-next h2 { margin: 8px 0 0; color: var(--main-color); font-size: 25px; line-height: 1.35; }
.preview-intro p { max-width: 650px; margin: 8px 0 0; color: #596170; font-size: 14px; line-height: 1.6; }
.preview-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.preview-workspace { margin-top: 22px; padding: 28px 30px 30px; border: 1px solid #dfe4ea; border-radius: 8px; background: #f8fafc; }
.preview-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.preview-workspace-head h2 { margin: 6px 0 0; color: var(--main-color); font-size: 22px; }
.preview-demo-badge { padding: 6px 10px; border-radius: 999px; background: #fff4cf; color: #8a6500; font-size: 11px; font-weight: 700; white-space: nowrap; }
.preview-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.preview-summary-item { display: grid; gap: 5px; padding: 16px 18px; border: 1px solid #e3e8ee; border-radius: 6px; background: #fff; }
.preview-summary-item span, .preview-summary-item small { color: #717b8b; font-size: 12px; }
.preview-summary-item strong { color: var(--main-color); font-size: 24px; line-height: 1.1; }
.preview-table-wrap { overflow-x: auto; margin-top: 14px; border: 1px solid #e3e8ee; border-radius: 6px; background: #fff; }
.preview-table { width: 100%; min-width: 610px; border-collapse: collapse; color: #4b5563; font-size: 13px; }
.preview-table th, .preview-table td { padding: 13px 16px; border-bottom: 1px solid #eef0f3; text-align: left; white-space: nowrap; }
.preview-table th { background: #f8fafc; color: #717b8b; font-size: 11px; font-weight: 600; }
.preview-table tr:last-child td { border-bottom: 0; }
.preview-status { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.preview-status.is-ready { background: #fff4cf; color: #8a6500; }
.preview-status.is-moving { background: #e7f7f0; color: #14795e; }
.preview-status.is-complete { background: #eef2ff; color: #4654b8; }
.preview-timeline { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.preview-timeline > i { color: #aeb7c3; font-style: normal; }
.preview-timeline-step { display: grid; grid-template-columns: 28px minmax(0,1fr); column-gap: 9px; align-items: center; flex: 1 1 0; }
.preview-timeline-step span { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e7ebf0; color: #667085; font-size: 11px; font-weight: 700; }
.preview-timeline-step strong { color: var(--main-color); font-size: 13px; }
.preview-timeline-step small { margin-top: 3px; color: #717b8b; font-size: 11px; line-height: 1.4; }
.preview-timeline-step.is-done span { background: #e7f7f0; color: #14795e; }
.preview-timeline-step.is-current span { background: var(--primary); color: var(--main-color); }
.preview-next { align-items: start; margin-top: 22px; }
.preview-next ul { display: grid; flex: 1 1 auto; gap: 9px; margin: 0; padding: 0; list-style: none; }
.preview-next li { display: flex; gap: 12px; color: #596170; font-size: 13px; line-height: 1.5; }
.preview-next li strong { min-width: 104px; color: var(--main-color); }
.preview-next > .button { align-self: center; flex: 0 0 auto; white-space: nowrap; }
.preview-feature-nav { display: flex; gap: 8px; margin: 22px 0 12px; overflow-x: auto; }
.preview-feature-nav a { flex: 0 0 auto; padding: 8px 12px; border: 1px solid #dfe4ea; border-radius: 999px; background: #fff; color: #596170; font-size: 12px; font-weight: 700; text-decoration: none; }
.preview-feature-nav a:hover, .preview-feature-nav a:focus-visible { border-color: var(--primary); color: var(--main-color); }
.preview-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.preview-feature-panel { min-width: 0; padding: 22px; border: 1px solid #dfe4ea; border-radius: 8px; background: #fff; }
.preview-feature-panel--wide { grid-column: 1 / -1; }
.preview-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.preview-panel-head h2 { margin: 5px 0 0; color: var(--main-color); font-size: 19px; }
.preview-panel-note { color: #7b8492; font-size: 11px; white-space: nowrap; }
.preview-dashboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.preview-dashboard-stats div { display: grid; gap: 4px; padding: 12px; border: 1px solid #edf0f3; border-radius: 6px; background: #fbfcfd; }
.preview-dashboard-stats span { color: #717b8b; font-size: 11px; }
.preview-dashboard-stats strong { color: var(--main-color); font-size: 21px; }
.preview-dashboard-stats em { color: #7b8492; font-size: 10px; font-style: normal; }
.preview-dashboard-bar { display: flex; overflow: hidden; height: 10px; margin-top: 20px; border-radius: 999px; background: #edf0f3; }
.preview-dashboard-bar span:nth-child(1) { background: #f5ca54; }
.preview-dashboard-bar span:nth-child(2) { background: #69c6a5; }
.preview-dashboard-bar span:nth-child(3) { background: #9aa7e9; }
.preview-dashboard-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: #717b8b; font-size: 11px; }
.preview-dashboard-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; }
.preview-dashboard-legend i.is-ready { background: #f5ca54; }
.preview-dashboard-legend i.is-moving { background: #69c6a5; }
.preview-dashboard-legend i.is-complete { background: #9aa7e9; }
.preview-calendar-head, .preview-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.preview-calendar-head { margin-top: 18px; color: #8a929e; font-size: 10px; }
.preview-calendar-grid { gap: 4px; margin-top: 7px; }
.preview-calendar-grid > span { position: relative; display: grid; place-items: center; min-height: 28px; border-radius: 5px; color: #596170; font-size: 11px; }
.preview-calendar-grid > span.is-muted { color: #c2c8d0; }
.preview-calendar-grid > span.is-today { background: #fff4cf; color: var(--main-color); font-weight: 700; }
.preview-calendar-grid > span.has-count em { position: absolute; right: 3px; bottom: 2px; color: #14795e; font-size: 8px; font-style: normal; font-weight: 700; }
.preview-mini-list { display: grid; gap: 0; margin-top: 16px; border-top: 1px solid #edf0f3; }
.preview-mini-list > div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf0f3; font-size: 11px; }
.preview-mini-list__head { padding: 9px 0 8px !important; border-bottom-color: #d8dee7 !important; color: #667085; font-size: 11px !important; font-weight: 700; }
.preview-mini-list__head span:last-child { text-align: right; }
.preview-mini-list span { color: #596170; }
.preview-mini-list b { color: var(--main-color); font-weight: 600; }
.preview-mini-list em, .preview-shop-order-row em { padding: 4px 6px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; }
.preview-mini-list em.is-ready, .preview-shop-order-row em.is-ready { background: #fff4cf; color: #8a6500; }
.preview-mini-list em.is-moving { background: #e7f7f0; color: #14795e; }
.preview-mini-list em.is-complete { background: #eef2ff; color: #4654b8; }
.preview-panel-footnote { margin: 12px 0 0; color: #7b8492; font-size: 11px; }
.preview-shop-order-row { display: grid; grid-template-columns: .8fr 1.1fr 1.5fr auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid #edf0f3; color: #596170; font-size: 12px; }
.preview-shop-order-row:first-of-type { margin-top: 15px; border-top: 1px solid #edf0f3; }
.preview-shop-order-head { color: #8a929e; font-size: 10px; font-weight: 700; }
.preview-shop-order-row em.is-warning { background: #fff0e4; color: #b45309; }
.preview-alert { display: flex; align-items: center; gap: 18px; margin-top: 14px; padding: 15px 18px; border: 1px solid #f0d58a; border-radius: 8px; background: #fffaf0; }
.preview-alert > div { display: grid; gap: 4px; flex: 0 0 auto; }
.preview-alert strong { color: var(--main-color); font-size: 13px; }
.preview-alert p { flex: 1 1 auto; margin: 0; color: #717b8b; font-size: 12px; }
.preview-alert-badge { color: #8a6500; font-size: 10px; font-weight: 700; white-space: nowrap; }
@media (max-width: 840px) { .preview-intro, .preview-next { align-items: start; flex-direction: column; } .preview-next > .button { align-self: flex-start; } }
@media (max-width: 840px) { .preview-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .preview-alert { align-items: start; flex-wrap: wrap; } }
@media (max-width: 620px) { .preview-page { padding: 22px 0 44px; } .preview-intro, .preview-workspace, .preview-next { padding: 22px 16px; } .preview-intro h2, .preview-next h2 { font-size: 21px; } .preview-actions, .preview-actions .button, .preview-next > .button { width: 100%; } .preview-actions .button, .preview-next > .button { text-align: center; } .preview-summary-grid { gap: 8px; } .preview-summary-item { padding: 13px 10px; } .preview-summary-item strong { font-size: 20px; } .preview-timeline { align-items: stretch; flex-direction: column; gap: 12px; } .preview-timeline > i { display: none; } .preview-next li { flex-direction: column; gap: 2px; } .preview-feature-grid { grid-template-columns: 1fr; } .preview-feature-panel--wide { grid-column: auto; } .preview-feature-panel { padding: 18px 14px; } .preview-shop-order-row { min-width: 520px; } .preview-shop-order-row:first-of-type, .preview-feature-panel#preview-shop-orders { overflow-x: auto; } .preview-alert { align-items: start; flex-direction: column; gap: 7px; } }

/* Preview pages need a stronger reading hierarchy than the compact admin UI. */
.preview-page { color: #344054; }
.preview-screen-caption {
    margin: 5px 0 0;
    color: #526071;
    font-size: 12px;
    line-height: 1.5;
}
.preview-workspace-head .preview-screen-caption { max-width: 520px; }
.preview-workspace[hidden] { display: none; }
.preview-feature-grid > .preview-workspace { grid-column: 1 / -1; margin-top: 0; }
.preview-intro, .preview-next {
    border-color: #cbd5e1;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}
.preview-intro h2, .preview-next h2, .preview-workspace-head h2,
.preview-panel-head h2 { color: #111827; }
.preview-intro p, .preview-next li, .preview-summary-item span,
.preview-summary-item small, .preview-table, .preview-panel-footnote,
.preview-alert p { color: #526071; }
.preview-workspace {
    border-color: #b9c6d6;
    background: #eef3f8;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .05);
}
.preview-workspace-kicker, .preview-label, .preview-eyebrow { color: #806000; }
.preview-summary-item {
    border-color: #cbd5e1;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
}
.preview-summary-item strong, .preview-next li strong,
.preview-mini-list b { color: #111827; }
.preview-table-wrap, .preview-feature-panel {
    border-color: #cbd5e1;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}
.preview-table { color: #344054; font-size: 14px; }
.preview-table th { color: #475467; font-size: 12px; }
.preview-table td { border-color: #e4e7ec; }
.preview-table tbody tr:hover { background: #f8fafc; }
.preview-status, .preview-demo-badge { border: 1px solid rgba(15, 23, 42, .08); }
.preview-timeline-step strong { color: #1f2937; font-size: 14px; }
.preview-timeline-step small { color: #526071; font-size: 12px; }
.preview-feature-nav a {
    border-color: #cbd5e1;
    color: #344054;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
}
.preview-feature-nav a:hover, .preview-feature-nav a:focus-visible {
    border-color: #f6b900;
    background: #fffaf0;
    color: #111827;
}
.preview-feature-panel { padding: 24px; }
.preview-feature-grid > .preview-workspace { padding: 24px; }
.preview-panel-note { color: #526071; font-size: 12px; }
.preview-panel-head .preview-screen-caption { max-width: 430px; }
.preview-workspace-head > div, .preview-panel-head > div { min-height: 66px; }
.preview-dashboard-stats div { border-color: #d8dee7; background: #f8fafc; }
.preview-dashboard-stats span, .preview-dashboard-stats em,
.preview-dashboard-legend, .preview-calendar-head, .preview-panel-note { color: #526071; }
.preview-dashboard-stats strong { color: #111827; font-size: 24px; }
.preview-calendar-grid { gap: 5px; }
.preview-calendar-grid > span {
    min-height: 34px;
    border: 1px solid transparent;
    color: #344054;
    font-size: 12px;
}
.preview-calendar-grid > span:hover { border-color: #cbd5e1; background: #f8fafc; }
.preview-calendar-grid > span.is-today { border-color: #f0c14b; }
.preview-mini-list > div, .preview-shop-order-row { border-color: #e4e7ec; }
.preview-mini-list span, .preview-shop-order-row { color: #344054; }
.preview-mini-list > div { font-size: 12px; }
.preview-mini-list em, .preview-shop-order-row em { border: 1px solid rgba(15, 23, 42, .08); }
.preview-shop-order-head { color: #526071; font-size: 11px; }
.preview-alert {
    border-color: #e4bd55;
    background: #fffaf0;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
}
.preview-alert strong { color: #111827; font-size: 14px; }
.preview-alert p { font-size: 13px; }

@media (max-width: 620px) {
    .preview-feature-panel { padding: 20px 16px; }
    .preview-table th, .preview-table td { padding: 12px 13px; }
    .preview-dashboard-stats strong { font-size: 21px; }
}

/* Show the public demo as readable cards instead of a dense admin table. */
.preview-order-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.preview-order-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
}
.preview-order-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.preview-order-card__head strong {
    color: #111827;
    font-size: 14px;
    letter-spacing: .01em;
}
.preview-order-card dl {
    display: grid;
    gap: 9px;
    margin: 15px 0 0;
}
.preview-order-card dl div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-top: 9px;
    border-top: 1px solid #edf0f3;
}
.preview-order-card dt {
    color: #667085;
    font-size: 11px;
}
.preview-order-card dd {
    margin: 0;
    color: #344054;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}
.preview-feature-panel {
    position: relative;
    overflow: hidden;
}
.preview-feature-panel::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: #f6b900;
    content: "";
}

@media (max-width: 840px) {
    .preview-order-card-grid { grid-template-columns: 1fr; }
}

.preview-feature-nav button {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #344054;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}
.preview-feature-nav button:hover,
.preview-feature-nav button:focus-visible,
.preview-feature-nav button.is-active {
    border-color: #f6b900;
    background: #fff8df;
    color: #111827;
}
.preview-feature-nav button:focus-visible { outline: 3px solid rgba(246, 185, 0, .3); outline-offset: 2px; }
.preview-feature-grid.is-single-view { grid-template-columns: minmax(0, 1fr); }
.preview-feature-panel[hidden] { display: none; }