:root {
    --flow-ink: #241635;
    --flow-muted: #685b77;
    --flow-border: #eae3f1;
    --flow-soft: #f6f0ff;
    --flow-accent: #683bc5;
    --flow-radius: 15px;
    --flow-control-radius: 9px;
    --flow-space: clamp(13px, 2vw, 22px);
    --flow-width: 900px;
    --flow-title: clamp(22px, 3.5vw, 30px);
}

main.wrap > .pagehead:has(+ .template-detail) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "back back" "title favorite" "meta favorite";
    align-items: center;
    gap: 3px 12px;
    margin: 17px 0 12px;
    color: var(--flow-ink);
}
.pagehead:has(+ .template-detail) > a { grid-area: back; justify-self: start; color: var(--flow-muted); font-size: 13px; }
.pagehead:has(+ .template-detail) > .flow-breadcrumb {
    grid-area: back; display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    margin: 0; color: var(--flow-muted); font-size: 12px; line-height: 1.4;
}
.flow-breadcrumb a { color: inherit; }
.flow-breadcrumb a:hover { color: var(--flow-accent); text-decoration: underline; }
.pagehead:has(+ .template-detail) > h1 { grid-area: title; margin: 0; font-size: var(--flow-title); line-height: 1.17; overflow-wrap: anywhere; }
.pagehead:has(+ .template-detail) > .row { display: contents; }
.pagehead:has(+ .template-detail) > .row > .muted { grid-area: meta; font-size: 12px; }
.pagehead:has(+ .template-detail) .favorite-inline {
    grid-area: favorite; display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 7px 10px; border-radius: var(--flow-control-radius); white-space: nowrap;
}
.pagehead:has(+ .template-detail) .favorite-inline svg { width: 17px; height: 17px; flex: none; }
main.wrap .template-detail { gap: clamp(12px, 2.2vw, 23px); }
.template-detail .template-controls-compact {
    padding: var(--flow-space) !important;
    border: 1px solid var(--flow-border); border-radius: var(--flow-radius);
}
.template-detail .template-controls-compact .step-label { margin-bottom: 7px; }
.template-detail .template-controls-compact .step-label #identity-help { margin-top: 1px; }
.template-detail .template-controls-compact .identity-upload { min-height: 102px; padding: 9px; gap: 5px; }
.template-detail .template-controls-compact .upload-note { margin: 6px 0 10px; }
.template-detail .template-controls-compact .option-group { margin: 12px 0; }
.template-detail .template-controls-compact .quantity-note { margin-top: 5px; }
.template-detail .template-controls-compact .quantity-options { grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); }
.template-detail .template-controls-compact .quantity-option { min-height: 43px; border-radius: var(--flow-control-radius); }
.template-detail .template-controls-compact .consent { margin: 9px 0 !important; }
.template-detail .template-controls-compact #generate-button { min-height: 46px; border-radius: var(--flow-control-radius); }
.template-detail .quality-options { gap: 7px; }
.template-detail .quality-options .flow-quality-source[hidden] { display: none !important; }
.template-detail .template-controls-compact .flow-quality-option {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
    min-width: 0; min-height: 59px; margin: 0; padding: 7px 9px; gap: 7px;
    cursor: pointer; border: 1px solid var(--flow-border); border-radius: var(--flow-control-radius);
    background: #fff; color: var(--flow-ink);
}
.template-detail .template-controls-compact .flow-quality-option[data-flow-tier="premium"] { background: #fbf7ff; }
.template-detail .template-controls-compact .flow-quality-option.active {
    border-color: var(--flow-accent); background: var(--flow-soft); box-shadow: none;
}
.template-detail .flow-quality-option:has(input:focus-visible) { outline: 2px solid var(--flow-accent); outline-offset: -2px; }
.template-detail .flow-quality-option:has(:disabled) { opacity: .6; cursor: default; }
.template-detail .flow-quality-option > input[type="radio"] {
    appearance: auto; width: 16px; height: 16px; flex: 0 0 16px; padding: 0; margin: 0; accent-color: var(--flow-accent);
}
.template-detail .flow-quality-option > span { min-width: 0; }
.template-detail .flow-quality-option strong { font-size: 13px; line-height: 1.3; }
.template-detail .template-controls-compact .flow-quality-option small { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--flow-muted); }

