body { font-family: system-ui, sans-serif; margin: 0; color: #212529; }
header { align-items: center; display: flex; gap: 2rem; padding: 1rem 2rem; background: #212529; }
header a { color: white; text-decoration: none; }
header nav { display: flex; gap: 1rem; margin-right: auto; }
header nav a { color: #cbd3da; }
header nav a.active { color: white; font-weight: 700; }
.api-wakeup-notice { background: #fff3cd; border-bottom: 1px solid #ffda6a; color: #664d03; font-size: .9rem; padding: .6rem 2rem; }
main { padding: 2rem; }
.summary-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.summary-grid article, .trend-card { border: 1px solid #dee2e6; border-radius: .5rem; padding: 1rem; background: white; }
.summary-grid h2 { font-size: 1rem; margin-top: 0; }
.summary-grid strong { font-size: 1.5rem; }
.summary-grid p { margin: .3rem 0 0; color: #53616d; }
.pace, .time-progress { margin-top: .8rem; }
.pace-label, .time-label { display: flex; font-size: .85rem; justify-content: space-between; }
.pace small, .time-progress small { color: #53616d; font-size: .75rem; }
.pace-track, .time-track { background: #e9ecef; border-radius: 1rem; height: .5rem; margin: .3rem 0; overflow: hidden; position: relative; }
.pace-value, .time-track span { border-radius: inherit; display: block; height: 100%; }
.pace-target { background: #39424e; height: 100%; opacity: .65; position: absolute; width: 2px; z-index: 1; }
.good { color: #157347; } .pace-value.good { background: #198754; }
.watch { color: #a96300; } .pace-value.watch { background: #fd7e14; }
.behind { color: #b02a37; } .pace-value.behind { background: #dc3545; }
.time-track span { background: #0d6efd; }
.backup-status { color: #53616d; font-size: .9rem; margin: 1rem 0; }
.trend-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trend-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.trend-card h2 { font-size: 1rem; margin: 0; }
.trend-card svg { display: block; height: 11rem; margin-top: 1rem; width: 100%; }
.axis { stroke: #d7dee5; stroke-width: 1; }
.axis-label { fill: #53616d; font-size: 13px; }
.axis-title { fill: #53616d; font-size: 12px; font-weight: 600; }
.gridline { stroke: #edf1f5; stroke-width: 1; }
.trend-area { fill: #0d6efd; fill-opacity: .08; }
.trend-line { fill: none; stroke: #0d6efd; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.trend-range { color: #53616d; display: flex; font-size: .8rem; justify-content: space-between; }
.muted { color: #53616d; min-height: 11rem; padding-top: 4rem; text-align: center; }
.error { color: #b02a37; }
.items-toolbar { align-items: end; border: 1px solid #dee2e6; border-radius: .5rem; display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; padding: .75rem 1rem; }
.items-toolbar label { display: grid; font-size: .85rem; font-weight: 600; gap: .25rem; }
.items-toolbar input, .items-toolbar select, .items-toolbar button, .pagination button { border: 1px solid #adb5bd; border-radius: .25rem; font: inherit; padding: .35rem .5rem; }
.items-toolbar input, .items-toolbar select { min-width: 11rem; }
.items-toolbar .checkbox-label { align-items: center; display: flex; min-height: 2.3rem; }
.items-toolbar .checkbox-label input { min-width: auto; }
.items-toolbar button, .pagination button { background: #0d6efd; color: white; }
.items-toolbar .toolbar-button { align-self: end; }
.items-count { color: #53616d; margin: .5rem 0; }
.items-toolbar:first-child { margin-top: -1rem; }
.items-table-wrapper { border: 1px solid #dee2e6; border-radius: .5rem; overflow-x: auto; }
.items-table { border-collapse: collapse; font-size: .8rem; min-width: 63rem; width: 100%; }
.items-table th, .items-table td { border-bottom: 1px solid #dee2e6; line-height: 1.15; padding: .2rem .6rem; text-align: left; vertical-align: middle; }
.items-table th { background: #f8f9fa; white-space: nowrap; }
.items-table th button { background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 0; }
.items-table .item-link { background: transparent; border: 0; color: #06c; cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.item-actions { white-space: nowrap; }
.item-actions button { background: white; border: 1px solid #adb5bd; border-radius: 50%; color: #53616d; cursor: pointer; font: inherit; height: 1.65rem; margin-right: .2rem; padding: 0; width: 1.65rem; }
.item-actions button.active { background: #dbeafe; border-color: #0d6efd; color: #084298; }
.item-actions button.danger { color: #b02a37; }
.status-pill { border: 1px solid transparent; border-radius: 1rem; display: inline-block; font-size: .75rem; line-height: 1.2; padding: .2rem .5rem; white-space: nowrap; }
.pill-good { background: #d1e7dd; border-color: #a3cfbb; color: #0f5132; }
.pill-watch { background: #fff3cd; border-color: #ffda6a; color: #664d03; }
.pill-bad { background: #f8d7da; border-color: #f1aeb5; color: #842029; }
.pill-neutral { background: #e9ecef; border-color: #ced4da; color: #495057; }
.item-description { max-width: 34rem; white-space: nowrap; }
.item-description span { display: inline-block; max-width: calc(34rem - 1.85rem); overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }
.item-description img { height: 1.35rem; margin-right: .5rem; object-fit: contain; vertical-align: middle; width: 1.35rem; }
.pagination { align-items: center; display: flex; gap: .8rem; justify-content: center; margin-top: .75rem; }
.pagination button:disabled { background: #6c757d; cursor: default; opacity: .6; }
.modal-backdrop { align-items: center; background: rgb(0 0 0 / 50%); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 10; }
.item-modal { background: white; border-radius: .5rem; box-shadow: 0 1rem 3rem rgb(0 0 0 / 25%); max-width: 50rem; width: 100%; }
.item-modal > header { align-items: center; background: white; border-bottom: 1px solid #dee2e6; color: #212529; display: flex; justify-content: space-between; padding: 1rem; }
.item-modal h2 { font-size: 1.25rem; margin: 0; }
.modal-close { background: white; border: 1px solid #212529; font-size: 1.25rem; height: 2rem; line-height: 1; width: 2rem; }
.item-modal > p { margin: 0; padding: 1rem; }
.item-modal-image { border-bottom: 1px solid #dee2e6; padding: .75rem 1rem 0; text-align: center; }
.item-modal-image img { height: 8rem; max-width: 100%; object-fit: contain; }
.review-item-summary { align-items: center; border-bottom: 1px solid #dee2e6; display: flex; font-size: .9rem; gap: .75rem; padding: .75rem 1rem 0; }
.review-item-summary img { height: 3rem; object-fit: contain; width: 3rem; }
.review-edit-form textarea { border: 1px solid #adb5bd; border-radius: .25rem; font: inherit; font-weight: 400; padding: .4rem .5rem; resize: vertical; }
.discard-confirmation { background: white; border-radius: .5rem; box-shadow: 0 1rem 3rem rgb(0 0 0 / 30%); left: 50%; max-width: 24rem; padding: 1rem; position: fixed; top: 50%; transform: translate(-50%, -50%); z-index: 11; }
.discard-confirmation h3 { font-size: 1.1rem; margin: 0; }
.discard-confirmation p { color: #53616d; margin: .5rem 0 1rem; }
.discard-confirmation div { display: flex; gap: .5rem; justify-content: end; }
.discard-confirmation button { border: 1px solid #adb5bd; border-radius: .25rem; font: inherit; padding: .45rem .7rem; }
.discard-confirmation button.danger { background: #b02a37; border-color: #b02a37; color: white; }
.item-edit-form { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1rem; }
.compact-modal { max-width: 35rem; }
.single-column-form { grid-template-columns: 1fr; }
.single-column-form textarea { border: 1px solid #adb5bd; border-radius: .25rem; font: inherit; font-weight: 400; padding: .4rem .5rem; resize: vertical; }
.single-column-form .checkbox-label { align-items: center; display: flex; gap: .5rem; }
.single-column-form .checkbox-label input { padding: 0; width: auto; }
.single-column-form .form-hint { color: #53616d; font-size: .9rem; margin: 0; }
.single-column-form .form-error { margin: 0; }
.item-edit-form label { display: grid; font-size: .85rem; font-weight: 600; gap: .25rem; }
.item-edit-form label.full-width { grid-column: 1 / -1; }
.item-edit-form input, .item-edit-form select { border: 1px solid #adb5bd; border-radius: .25rem; font: inherit; font-weight: 400; padding: .4rem .5rem; }
.item-edit-actions { border-top: 1px solid #dee2e6; display: flex; gap: .5rem; grid-column: 1 / -1; justify-content: end; margin: .25rem -1rem -1rem; padding: 1rem; }
.item-edit-actions button { background: #0d6efd; border: 1px solid #0d6efd; border-radius: .25rem; color: white; font: inherit; padding: .45rem .7rem; }
.item-edit-actions button.secondary { background: white; color: #212529; }
.item-edit-actions button.danger { background: #b02a37; border-color: #b02a37; }
.delete-item-actions { margin: 0; }
.delete-item-content { padding: 1rem; }
.delete-item-content p { margin: 0 0 .75rem; }
.delete-item-content .muted { min-height: 0; padding: 0; text-align: left; }
.management-page { max-width: 70rem; }
.management-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1rem; }
.management-header h1 { margin: 0; }
.management-header button, .management-actions button { background: #0d6efd; border: 1px solid #0d6efd; border-radius: .25rem; color: white; cursor: pointer; font: inherit; padding: .35rem .55rem; }
.management-actions { white-space: nowrap; }
.management-actions button + button { margin-left: .35rem; }
.management-actions button.danger { background: white; border-color: #b02a37; color: #b02a37; }
.management-table { min-width: 36rem; }
.sales-page { max-width: 90rem; }
.sales-summary { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1rem; }
.sales-summary article { border: 1px solid #dee2e6; border-radius: .5rem; display: grid; gap: .25rem; padding: .75rem 1rem; }
.sales-summary span { color: #53616d; font-size: .85rem; }
.sales-summary strong { font-size: 1.35rem; }
.sales-table { min-width: 72rem; }
.sales-note { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-reviews-page { max-width: 90rem; }
.profile-reviews-table { min-width: 70rem; }
.profile-review-actions { align-items: center; display: flex; gap: .35rem; }
.profile-review-actions img { height: 1.5rem; object-fit: contain; width: 1.5rem; }
.profile-review-actions a, .profile-review-actions button { font: inherit; }
.profile-review-actions button { background: white; border: 1px solid #adb5bd; border-radius: .25rem; cursor: pointer; padding: .15rem .35rem; }
.profile-title { max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-review-content { padding: 1rem; }
.profile-review-content dl, .linked-item-content dl { display: grid; gap: .35rem .75rem; grid-template-columns: max-content 1fr; margin: 0 0 1rem; }
.profile-review-content dt, .linked-item-content dt { color: #53616d; }
.profile-review-content dd, .linked-item-content dd { margin: 0; }
.profile-review-content label { display: grid; font-size: .85rem; font-weight: 600; gap: .25rem; }
.profile-review-content textarea { border: 1px solid #adb5bd; border-radius: .25rem; font: inherit; font-weight: 400; padding: .4rem .5rem; resize: vertical; }
.linked-item-content { align-items: start; display: grid; gap: 1rem; grid-template-columns: 5rem 1fr; padding: 1rem; }
.linked-item-content img { height: 5rem; max-width: 5rem; object-fit: contain; }
.linked-item-content p { margin: .25rem 0 1rem; }
.linked-item-content dl { grid-column: 1 / -1; }
.linked-item-summary { border-top: 1px solid #dee2e6; display: grid; gap: .75rem; grid-template-columns: 4rem 1fr; margin-top: 1rem; padding-top: 1rem; }
.linked-item-summary img { height: 4rem; max-width: 4rem; object-fit: contain; }
.linked-item-summary p { margin: .25rem 0; }
.linked-item-summary dl { display: grid; gap: .35rem .75rem; grid-column: 1 / -1; grid-template-columns: max-content 1fr; margin: 0; }
.linked-item-summary dt { color: #53616d; }
.linked-item-summary dd { margin: 0; }
.profile-linked-item { border-top: 0; margin: 0; padding: 1rem; }
.profile-linked-item dl { margin-top: .75rem; }
.profile-review-content { border-top: 1px solid #dee2e6; }
.profile-review-content h3 { font-size: 1rem; margin: 0 0 1rem; }
.items-table tbody tr.review-removed > td { background: #fce4ec; }
.review-imports-page { max-width: 52rem; }
.review-imports-intro { color: #53616d; margin: 0 0 1rem; }
.review-imports-card { border: 1px solid #dee2e6; border-radius: .5rem; padding: 1rem; }
.review-import-file-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.review-import-progress, .review-import-hint { color: #53616d; font-size: .9rem; margin: .65rem 0 0; }
.review-import-message { margin: .75rem 0 0; }
.review-import-result { border-top: 1px solid #dee2e6; margin-top: 1rem; padding-top: 1rem; }
.review-import-result-heading { align-items: center; display: flex; gap: .75rem; justify-content: space-between; }
.review-import-result h2 { font-size: 1rem; margin: 0; }
.review-import-metrics { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: 1rem 0 0; }
.review-import-metrics div { background: #f8f9fa; border-radius: .25rem; padding: .6rem .75rem; }
.review-import-metrics dt { color: #53616d; font-size: .8rem; }
.review-import-metrics dd { font-size: 1.2rem; font-weight: 700; margin: .15rem 0 0; }
.review-import-details { margin-top: .75rem; }
.review-import-details summary { cursor: pointer; font-weight: 600; }
.review-import-details p { color: #53616d; font-family: ui-monospace, monospace; font-size: .85rem; overflow-wrap: anywhere; }
.vine-quality-page { max-width: 90rem; }
.vine-summary { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-bottom: 1rem; }
.vine-summary article, .vine-distribution-card { border: 1px solid #dee2e6; border-radius: .5rem; padding: .75rem 1rem; }
.vine-summary span, .vine-summary small { color: #53616d; display: block; font-size: .85rem; }
.vine-summary strong { display: block; font-size: 1.35rem; margin: .2rem 0; }
.vine-quality-note { background: #f8f9fa; border-left: 3px solid #6c757d; color: #53616d; font-size: .9rem; margin: 1rem 0; padding: .65rem .75rem; }
.vine-distribution-card { margin-bottom: 1rem; max-width: 48rem; }
.vine-distribution-card h2, .vine-image-section h2 { font-size: 1rem; margin: 0 0 .8rem; }
.vine-distribution-row { align-items: center; display: grid; gap: .75rem; grid-template-columns: 6.5rem minmax(8rem, 1fr) 7rem; margin-top: .5rem; }
.vine-distribution-track { background: #e9ecef; border-radius: 1rem; height: .6rem; overflow: hidden; }
.vine-distribution-track span { border-radius: inherit; display: block; height: 100%; }
.vine-distribution-row strong { font-size: .85rem; text-align: right; }
.vine-distribution-row small { color: #53616d; font-weight: 400; }
.quality-bar-excellent { background: #198754; }.quality-bar-good { background: #0dcaf0; }.quality-bar-fair { background: #fd7e14; }.quality-bar-poor { background: #dc3545; }
.vine-quality-table { min-width: 54rem; }
.vine-image-section { margin-top: 1.5rem; }
.vine-image-section > p { color: #53616d; font-size: .9rem; margin: -.4rem 0 .8rem; }
.image-distribution-card { border: 1px solid #dee2e6; border-radius: .5rem; margin-bottom: 1rem; max-width: 48rem; padding: .75rem 1rem; }
.image-distribution-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: space-between; }
.image-distribution-heading h3 { font-size: 1rem; margin: 0; }
.image-distribution-legend { display: flex; flex-wrap: wrap; gap: .25rem .7rem; }
.image-distribution-legend span { align-items: center; color: #53616d; display: inline-flex; font-size: .75rem; gap: .25rem; }
.image-distribution-legend i { display: inline-block; height: .65rem; width: .65rem; }
.image-distribution-row { align-items: center; display: grid; gap: .75rem; grid-template-columns: 7.5rem minmax(10rem, 1fr); margin-top: .7rem; }
.image-distribution-row > span { color: #53616d; font-size: .85rem; }
.image-distribution-track { background: #e9ecef; display: flex; height: 1.1rem; overflow: hidden; }
.image-distribution-track span { display: block; height: 100%; }
.vine-legacy-table { margin-top: 1rem; }
.browser-api-clients-page { max-width: 90rem; }
.browser-api-clients-intro { color: #53616d; margin: 0 0 1rem; }
.browser-api-clients-table { min-width: 70rem; }
.browser-api-key-id { white-space: nowrap; }
.browser-api-key-id code { font-size: .75rem; }
.browser-api-key-id button, .secondary-action, .browser-api-secret-content button { background: white; border: 1px solid #adb5bd; border-radius: .25rem; color: #212529; cursor: pointer; font: inherit; margin-left: .4rem; padding: .2rem .4rem; }
.browser-api-notes { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-api-secret-content { display: grid; gap: .75rem; padding: 1rem; }
.browser-api-secret-content p { margin: 0; }
.browser-api-secret-content label { display: grid; font-size: .85rem; font-weight: 600; gap: .25rem; }
.browser-api-secret-content input, .browser-api-secret-content textarea { border: 1px solid #adb5bd; border-radius: .25rem; font: .85rem ui-monospace, monospace; font-weight: 400; padding: .4rem .5rem; resize: none; }
.browser-api-secret-content button { justify-self: start; margin-left: 0; }
.browser-api-secret-actions { margin: 0; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; padding: .5rem 1rem; background: #fff3cd; width: 100%; }
@media (min-width: 1500px) { .trend-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .trend-grid, .item-edit-form, .sales-summary { grid-template-columns: 1fr; } header { gap: 1rem; padding: 1rem; } main { padding: 1rem; } .items-toolbar input, .items-toolbar select { min-width: 100%; } .vine-distribution-row { grid-template-columns: 6.5rem minmax(6rem, 1fr) 5rem; gap: .5rem; } .image-distribution-row { grid-template-columns: 6.5rem minmax(6rem, 1fr); gap: .5rem; } }