.dashboard-grid, .settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.advanced-analytics { display: grid; gap: 16px; }
.advanced-analytics[hidden] { display: none; }
.advanced-analytics .section-copy h2, .advanced-analytics .section-copy p { margin: 0; }
.advanced-analytics .section-copy p { margin-top: 4px; color: var(--muted); }

.action-list, .team-list { display: grid; }
.action-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 12px; align-items: center; min-height: 62px; border-bottom: 1px solid var(--line); }
.action-row:last-child { border-bottom: 0; }
.action-row strong { font-size: .8rem; }
.action-marker { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; font-size: .75rem; font-weight: 850; }
.action-marker.success { color: var(--mint); background: var(--mint-soft); }
.action-marker.warning { color: var(--amber); background: var(--amber-soft); }
.action-marker.danger { color: var(--danger); background: var(--danger-soft); }
.action-arrow { color: var(--muted); transition: transform .16s ease; }
.action-row:hover .action-arrow { transform: translateX(3px); color: var(--primary); }

.catalog-autopilot { display: grid; gap: 14px; overflow: hidden; border-color: #ddd6fb; padding: 20px; background: linear-gradient(120deg, #fff 0%, #fbf9ff 100%); }
.catalog-autopilot-copy { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 13px; align-items: center; }
.catalog-autopilot-copy h2 { margin: 0; font-size: 1.05rem; }
.catalog-autopilot-copy p { max-width: 850px; margin: 4px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.catalog-autopilot-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-strong)); box-shadow: 0 10px 24px rgba(105, 76, 229, .22); }
.catalog-method-label { margin: 2px 0 -3px; color: var(--ink-soft); font-size: .67rem; font-weight: 760; }
.catalog-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.catalog-path { display: grid; min-width: 0; min-height: 112px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 15px; padding: 16px; color: var(--ink); background: rgba(255,255,255,.88); text-align: left; cursor: pointer; transition: border-color var(--motion), background-color var(--motion), box-shadow var(--motion); }
.catalog-path:hover, .catalog-path:focus-visible { border-color: #b8a8f3; outline: 0; background: #fff; box-shadow: 0 12px 28px rgba(63, 47, 132, .11); }
.catalog-path-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--primary-strong); background: var(--primary-soft); }
.catalog-path-icon svg { width: 20px; height: 20px; }
.catalog-path > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.catalog-path strong { font-size: .76rem; }
.catalog-path small { color: var(--muted); font-size: .63rem; line-height: 1.4; }
.catalog-path-action { border-radius: 8px; padding: 7px 9px; color: var(--primary-strong); background: var(--primary-soft); font-size: .64rem; font-weight: 800; white-space: nowrap; }
.catalog-autopilot-activity { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 13px; }
.catalog-autopilot-warning { margin: 0; border-left: 3px solid var(--amber); padding: 8px 11px; color: #75541a; background: var(--amber-soft); font-size: .66rem; }
.catalog-activity-row { display: flex; min-width: 0; justify-content: space-between; gap: 14px; align-items: center; border-radius: 11px; padding: 9px 11px; background: rgba(255,255,255,.78); }
.catalog-activity-row.is-review { background: var(--primary-faint); }
.catalog-activity-row.is-error { border: 1px solid #f0c9cc; background: #fff7f7; }
.catalog-activity-row > span:first-child { display: grid; min-width: 0; gap: 2px; color: var(--ink-soft); font-size: .69rem; }
.catalog-activity-row small { color: var(--muted); font-size: .61rem; }
.catalog-activity-row > span:last-child { display: flex; flex-wrap: wrap; gap: 12px; }
.catalog-toolbar { display: grid; grid-template-columns: minmax(210px, 1fr) 155px 130px auto auto; gap: 10px; align-items: center; padding: 13px; border-radius: 18px; }
.catalog-toolbar select, .catalog-toolbar input { border-color: transparent; background: var(--surface-soft); }
.catalog-more-actions { position: relative; }
.catalog-more-actions summary { list-style: none; cursor: pointer; }
.catalog-more-actions summary::-webkit-details-marker { display: none; }
.catalog-more-actions > div { position: absolute; z-index: 8; top: calc(100% + 7px); right: 0; display: grid; min-width: 170px; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 9px; background: var(--surface); box-shadow: var(--shadow-lg); }
.catalog-more-actions > div button { justify-content: flex-start; min-height: 36px; border-radius: 8px; padding: 7px 9px; text-align: left; }
.search-field { position: relative; }
.search-field::before { position: absolute; z-index: 1; top: 50%; left: 14px; width: 14px; height: 14px; transform: translateY(-55%); border: 1.8px solid var(--muted); border-radius: 50%; content: ""; }
.search-field::after { position: absolute; z-index: 1; top: calc(50% + 5px); left: 26px; width: 6px; height: 2px; transform: rotate(45deg); background: var(--muted); content: ""; }
.search-field input { padding-left: 40px; }

.catalog-ai-status { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; border-color: #cbeadd; padding: 14px 16px; background: linear-gradient(135deg, #f3fbf8, #fbfefd); }
.catalog-ai-status.is-unavailable { border-color: #f2dfb5; background: linear-gradient(135deg, #fff9ee, #fffdf8); }
.catalog-ai-status p { margin: 3px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.catalog-ai-status strong { font-size: .76rem; }
.ai-status-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--primary); background: var(--primary-soft); font-size: 1rem; }

.catalog-summary { display: flex; flex-wrap: wrap; gap: 9px; }
.summary-chip { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 0 13px; color: var(--muted); background: rgba(255,255,255,.68); font-size: .7rem; }
.summary-chip strong { color: var(--ink); font-size: .78rem; }
.summary-chip.ready { border-color: #cbeadd; color: #24755f; background: var(--mint-soft); }
.summary-chip.attention { border-color: #f2dfb5; color: #8b6215; background: var(--amber-soft); }

.catalog-table { border: 1px solid var(--line); border-radius: 20px; padding: 0 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.catalog-table table { min-width: 820px; }
.catalog-identity { display: flex; min-width: 260px; gap: 11px; align-items: center; }
.catalog-identity img, .catalog-thumb-missing { width: 44px; height: 52px; flex: 0 0 44px; border-radius: 10px; object-fit: cover; background: var(--surface-soft); }
.catalog-thumb-missing { display: grid; place-items: center; color: var(--muted); }
.catalog-identity > span:last-child { display: grid; min-width: 0; }
.catalog-identity strong { overflow: hidden; color: var(--ink); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.catalog-identity small { overflow: hidden; color: var(--muted); font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row-actions { display: flex; min-width: 100px; gap: 12px; }
.item-dialog { width: min(1180px, calc(100vw - 28px)); }
.item-editor { grid-template-rows: auto minmax(0, 1fr) auto; }
.editor-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 26px; padding: 0; }
.image-editor { position: sticky; top: 0; display: grid; align-content: start; gap: 11px; min-height: 100%; padding: 22px; background: #f6f5fa; }
.image-dropzone { position: relative; display: grid; aspect-ratio: 4 / 5; overflow: hidden; place-items: center; border: 1.5px dashed #c9c6dc; border-radius: 17px; color: var(--muted); background: #fff; cursor: pointer; }
.image-dropzone:hover { border-color: var(--primary); background: #fdfcff; }
.image-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.image-dropzone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image-dropzone.has-image .dropzone-copy { visibility: hidden; opacity: 0; }
.dropzone-copy { display: grid; justify-items: center; gap: 8px; padding: 20px; text-align: center; transition: opacity .16s ease; }
.dropzone-copy strong { color: var(--ink-soft); font-size: .78rem; }
.dropzone-copy small { font-size: .65rem; }
.upload-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); }
.upload-mark svg { width: 18px; height: 18px; }
.ai-button { border-color: #d7d0ff; color: #5340bd; background: linear-gradient(135deg, #f4f0ff, #ebe6ff); }
.sparkle { font-size: 1rem; }
.ai-note { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.csv-import-dialog { width: min(760px, 100%); margin: auto; }
.csv-import-body { display: grid; gap: 14px; }
.csv-file-field { cursor: pointer; }
.csv-file-field input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.csv-file-field > span { display: grid; min-height: 140px; place-items: center; align-content: center; gap: 7px; border: 1.5px dashed #c9c6dc; border-radius: 8px; padding: 20px; color: var(--muted); background: var(--surface-soft); text-align: center; transition: border-color .18s ease, background .18s ease; }
.csv-file-field:hover > span, .csv-file-field input:focus-visible + span { border-color: var(--primary); background: var(--primary-soft); }
.csv-file-field svg { width: 22px; height: 22px; color: var(--primary); }
.csv-file-field strong { color: var(--ink); font-size: .82rem; }
.csv-file-field small { font-size: .68rem; }
.csv-import-status { border-left: 3px solid var(--mint); padding: 10px 12px; color: var(--ink-soft); background: var(--mint-soft); font-size: .7rem; line-height: 1.5; }
.csv-import-status.is-error { border-color: var(--danger); color: #8f2e38; background: var(--danger-soft); }
.csv-import-preview { max-height: 280px; border: 1px solid var(--line); }
.csv-import-preview table { min-width: 540px; }
.photo-import-dialog { width: min(920px, calc(100vw - 28px)); }
.photo-import-body { display: grid; gap: 16px; }
.photo-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.photo-guide article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; border: 1px solid var(--line); border-radius: 13px; padding: 12px; background: var(--surface-soft); }
.photo-guide article > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: var(--primary-strong); background: var(--primary-soft); font-size: .66rem; font-weight: 850; }
.photo-guide strong { font-size: .69rem; }
.photo-guide p { margin: 3px 0 0; color: var(--muted); font-size: .61rem; line-height: 1.45; }
.photo-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.photo-examples article { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 13px; padding: 10px; background: var(--surface); }
.photo-examples article.is-good { border-color: #bfe4d6; background: #f7fcfa; }
.photo-examples article.is-bad { border-color: #f0c9cc; background: #fff9f9; }
.photo-examples strong { font-size: .69rem; }
.photo-examples p { margin: 3px 0 0; color: var(--muted); font-size: .61rem; line-height: 1.42; }
.photo-example-art { position: relative; display: grid; height: 62px; place-items: center; overflow: hidden; border-radius: 10px; background: #fff; }
.photo-example-garment { display: grid; width: 35px; height: 40px; place-items: center; border: 2px solid #7961df; border-radius: 8px 8px 5px 5px; color: transparent; background: #eee9ff; font-size: 0; }
.photo-example-garment::before, .photo-example-garment::after { position: absolute; top: 16px; width: 15px; height: 11px; border: 2px solid #7961df; background: #eee9ff; content: ""; }
.photo-example-garment::before { margin-left: -38px; transform: rotate(26deg); }
.photo-example-garment::after { margin-left: 38px; transform: rotate(-26deg); }
.photo-example-garment.second { position: absolute; margin: 20px 0 0 30px; border-color: #a0a0aa; background: #eeeef1; transform: rotate(16deg); }
.photo-example-garment.second::before, .photo-example-garment.second::after { border-color: #a0a0aa; background: #eeeef1; }
.photo-example-art b { position: absolute; right: 5px; bottom: 5px; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; background: var(--mint); font-size: .62rem; }
.is-bad .photo-example-art b { background: var(--danger); }
.photo-batch-dropzone { position: relative; display: grid; min-height: 150px; place-items: center; align-content: center; gap: 7px; border: 1.5px dashed #c8c0ef; border-radius: 15px; padding: 20px; background: #fbfaff; text-align: center; cursor: pointer; transition: border-color var(--motion), background-color var(--motion); }
.photo-batch-dropzone:hover, .photo-batch-dropzone:focus-within { border-color: var(--primary); background: var(--primary-faint); }
.photo-batch-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-batch-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--primary-strong); background: var(--primary-soft); }
.photo-batch-icon svg { width: 20px; height: 20px; }
.photo-batch-dropzone strong { font-size: .8rem; }
.photo-batch-dropzone small { color: var(--muted); font-size: .65rem; }
.photo-batch-selection { display: grid; gap: 10px; }
.photo-batch-selection > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: .7rem; }
.photo-batch-thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 7px; }
.photo-batch-thumbs img, .photo-batch-thumbs > span { width: 100%; aspect-ratio: 4 / 5; border-radius: 9px; object-fit: cover; background: var(--surface-soft); }
.photo-batch-thumbs > span { display: grid; place-items: center; color: var(--primary-strong); font-size: .7rem; font-weight: 800; }
.photo-defaults { border: 1px solid var(--line); border-radius: 13px; padding: 0 13px; }
.photo-defaults summary { padding: 12px 0; color: var(--ink-soft); font-size: .7rem; font-weight: 760; cursor: pointer; }
.photo-defaults > p { margin: -3px 0 12px; color: var(--muted); font-size: .63rem; line-height: 1.45; }
.photo-defaults .form-grid { padding-bottom: 13px; }
.photo-batch-progress { display: grid; gap: 7px; }
.photo-batch-progress > div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .66rem; }
.photo-batch-progress progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px; accent-color: var(--primary); }
.batch-review-dialog { width: min(1180px, calc(100vw - 40px)); max-width: 1180px; }
.batch-review-body { display: grid; gap: 14px; }
.batch-apply-bar { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(4, minmax(105px, .7fr)) auto; gap: 9px; align-items: end; border: 1px solid #d9d1f6; border-radius: 13px; padding: 12px; background: var(--primary-faint); }
.batch-apply-bar > div { display: grid; gap: 3px; align-self: center; }
.batch-apply-bar strong { font-size: .71rem; }
.batch-apply-bar small { color: var(--muted); font-size: .59rem; line-height: 1.35; }
.batch-review-list { display: grid; gap: 9px; }
.batch-review-row { display: grid; min-width: 0; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 13px; padding: 10px; background: var(--surface); }
.batch-review-select { position: relative; display: block; }
.batch-review-select input { position: absolute; z-index: 1; top: 6px; left: 6px; width: 20px; height: 20px; accent-color: var(--primary); }
.batch-review-select img { display: block; width: 82px; height: 92px; border-radius: 9px; object-fit: cover; background: var(--surface-soft); }
.batch-review-fields { display: grid; grid-template-columns: minmax(160px, 1.3fr) repeat(6, minmax(95px, .7fr)); gap: 8px; align-items: end; }
.batch-review-fields .field { min-width: 0; }
.batch-review-fields input { min-width: 0; padding-inline: 9px; font-size: .66rem; }
.batch-review-error { margin: 0; border-radius: 10px; padding: 10px 12px; color: #922f39; background: #fff0f1; font-size: .66rem; }
.batch-review-dialog .dialog-footer > span { color: var(--muted); font-size: .65rem; }
.source-connect-dialog { width: min(640px, calc(100vw - 28px)); }
.source-connect-body, .source-fields { display: grid; gap: 13px; }
.source-help-card { display: flex; justify-content: space-between; gap: 18px; align-items: center; border: 1px solid #ddd6fb; border-radius: 12px; padding: 12px 14px; background: var(--primary-faint); }
.source-help-card strong { color: var(--ink); font-size: .7rem; }
.source-help-card p { margin: 3px 0 0; color: var(--muted); font-size: .63rem; line-height: 1.45; }
.source-help-card a { flex: none; color: var(--primary-strong); font-size: .65rem; font-weight: 800; white-space: nowrap; }
.source-security-note { margin: 0; border-left: 3px solid var(--mint); padding: 8px 11px; color: var(--muted); background: var(--mint-soft); font-size: .63rem; line-height: 1.5; }
.editor-fields { display: grid; gap: 24px; padding: 22px 24px 30px 0; }
.form-section { display: grid; gap: 18px; }
.form-section + .form-section { padding-top: 22px; border-top: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 10px; align-items: start; }
.section-heading > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: .7rem; font-weight: 820; }
.section-heading h3 { margin: 0; }
.section-heading p { margin: 3px 0 0; color: var(--muted); font-size: .7rem; }
.section-heading.with-action { grid-template-columns: 31px minmax(0, 1fr) auto; }
.season-field { min-width: 0; margin: 0; border: 0; padding: 0; }
.check-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.check-pills label { cursor: pointer; }
.check-pills input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check-pills span { display: inline-flex; min-height: 33px; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 0 11px; color: var(--muted); background: #fff; font-size: .68rem; font-weight: 660; }
.check-pills input:checked + span { border-color: #cfc7ff; color: var(--primary-strong); background: var(--primary-soft); }
.advanced-section { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; }
.advanced-section summary { padding: 13px 0; color: var(--ink-soft); font-size: .75rem; font-weight: 720; }
.advanced-section[open] { padding-bottom: 14px; }
.advanced-section textarea { font-family: "SFMono-Regular", Consolas, monospace; font-size: .7rem; }
.availability-control { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: .74rem; font-weight: 680; cursor: pointer; }
.availability-control::before { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--line-strong); border-radius: 6px; color: #fff; background: #fff; content: "✓"; }
.availability-control:has(input:checked)::before { border-color: var(--primary); background: var(--primary); }

.device-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--blue); background: var(--blue-soft); }
.device-icon::before { width: 18px; height: 18px; background: currentColor; content: ""; mask: url("../../icons/tablet.svg") center / contain no-repeat; -webkit-mask: url("../../icons/tablet.svg") center / contain no-repeat; }
.enrollment-code { display: grid; justify-items: center; gap: 5px; margin-top: 18px; border: 1px dashed #cfc8ef; border-radius: 16px; padding: 20px; background: var(--primary-soft); text-align: center; }
.enrollment-code small, .enrollment-code span { color: var(--muted); font-size: .68rem; }
.enrollment-code strong { color: var(--primary-strong); font-family: monospace; font-size: 1.8rem; letter-spacing: .16em; user-select: all; }
.enrollment-code .button { margin-top: 7px; }
.enrollment-prerequisite { display: grid; gap: 5px; margin-bottom: 18px; border-left: 3px solid var(--primary); padding: 3px 0 3px 12px; }
.enrollment-prerequisite strong { color: var(--ink); font-size: .76rem; }
.enrollment-prerequisite p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.enrollment-prerequisite a, .enrollment-prerequisite > span { width: fit-content; color: var(--primary-strong); font-size: .66rem; font-weight: 800; }
.team-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(100px, .4fr) auto; gap: 13px; align-items: center; min-height: 66px; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: 0; }
.soft-avatar { color: var(--primary-strong); background: var(--primary-soft); }
.team-row > span:nth-child(2) { display: grid; min-width: 0; }
.team-row strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.team-row small { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.role-label { color: var(--muted); font-size: .7rem; }

.settings-form, .settings-panel { display: grid; }
.settings-form { gap: 18px; }
.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-panel { gap: 20px; }
.experience-brand-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr); gap: 28px; align-items: stretch; }
.option-fieldset { min-width: 0; margin: 0; border: 0; padding: 0; }
.option-fieldset legend { margin-bottom: 8px; color: var(--ink-soft); font-size: .7rem; font-weight: 720; }
.checkbox-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 9px; }
.checkbox-cards label { min-width: 0; cursor: pointer; }
.checkbox-cards input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.checkbox-cards label > span { display: grid; min-height: 58px; align-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 13px; color: var(--ink-soft); background: var(--surface); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.checkbox-cards label:hover > span { border-color: #d7cef9; }
.checkbox-cards input:focus-visible + span { outline: 3px solid rgba(115, 87, 232, .2); outline-offset: 2px; }
.checkbox-cards input:checked + span { border-color: #c9bef8; color: var(--primary-strong); background: var(--primary-soft); box-shadow: inset 0 0 0 1px rgba(115, 87, 232, .08); }
.checkbox-cards strong { font-size: .74rem; }
.checkbox-cards small { color: var(--muted); font-size: .65rem; line-height: 1.35; }
.kiosk-live-preview { --preview-accent: #7357e8; --preview-cta-text: #fff; position: relative; min-height: 420px; overflow: hidden; border: 9px solid #202129; border-radius: 30px; color: #fff; background: #15171d; box-shadow: 0 25px 48px rgba(20, 19, 31, .2); }
.preview-photo { position: absolute; inset: 0; opacity: .82; background: radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--preview-accent), transparent 35%), transparent 32%), linear-gradient(155deg, #31343f 0%, #181a21 60%, #111218 100%); }
.preview-photo::after { position: absolute; right: -25%; bottom: -15%; width: 85%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; content: ""; box-shadow: 0 0 0 45px rgba(255,255,255,.025), 0 0 0 90px rgba(255,255,255,.018); }
.preview-header { position: relative; z-index: 1; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 18px; font-size: .67rem; font-weight: 740; }
.preview-header small { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 5px 7px; color: rgba(255,255,255,.78); }
.preview-logo { display: grid; width: 34px; height: 34px; overflow: hidden; place-items: center; border-radius: 10px; background: rgba(255,255,255,.96) center / cover no-repeat; box-shadow: 0 8px 18px rgba(0,0,0,.2); font-size: .65rem; }
.preview-card { position: absolute; z-index: 1; right: 18px; bottom: 18px; left: 18px; display: grid; gap: 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 22px; padding: 20px; background: rgba(25, 26, 34, .72); box-shadow: 0 18px 38px rgba(0,0,0,.18); backdrop-filter: blur(18px); }
.preview-card small { color: color-mix(in srgb, var(--preview-accent), #fff 35%); font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.preview-card strong { max-width: 310px; font-size: 1.5rem; line-height: 1.05; letter-spacing: -.04em; }
.preview-card > span { color: rgba(255,255,255,.58); font-size: .65rem; }
.preview-card button { justify-self: start; min-height: 36px; border: 0; border-radius: 999px; padding: 0 15px; color: var(--preview-cta-text); background: var(--preview-accent); font-size: .65rem; font-weight: 800; pointer-events: none; }
.settings-guard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; border: 1px solid #cfe8df; border-radius: 15px; padding: 13px 15px; color: #235f50; background: #f1faf7; }
.settings-guard strong { font-size: .72rem; }
.settings-guard span { color: #568075; font-size: .68rem; }

.status-banner, .devices-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 24px;
}
.status-banner-mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: #157a61; background: var(--mint-soft); font-size: 1.1rem; font-weight: 900; }
.status-banner.blocked .status-banner-mark { color: var(--danger); background: var(--danger-soft); }
.status-banner.degraded .status-banner-mark { color: var(--amber); background: var(--amber-soft); }
.status-banner h2, .devices-summary h2 { margin: 0 0 4px; font-size: 1.28rem; }
.status-banner p:not(.eyebrow), .devices-summary p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .8rem; }
.quick-action-list { display: grid; }
.quick-action { display: flex; min-height: 58px; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 1px solid var(--line); font-size: .78rem; }
.quick-action:last-child { border-bottom: 0; }
.quick-action span { color: var(--primary); font-size: 1rem; }

.device-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.locations-header, .billing-status { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.locations-header h2, .billing-status h2 { margin: 0 0 5px; font-size: 1.28rem; }
.locations-header p, .billing-status p, .pricing-toolbar p { max-width: 680px; margin: 0; color: var(--muted); font-size: .8rem; }
.location-directory { overflow: hidden; padding: 0; }
.location-directory .locations-header { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.location-list { display: grid; }
.location-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 17px 22px; border-bottom: 1px solid var(--line); background: var(--surface); }
.location-row:last-child { border-bottom: 0; }
.location-row.active { box-shadow: inset 3px 0 0 var(--primary); background: #fbfaff; }
.location-identity { display: grid; min-width: 0; gap: 5px; }
.location-title-line { display: flex; min-width: 0; flex-wrap: wrap; gap: 8px; align-items: center; }
.location-title-line h3 { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .92rem; }
.location-identity > span { color: var(--muted); font-size: .7rem; }
.location-current { display: inline-flex; min-height: 22px; align-items: center; border-radius: 999px; padding: 0 8px; color: #5841bf; background: var(--primary-soft); font-size: .62rem; font-weight: 750; }
.location-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dialog-header p { margin: 5px 0 0; color: var(--muted); font-size: .76rem; }
.billing-status { border-color: #d9d2f6; background: #fbfaff; }
.billing-status[data-status="past_due"], .billing-status[data-status="expired"], .billing-status[data-status="canceled"] { border-color: #f0cbd0; background: #fff9fa; }
.billing-status-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.billing-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.billing-facts article { display: grid; min-height: 86px; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; background: var(--surface); box-shadow: var(--shadow-sm); }
.billing-facts span { color: var(--muted); font-size: .68rem; }
.billing-facts strong { overflow-wrap: anywhere; font-size: .9rem; }
.usage-overview { display: grid; gap: 16px; padding-top: 6px; }
.usage-heading { align-items: start; }
.usage-period { flex: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: var(--muted); background: var(--surface-soft); font-size: .66rem; font-weight: 720; }
.usage-summary-grid { display: grid; grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr)); gap: 12px; }
.usage-summary-card { display: grid; min-height: 96px; align-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 8px; padding: 17px 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.usage-summary-card span { color: var(--muted); font-size: .67rem; font-weight: 650; }
.usage-summary-card strong { overflow-wrap: anywhere; font-size: 1.38rem; line-height: 1.05; }
.usage-summary-card.estimated { border-color: #312b48; color: #fff; background: #211d31; }
.usage-summary-card.estimated span { color: #c9c2dc; }
.usage-summary-card.successful { border-color: #cbece0; background: #f7fcfa; }
.usage-surface { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow-sm); }
.usage-meter { display: grid; gap: 9px; padding: 15px 17px; }
.usage-meter-copy { display: flex; justify-content: space-between; gap: 18px; align-items: center; font-size: .72rem; }
.usage-meter-copy span { color: var(--muted); text-align: right; }
.usage-meter progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: 999px; appearance: none; }
.usage-meter progress::-webkit-progress-bar { border-radius: 999px; background: #ebe8f5; }
.usage-meter progress::-webkit-progress-value { border-radius: 999px; background: var(--primary); }
.usage-meter progress::-moz-progress-bar { border-radius: 999px; background: var(--primary); }
.usage-formula { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.usage-formula > div { display: grid; gap: 4px; padding: 15px 17px; border-right: 1px solid var(--line); }
.usage-formula > div:last-child { border-right: 0; }
.usage-formula span, .usage-formula em { color: var(--muted); font-size: .66rem; font-style: normal; }
.usage-formula strong { font-size: .95rem; }
.usage-detail-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, .75fr); gap: 12px; }
.usage-chart-card { display: grid; min-width: 0; gap: 14px; padding: 18px; }
.usage-chart-card h3, .usage-breakdown-card h3 { margin: 0; font-size: .86rem; }
.usage-chart-card p { margin: 4px 0 0; color: var(--muted); font-size: .68rem; }
.usage-chart-canvas { position: relative; min-height: 220px; }
.usage-chart-canvas canvas { width: 100% !important; height: 220px !important; }
.usage-cap-form { display: grid; align-content: space-between; gap: 16px; padding: 18px; }
.usage-cap-form .field { width: 100%; }
.usage-cap-form .button { justify-self: start; }
.usage-breakdown-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.usage-breakdown-card { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 17px 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.usage-breakdown-card h3 { margin-bottom: 8px; }
.usage-row { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .75rem; }
.usage-row > span:first-child { display: grid; min-width: 0; gap: 2px; }
.usage-row strong { overflow-wrap: anywhere; }
.usage-row small, .usage-row > span:last-child, .empty-copy { color: var(--muted); }
.usage-row small { font-size: .62rem; }
.usage-row > span:last-child { flex: none; text-align: right; }
.billing-back-link { width: fit-content; color: var(--primary-strong); font-size: .72rem; font-weight: 750; }
.plan-management-summary { display: grid; grid-template-columns: minmax(260px, 1.15fr) minmax(340px, 1.5fr) auto; gap: 24px; align-items: center; }
.plan-management-summary h2 { margin: 10px 0 6px; font-size: 1.45rem; }
.plan-management-summary p { max-width: 520px; margin: 0; color: var(--muted); font-size: .75rem; }
.plan-management-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.plan-management-facts > div { display: grid; gap: 3px; }
.plan-management-facts dt { color: var(--muted); font-size: .63rem; }
.plan-management-facts dd { margin: 0; overflow-wrap: anywhere; font-size: .76rem; font-weight: 760; }
.plan-management-actions { display: grid; min-width: 188px; gap: 8px; }
.pricing-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; padding-top: 8px; }
.pricing-toolbar h2 { margin: 0 0 5px; font-size: 1.25rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pricing-card { position: relative; display: grid; min-width: 0; grid-template-rows: auto auto 1fr auto; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--surface); box-shadow: var(--shadow-sm); }
.pricing-card.featured { border-color: #c9bef8; box-shadow: 0 18px 42px rgba(74, 57, 158, .12); }
.pricing-card.current::before { position: absolute; top: 0; right: 20px; left: 20px; height: 3px; border-radius: 0 0 4px 4px; background: var(--primary); content: ""; }
.plan-card-labels { display: flex; min-height: 24px; flex-wrap: wrap; gap: 6px; margin: -7px 0 -7px; }
.plan-card-label { display: inline-flex; min-height: 24px; align-items: center; border-radius: 6px; padding: 0 8px; font-size: .62rem; font-weight: 780; }
.plan-card-label.current { color: #fff; background: var(--primary); }
.plan-card-label.recommended { color: var(--primary-strong); background: var(--primary-soft); }
.pricing-card h3 { margin: 0; font-size: 1.15rem; }
.plan-price { display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline; font-size: 2rem; font-weight: 800; line-height: 1; }
.plan-price span { color: var(--muted); font-size: .7rem; font-weight: 650; }
.pricing-card ul { display: grid; gap: 9px; min-height: 128px; margin: 0; padding: 0; list-style: none; }
.pricing-card li { position: relative; padding-left: 20px; color: var(--ink-soft); font-size: .76rem; }
.pricing-card li::before { position: absolute; left: 0; color: var(--mint); font-weight: 850; content: "✓"; }
.pricing-card .button { width: 100%; }
.device-list-header { align-items: center; }
.segmented-control, .range-bar { display: inline-flex; gap: 4px; border: 1px solid var(--line); border-radius: 13px; padding: 4px; background: var(--surface-soft); }
.segmented-control button, .range-button { min-height: 34px; border: 0; border-radius: 9px; padding: 0 12px; color: var(--muted); background: transparent; font-size: .7rem; font-weight: 720; }
.segmented-control button.active, .range-button.active { color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.segmented-control button span { margin-left: 4px; color: var(--primary); }
.device-identity { display: flex; min-width: 230px; gap: 10px; align-items: center; }
.device-identity > span:last-child { display: grid; }
.device-identity strong { font-size: .75rem; }
.device-identity small { color: var(--muted); font-size: .63rem; }
.compact-button { min-height: 32px; padding: 0 10px; color: var(--danger); font-size: .67rem; }
.device-table th:last-child, .device-table td:last-child { min-width: 92px; text-align: right; }
.device-table .compact-button { white-space: nowrap; }
.setup-steps { display: grid; gap: 10px; margin: 0 0 18px; padding-left: 20px; color: var(--muted); font-size: .75rem; }

.range-bar { width: fit-content; align-items: center; }
.range-timezone { margin: 0 8px; color: var(--muted); font-size: .67rem; }

.style-editor { align-content: start; }
.style-chips { display: flex; min-height: 38px; flex-wrap: wrap; gap: 7px; }
.editable-chip { display: inline-flex; min-height: 31px; gap: 6px; align-items: center; border: 1px solid #d8d1f8; border-radius: 999px; padding: 0 5px 0 11px; color: var(--primary-strong); background: var(--primary-soft); font-size: .68rem; font-weight: 680; }
.editable-chip button { display: grid; width: 22px; height: 22px; place-items: center; border: 0; border-radius: 50%; padding: 0; color: inherit; background: rgba(115,87,232,.1); }
.inline-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.contrast-pass { color: #157a61 !important; }
.contrast-warning { color: var(--amber) !important; }
.settings-save-bar { position: sticky; z-index: 15; bottom: 14px; display: flex; justify-content: space-between; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px 12px 18px; background: rgba(255,255,255,.94); box-shadow: 0 16px 38px rgba(20,19,31,.14); backdrop-filter: blur(14px); }
.settings-save-bar > div { display: grid; }
.settings-save-bar strong { font-size: .75rem; }
.settings-save-bar span { color: var(--muted); font-size: .68rem; }
.settings-save-bar.dirty { border-color: #cec3fb; }
@media (max-width: 1240px) {
  .catalog-toolbar { grid-template-columns: minmax(190px, 1fr) 145px 125px repeat(2, auto); }
  .batch-apply-bar { grid-template-columns: repeat(4, minmax(120px, 1fr)) auto; }
  .batch-apply-bar > div { grid-column: 1 / -1; }
  .batch-review-fields { grid-template-columns: minmax(170px, 1.3fr) repeat(3, minmax(105px, .7fr)); }
}

@media (max-width: 1040px) {
  .catalog-toolbar { grid-template-columns: 1fr 1fr; }
  .catalog-toolbar .search-field { grid-column: span 2; }
  .catalog-toolbar .button { justify-self: end; }
  .experience-brand-grid { grid-template-columns: 1fr; }
  .kiosk-live-preview { min-height: 370px; }
  .billing-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usage-breakdown-cards { grid-template-columns: 1fr 1fr; }
  .usage-breakdown-card:last-child { grid-column: span 2; }
  .plan-management-summary { grid-template-columns: minmax(240px, 1fr) minmax(330px, 1.3fr); }
  .plan-management-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 220px)); }
}

@media (max-width: 800px) {
  .dashboard-grid, .settings-grid { grid-template-columns: 1fr; }
  .dashboard-grid .span-2 { grid-column: auto; }
  .editor-layout { grid-template-columns: 1fr; }
  .image-editor { position: static; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 232px; }
  .image-dropzone { grid-row: 1 / 3; min-height: 188px; }
  .editor-fields { padding: 20px; }
  .status-banner, .devices-summary { grid-template-columns: auto minmax(0, 1fr); }
  .status-banner .button, .devices-summary .button { grid-column: 2; justify-self: start; }
  .device-metrics { grid-template-columns: 1fr; }
  .device-list-header { display: grid; }
  .pricing-grid { grid-template-columns: 1fr; }
  .usage-detail-grid { grid-template-columns: 1fr; }
  .usage-cap-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .usage-cap-form .button { justify-self: stretch; }
  .catalog-paths, .photo-guide { grid-template-columns: 1fr; }
  .photo-batch-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .batch-review-dialog { width: calc(100vw - 20px); }
  .batch-apply-bar { grid-template-columns: 1fr 1fr; }
  .batch-apply-bar > div, .batch-apply-bar > button { grid-column: 1 / -1; }
  .batch-review-row { grid-template-columns: 76px minmax(0, 1fr); align-items: start; }
  .batch-review-select img { width: 68px; height: 82px; }
  .batch-review-fields { grid-template-columns: 1fr 1fr; }
  .batch-review-fields .field:first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .catalog-autopilot { padding: 16px; }
  .catalog-autopilot-copy { grid-template-columns: 36px minmax(0, 1fr); }
  .catalog-autopilot-mark { width: 36px; height: 36px; }
  .catalog-path { min-height: 0; grid-template-columns: 38px minmax(0, 1fr); padding: 14px; }
  .catalog-path-action { grid-column: 2; width: fit-content; }
  .source-help-card { align-items: flex-start; flex-direction: column; gap: 8px; }
  .catalog-path-icon { width: 38px; height: 38px; }
  .catalog-activity-row { display: grid; }
  .catalog-activity-row > span:last-child { justify-content: flex-start; }
  .photo-batch-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .photo-examples { grid-template-columns: 1fr; }
  .catalog-toolbar { grid-template-columns: 1fr 1fr; }
  .catalog-toolbar > .button { grid-column: span 2; width: 100%; }
  .catalog-more-actions { grid-column: span 2; }
  .catalog-more-actions summary { width: 100%; }
  .catalog-more-actions > div { position: static; margin-top: 7px; box-shadow: none; }
  .catalog-ai-status { grid-template-columns: 34px minmax(0, 1fr); }
  .catalog-ai-status .status-pill { grid-column: 2; justify-self: start; }
  .image-editor { grid-template-columns: 112px minmax(0, 1fr); min-height: 172px; padding: 16px; }
  .image-dropzone { min-height: 140px; }
  .ai-note { align-self: start; }
  .editor-fields { padding: 18px 16px 28px; }
  .section-heading.with-action { grid-template-columns: 31px minmax(0, 1fr); }
  .section-heading.with-action .button { grid-column: 2; justify-self: start; }
  .team-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .team-row .role-label { display: none; }
  .settings-guard { grid-template-columns: 1fr; }
  .status-banner, .devices-summary { grid-template-columns: 1fr; }
  .status-banner-mark { display: none; }
  .status-banner .button, .devices-summary .button { grid-column: auto; width: 100%; }
  .segmented-control { width: 100%; }
  .segmented-control button { flex: 1; }
  .range-bar { width: 100%; flex-wrap: wrap; }
  .range-button { flex: 1; }
  .range-timezone { flex-basis: 100%; padding: 4px 8px; }
  .settings-save-bar { display: grid; }
  .settings-save-bar .button { width: 100%; }
  .locations-header, .billing-status, .pricing-toolbar { display: grid; }
  .locations-header .button, .billing-status-actions { width: 100%; }
  .billing-status-actions .button { flex: 1; }
  .billing-facts { grid-template-columns: 1fr; }
  .usage-summary-grid, .usage-breakdown-cards, .usage-formula { grid-template-columns: 1fr; }
  .usage-breakdown-card:last-child { grid-column: auto; }
  .usage-formula > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .usage-formula > div:last-child { border-bottom: 0; }
  .usage-heading, .usage-meter-copy { display: grid; }
  .usage-meter-copy span { text-align: left; }
  .usage-cap-form { display: grid; }
  .plan-management-summary, .plan-management-facts, .plan-management-actions { grid-template-columns: 1fr; }
  .plan-management-actions { min-width: 0; }
  .location-directory .locations-header, .location-row { padding-inline: 16px; }
  .location-row { grid-template-columns: 1fr; gap: 13px; }
  .location-actions { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .batch-review-dialog { width: 100%; max-width: 100%; }
  .batch-apply-bar, .batch-review-fields { grid-template-columns: 1fr; }
  .batch-apply-bar > div, .batch-apply-bar > button, .batch-review-fields .field:first-child { grid-column: auto; }
  .batch-review-row { grid-template-columns: 62px minmax(0, 1fr); padding: 8px; }
  .batch-review-select img { width: 56px; height: 70px; }
  .batch-review-dialog .dialog-footer { grid-template-columns: 1fr; }
  .batch-review-dialog .dialog-footer > span { text-align: center; }
}

@media (max-width: 420px) {
  .catalog-toolbar { grid-template-columns: 1fr; }
  .catalog-toolbar .search-field, .catalog-toolbar .button { grid-column: auto; }
}
.onboarding-strip { display: grid; gap: 16px; border-bottom: 1px solid var(--line); padding: 2px 0 24px; }
.onboarding-strip__header { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.onboarding-strip__header span { color: var(--primary-strong); font-size: .67rem; font-weight: 850; text-transform: uppercase; }
.onboarding-strip__header h2 { margin: 4px 0 0; font-size: 1.3rem; }
.onboarding-strip__header > strong { color: var(--muted); font-size: .76rem; }
.onboarding-strip__controls { display: flex; align-items: center; gap: 14px; }
.onboarding-strip__controls > a { color: var(--primary-strong); font-size: .74rem; font-weight: 800; text-decoration: none; }
.onboarding-strip__controls > a:hover { text-decoration: underline; }
.onboarding-strip__controls > strong { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.onboarding-next { display: flex; justify-content: space-between; gap: 24px; align-items: center; border: 1px solid #cfc5f8; border-radius: 12px; padding: 18px; background: linear-gradient(120deg, #f5f1ff 0%, #fff 72%); }
.onboarding-next__copy { min-width: 0; }
.onboarding-next__copy > span { color: var(--primary-strong); font-size: .62rem; font-weight: 850; text-transform: uppercase; }
.onboarding-next__copy h3 { margin: 4px 0 6px; font-size: 1rem; }
.onboarding-next__copy p { max-width: 760px; margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.onboarding-next__copy small { display: block; margin-top: 8px; color: #625d74; font-size: .62rem; }
.onboarding-next__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.onboarding-next__actions .button { justify-content: center; text-align: center; }
.ipad-setup-guide { display: grid; grid-template-columns: minmax(210px, .9fr) minmax(420px, 1.8fr) auto; gap: 20px; align-items: center; border: 1px solid #ddd8f4; border-radius: 8px; padding: 18px; background: linear-gradient(120deg, #faf9ff 0%, #fff 68%); }
.ipad-setup-guide__intro { min-width: 0; }
.ipad-setup-guide__intro > span { color: var(--primary-strong); font-size: .61rem; font-weight: 850; text-transform: uppercase; }
.ipad-setup-guide__intro h3 { margin: 4px 0 6px; font-size: 1rem; }
.ipad-setup-guide__intro p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.ipad-setup-guide__options { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border-inline: 1px solid var(--line); }
.ipad-setup-guide__options > div { display: grid; min-width: 0; gap: 4px; padding: 3px 16px; }
.ipad-setup-guide__options > div + div { border-left: 1px solid var(--line); }
.ipad-setup-guide__options strong { font-size: .68rem; }
.ipad-setup-guide__options span { color: var(--muted); font-size: .61rem; line-height: 1.45; overflow-wrap: anywhere; }
.ipad-setup-guide__actions { display: flex; min-width: 170px; flex-direction: column; align-items: stretch; gap: 7px; }
.ipad-setup-guide__actions .button { justify-content: center; text-align: center; }
.ipad-setup-guide__actions .button.is-disabled { cursor: not-allowed; opacity: .58; }
.ipad-setup-guide__subscribe { color: var(--primary-strong); font-size: .62rem; font-weight: 800; line-height: 1.35; text-align: center; text-decoration: none; }
.ipad-setup-guide__subscribe:hover, .ipad-setup-guide__subscribe:focus-visible { text-decoration: underline; }
.onboarding-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.onboarding-step { display: grid; min-width: 0; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 12px; color: var(--ink); background: var(--surface); text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.onboarding-step:hover, .onboarding-step:focus-visible { border-color: #b8a9f2; transform: translateY(-1px); }
.onboarding-step > span:first-child { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--muted); background: var(--surface-soft); font-size: .68rem; font-weight: 850; }
.onboarding-step > span:last-child { display: grid; min-width: 0; gap: 3px; }
.onboarding-step strong { font-size: .72rem; }
.onboarding-step small { color: var(--muted); font-size: .62rem; line-height: 1.35; }
.onboarding-step.is-complete { opacity: .68; }
.onboarding-step.is-complete > span:first-child { color: #08725a; background: var(--mint-soft); }
.onboarding-step.is-next { border-color: #a99bf5; background: var(--primary-soft); box-shadow: 0 8px 24px rgba(91, 67, 191, .09); }
@media (max-width: 1180px) {
  .ipad-setup-guide { grid-template-columns: 1fr; align-items: start; }
  .ipad-setup-guide__options { border: 0; }
  .ipad-setup-guide__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 720px) {
  .onboarding-strip__header { align-items: start; }
  .onboarding-strip__controls { align-items: flex-end; flex-direction: column; gap: 5px; }
  .onboarding-next { align-items: stretch; flex-direction: column; }
  .onboarding-next__actions { display: grid; grid-template-columns: 1fr; }
  .ipad-setup-guide__options, .onboarding-steps { grid-template-columns: 1fr; }
  .ipad-setup-guide__options > div { padding: 10px 0; }
  .ipad-setup-guide__options > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .ipad-setup-guide__actions { display: grid; grid-template-columns: 1fr; }
}