main.wrap > .checkout-head {
    max-width: var(--flow-width); margin: 0 auto; padding: 24px 0 12px;
    color: var(--flow-ink); text-align: left;
}
main.wrap > .checkout-head h1 { margin: 3px 0; font-size: var(--flow-title); line-height: 1.17; }
main.wrap > .checkout-head p { margin: 4px 0 0; color: var(--flow-muted); font-size: 14px; }
main.wrap > .checkout-card {
    max-width: var(--flow-width); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    margin: 0 auto 40px; box-shadow: none; border: 1px solid var(--flow-border); border-radius: var(--flow-radius);
}
.checkout-card :is(.qr-side, .checkout-summary) { min-width: 0; padding: var(--flow-space); }
.checkout-card .qr-side { background: #fcfaff; border-color: var(--flow-border); }
.checkout-card .checkout-summary { color: var(--flow-ink); }
.checkout-card .checkout-summary h2 { margin: 4px 0; font-size: 18px; line-height: 1.35; }
.checkout-card .checkout-amount { margin: 4px 0 12px; color: var(--flow-accent); font-size: clamp(23px, 4vw, 31px); }
.checkout-card .checkout-summary dl {
    display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.5fr); gap: 7px 9px;
    margin: 0 0 12px; padding: 10px; border: 1px solid var(--flow-border); border-radius: var(--flow-control-radius);
}
.checkout-card .checkout-summary dt { margin: 0; color: var(--flow-muted); font-size: 12px; }
.checkout-card .checkout-summary dd { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.checkout-card .checkout-summary .code-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.checkout-card #copy-code { min-height: 34px; padding: 4px 8px; border-radius: var(--flow-control-radius); }
.checkout-card .checkout-summary .secondary { min-height: 44px; border-radius: var(--flow-control-radius); }
.checkout-card .qr-side .waiting-line { margin: 10px 0 4px; }
.checkout-card .qr-side #pay-help { margin: 0; color: var(--flow-muted); font-size: 12px; }

.gai-order .gai-kicker { color: var(--flow-muted); font-size: .8rem; font-weight: 600; letter-spacing: 0; }
.gai-order .gai-order-head h1 { font-size: var(--flow-title); }
.gai-order .gai-workspace {
    border-color: var(--flow-border); border-radius: var(--flow-radius); padding: var(--flow-space);
}
.gai-order :is(.gai-reuse, .gai-download, .gai-results li) { border-radius: var(--flow-control-radius); }
.gai-order .gai-download:not(.gai-bulk) { background: var(--flow-accent); }
.gai-order .gai-bulk { border-color: var(--flow-border); }
.gai-order .gai-private { border-color: var(--flow-border); }
.gai-order .gai-counter, .gai-order .gai-badge:not([data-state="completed"], [data-state="failed"], [data-state="review"]) { background: var(--flow-soft); }

#photos .order-list-item {
    padding: 9px; gap: 10px; margin-top: 7px;
    border: 1px solid var(--flow-border); border-radius: var(--flow-control-radius);
}
#photos .order-list-item > img { width: 55px; height: 69px; border-radius: 7px; }
#photos .order-list-item h3 { margin: 3px 0; color: var(--flow-ink); }

@media (max-width: 760px) {
    main.wrap > .pagehead:has(+ .template-detail) { margin: 12px 0 10px; }
    main.wrap .template-detail { gap: 12px; }
    .pagehead:has(+ .template-detail) .favorite-inline { width: 44px; justify-content: center; gap: 0; padding-inline: 0; font-size: 0; }
    main.wrap > .checkout-head { padding-top: 16px; }
    main.wrap > .checkout-card { grid-template-columns: minmax(0, 1fr); max-width: 510px; }
    main.wrap > .checkout-head { max-width: 510px; }
}
@media (max-width: 380px) {
    .template-detail .template-controls-compact .flow-quality-option { gap: 5px; padding-inline: 6px; }
}