/* Backyard Studio Decision MVP 2.0.0 — product layer over the SVG-native editor. */
:root {
  --ds-workflow-h: 66px;
  --ds-forest: #12362d;
  --ds-forest-2: #1d5546;
  --ds-lime: #cfff74;
  --ds-sand: #f3ede0;
  --ds-blue: #306d82;
  --ds-orange: #c86f39;
  --ds-shadow-lg: 0 24px 80px rgba(12, 34, 28, .25);
  --ds-shadow-sm: 0 8px 24px rgba(14, 42, 34, .12);
}
.app-shell { grid-template-rows: var(--topbar-h) var(--ds-workflow-h) 1fr; }
.topbar { grid-template-columns: minmax(205px, auto) minmax(160px, 1fr) auto; }
.brand span { color: rgba(255,255,255,.72); }
.ds-brand-thesis { max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-top-button { white-space: nowrap; }
.ds-pass-button { background: var(--ds-lime) !important; color: var(--ds-forest) !important; border-color: var(--ds-lime) !important; }
.ds-pass-button.unlocked { background: rgba(207,255,116,.16) !important; color: var(--ds-lime) !important; border-color: rgba(207,255,116,.4) !important; }
.ds-avatar-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%; background: rgba(255,255,255,.10); color: white; border: 1px solid rgba(255,255,255,.22); font-size: calc(11px * var(--bs-font-scale, 1)); font-weight: 800; }
.ds-workflow-bar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; padding: 8px 12px; background: #f9faf8; border-bottom: 1px solid var(--line); box-shadow: 0 3px 12px rgba(20,47,38,.06); z-index: 15; }
.ds-workflow-steps { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 7px; }
.ds-workflow-step { min-width: 0; display: grid; grid-template-columns: 27px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 9px; border: 1px solid #dfe5e0; border-radius: 9px; background: white; color: #52615b; text-align: left; }
.ds-workflow-step:hover { border-color: #a8c2b6; box-shadow: 0 3px 10px rgba(24,55,47,.07); }
.ds-workflow-step.active { border-color: var(--ds-forest-2); box-shadow: inset 0 0 0 1px var(--ds-forest-2); }
.ds-workflow-step.complete { background: #f2f8f4; border-color: #bcd8c6; }
.ds-step-index { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; background: #edf1ee; color: #6a766f; font-size: calc(10px * var(--bs-font-scale, 1)); font-weight: 850; }
.ds-workflow-step.complete .ds-step-index { background: #d9f1df; color: #1f6a3e; }
.ds-workflow-step.active .ds-step-index { background: var(--ds-forest); color: white; }
.ds-step-copy { min-width: 0; }
.ds-step-copy strong { display: block; font-size: calc(10.5px * var(--bs-font-scale, 1)); color: var(--ink); white-space: nowrap; }
.ds-step-copy small { display: block; margin-top: 1px; font-size: calc(8.5px * var(--bs-font-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-step-time { font-size: calc(8px * var(--bs-font-scale, 1)); font-weight: 800; color: #829089; white-space: nowrap; }
.ds-session-meter { min-width: 126px; display: grid; align-content: center; padding: 4px 9px; border-left: 1px solid var(--line); }
.ds-session-meter span { font-size: calc(8px * var(--bs-font-scale, 1)); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: #7b8882; }
.ds-session-meter strong { margin-top: 2px; font-size: calc(12px * var(--bs-font-scale, 1)); font-variant-numeric: tabular-nums; color: var(--ds-forest); }
.ds-session-meter .ds-progress-track { margin-top: 4px; height: 4px; border-radius: 99px; background: #e1e7e3; overflow: hidden; }
.ds-session-meter .ds-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--ds-forest-2); transition: width .25s ease; }

/* Decision drawer */
.ds-drawer { position: fixed; z-index: 120; top: calc(var(--topbar-h) + var(--ds-workflow-h)); right: 0; bottom: 0; width: min(490px, 96vw); display: grid; grid-template-rows: auto auto 1fr; background: #fbfcfa; border-left: 1px solid #cfd7d2; box-shadow: -16px 0 50px rgba(13,36,29,.18); transform: translateX(105%); transition: transform .22s ease; }
.ds-drawer.open { transform: translateX(0); }
.ds-drawer-header { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; padding: 16px 17px 12px; border-bottom: 1px solid var(--line); background: white; }
.ds-drawer-header .eyebrow { color: var(--ds-forest-2); }
.ds-drawer-header h2 { margin: 3px 0 2px; font-size: calc(17px * var(--bs-font-scale, 1)); }
.ds-drawer-header p { margin: 0; color: var(--muted); font-size: calc(10px * var(--bs-font-scale, 1)); line-height: 1.45; }
.ds-close { width: 31px; height: 31px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: white; font-size: calc(20px * var(--bs-font-scale, 1)); line-height: 1; }
.ds-drawer-tabs { display: flex; gap: 3px; padding: 7px 8px; overflow-x: auto; border-bottom: 1px solid var(--line); background: #f2f5f2; }
.ds-drawer-tab { flex: none; border: 0; border-radius: 6px; background: transparent; padding: 7px 9px; color: #6e7974; font-size: calc(9.5px * var(--bs-font-scale, 1)); font-weight: 750; }
.ds-drawer-tab.active { color: var(--ds-forest); background: white; box-shadow: 0 1px 4px rgba(20,45,37,.1); }
.ds-drawer-body { min-height: 0; overflow: auto; padding: 15px 16px 28px; scrollbar-width: thin; }
.ds-section { margin-bottom: 18px; }
.ds-section:last-child { margin-bottom: 0; }
.ds-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.ds-section-head h3 { margin: 0; font-size: calc(12px * var(--bs-font-scale, 1)); }
.ds-section-head small { color: var(--muted); font-size: calc(8.5px * var(--bs-font-scale, 1)); }
.ds-card { border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: 0 2px 7px rgba(15,39,31,.04); padding: 12px; }
.ds-card + .ds-card { margin-top: 9px; }
.ds-hero-card { color: white; background: linear-gradient(135deg, #153d32, #24624f); border: 0; padding: 16px; }
.ds-hero-card h3 { margin: 3px 0 7px; font-size: calc(17px * var(--bs-font-scale, 1)); }
.ds-hero-card p { margin: 0; color: rgba(255,255,255,.76); font-size: calc(10px * var(--bs-font-scale, 1)); line-height: 1.55; }
.ds-score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ds-score { padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.ds-score span { display: block; font-size: calc(8px * var(--bs-font-scale, 1)); text-transform: uppercase; letter-spacing: .06em; color: #78847e; font-weight: 800; }
.ds-score strong { display: block; margin-top: 4px; font-size: calc(14px * var(--bs-font-scale, 1)); }
.ds-next-action { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.ds-next-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #e4f0e9; color: var(--ds-forest-2); font-size: calc(16px * var(--bs-font-scale, 1)); }
.ds-next-action strong { display: block; font-size: calc(11px * var(--bs-font-scale, 1)); }
.ds-next-action small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(8.5px * var(--bs-font-scale, 1)); line-height: 1.35; }
.ds-status-list { display: grid; gap: 6px; }
.ds-status-row { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid #e2e6e3; border-radius: 8px; background: #fff; }
.ds-status-dot { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #edf0ee; color: #75817b; font-size: calc(10px * var(--bs-font-scale, 1)); font-weight: 900; }
.ds-status-row.complete .ds-status-dot { background: #d9f0df; color: #1d6a3d; }
.ds-status-row strong { display: block; font-size: calc(10px * var(--bs-font-scale, 1)); }
.ds-status-row small { display: block; color: var(--muted); font-size: calc(8px * var(--bs-font-scale, 1)); margin-top: 1px; }
.ds-status-row > em { font-style: normal; font-size: calc(8px * var(--bs-font-scale, 1)); font-weight: 800; color: #87938d; }
.ds-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds-form-grid .field { margin-bottom: 0; }
.ds-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ds-check-card { display: flex; gap: 7px; align-items: flex-start; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: calc(9.5px * var(--bs-font-scale, 1)); line-height: 1.35; }
.ds-check-card input { margin: 1px 0 0; accent-color: var(--ds-forest-2); }
.ds-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ds-actions.end { justify-content: flex-end; }
.ds-divider { height: 1px; background: var(--line); margin: 14px 0; }
.ds-note { padding: 9px 10px; border-radius: 8px; background: #f1f5f2; border: 1px solid #dce5df; color: #53635b; font-size: calc(8.8px * var(--bs-font-scale, 1)); line-height: 1.45; }
.ds-note.warning { background: #fff8ea; border-color: #ead8ac; color: #75531c; }
.ds-note.danger { background: #fff2f1; border-color: #ecc0bc; color: #853b35; }

/* Recipes */
.ds-recipe-grid { display: grid; gap: 8px; }
.ds-recipe-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.ds-recipe-card:hover { border-color: #a9c0b5; }
.ds-recipe-card h4 { margin: 2px 0 4px; font-size: calc(11px * var(--bs-font-scale, 1)); }
.ds-recipe-card p { margin: 0; color: var(--muted); font-size: calc(8.7px * var(--bs-font-scale, 1)); line-height: 1.45; }
.ds-recipe-badge { display: inline-block; padding: 3px 5px; border-radius: 4px; background: #edf5ef; color: #34634d; font-size: calc(7.5px * var(--bs-font-scale, 1)); font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.ds-recipe-price { text-align: right; font-size: calc(11px * var(--bs-font-scale, 1)); font-weight: 850; color: var(--ds-forest); }
.ds-recipe-card .button { grid-column: 1 / -1; }

/* Budget studio */
.ds-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ds-tier-card { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.ds-tier-card.selected { border-color: var(--ds-forest-2); box-shadow: inset 0 0 0 1px var(--ds-forest-2); }
.ds-tier-card label { display: block; color: var(--muted); font-size: calc(8px * var(--bs-font-scale, 1)); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.ds-tier-card input[type=text] { width: 100%; margin: 3px 0 5px; padding: 0; border: 0; background: transparent; font-size: calc(10px * var(--bs-font-scale, 1)); font-weight: 800; outline: none; }
.ds-tier-card strong { display: block; font-size: calc(15px * var(--bs-font-scale, 1)); }
.ds-tier-card small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(8px * var(--bs-font-scale, 1)); }
.ds-cost-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: white; }
.ds-cost-table { width: 100%; border-collapse: collapse; font-size: calc(8.5px * var(--bs-font-scale, 1)); }
.ds-cost-table th { position: sticky; top: 0; z-index: 1; padding: 7px 6px; background: #eef2ef; color: #68756f; text-align: right; font-size: calc(7.5px * var(--bs-font-scale, 1)); text-transform: uppercase; letter-spacing: .05em; }
.ds-cost-table th:first-child, .ds-cost-table td:first-child { text-align: left; }
.ds-cost-table td { padding: 7px 6px; border-top: 1px solid #edf0ed; text-align: right; vertical-align: middle; }
.ds-cost-table td strong { display: block; font-size: calc(8.8px * var(--bs-font-scale, 1)); }
.ds-cost-table td small { display: block; margin-top: 1px; color: var(--muted); font-size: calc(7.3px * var(--bs-font-scale, 1)); }
.ds-cost-input { width: 64px; height: 27px; padding: 3px 5px; text-align: right; border: 1px solid #d9dfdb; border-radius: 5px; background: white; font-size: calc(8.5px * var(--bs-font-scale, 1)); }

/* Purchase and scope */
.ds-purchase-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.ds-purchase-summary > div { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.ds-purchase-summary span { display: block; color: var(--muted); font-size: calc(7.5px * var(--bs-font-scale, 1)); text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.ds-purchase-summary strong { display: block; margin-top: 3px; font-size: calc(11px * var(--bs-font-scale, 1)); }
.ds-plan-phase { margin-bottom: 9px; border: 1px solid var(--line); border-radius: 9px; background: white; overflow: hidden; }
.ds-phase-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; background: #edf2ee; }
.ds-phase-head strong { font-size: calc(9.5px * var(--bs-font-scale, 1)); }
.ds-phase-head span { color: var(--muted); font-size: calc(8px * var(--bs-font-scale, 1)); }
.ds-purchase-item { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 8px; align-items: start; padding: 8px 10px; border-top: 1px solid #edf0ed; }
.ds-purchase-item input[type=checkbox] { margin: 2px 0 0; accent-color: var(--ds-forest-2); }
.ds-purchase-item strong { display: block; font-size: calc(9px * var(--bs-font-scale, 1)); }
.ds-purchase-item small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(7.8px * var(--bs-font-scale, 1)); line-height: 1.35; }
.ds-purchase-item em { font-style: normal; font-size: calc(8px * var(--bs-font-scale, 1)); font-weight: 800; }
.ds-text-list { min-height: 105px; }
.ds-flag { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; align-items: start; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: white; margin-bottom: 6px; }
.ds-flag-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: #fff2de; color: #955a13; font-size: calc(11px * var(--bs-font-scale, 1)); }
.ds-flag.required .ds-flag-icon { background: #ffe5e2; color: #a23831; }
.ds-flag.info .ds-flag-icon { background: #e8f1f5; color: #356d80; }
.ds-flag.resolved { opacity: .55; }
.ds-flag strong { display: block; font-size: calc(9px * var(--bs-font-scale, 1)); }
.ds-flag small { display: block; margin-top: 2px; color: var(--muted); font-size: calc(7.8px * var(--bs-font-scale, 1)); line-height: 1.4; }
.ds-flag label { display: flex; gap: 4px; align-items: center; color: var(--muted); font-size: calc(7.5px * var(--bs-font-scale, 1)); }
.ds-flag input { accent-color: var(--ds-forest-2); }

/* Versions */
.ds-version { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: white; margin-bottom: 6px; }
.ds-version-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #edf2ef; color: var(--ds-forest-2); font-weight: 850; }
.ds-version strong { display: block; font-size: calc(9.5px * var(--bs-font-scale, 1)); }
.ds-version small { display: block; color: var(--muted); margin-top: 2px; font-size: calc(7.7px * var(--bs-font-scale, 1)); }

/* Product modal and dashboard */
.ds-modal-root { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.ds-modal-root.open { pointer-events: auto; }
.ds-modal-backdrop { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(7,27,21,.70); backdrop-filter: blur(5px); }
.ds-modal { width: min(820px, 96vw); max-height: min(880px, 95vh); display: grid; grid-template-rows: auto 1fr auto; border-radius: 15px; overflow: hidden; background: #fbfcfa; box-shadow: var(--ds-shadow-lg); }
.ds-modal.wide { width: min(1180px, 97vw); }
.ds-modal.full { width: min(1320px, 98vw); height: min(900px, 96vh); }
.ds-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 17px 20px 14px; background: white; border-bottom: 1px solid var(--line); }
.ds-modal-header h2 { margin: 2px 0 3px; font-size: calc(19px * var(--bs-font-scale, 1)); }
.ds-modal-header p { margin: 0; color: var(--muted); font-size: calc(10px * var(--bs-font-scale, 1)); line-height: 1.45; }
.ds-modal-body { min-height: 0; overflow: auto; padding: 19px 20px 24px; }
.ds-modal-footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 11px 20px; background: #f5f7f5; border-top: 1px solid var(--line); }
.ds-dashboard-hero { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr); gap: 14px; margin-bottom: 18px; }
.ds-dashboard-hero-main { padding: 24px; border-radius: 14px; color: white; background: radial-gradient(circle at 88% 18%, rgba(207,255,116,.22), transparent 28%), linear-gradient(135deg,#12382e,#236450); }
.ds-dashboard-hero-main h1 { max-width: 650px; margin: 5px 0 10px; font-size: clamp(25px, 3vw, 42px); line-height: 1.06; letter-spacing: -.035em; }
.ds-dashboard-hero-main p { max-width: 650px; margin: 0; color: rgba(255,255,255,.78); font-size: calc(12px * var(--bs-font-scale, 1)); line-height: 1.6; }
.ds-dashboard-hero-main .ds-actions { margin-top: 18px; }
.ds-time-contract { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.ds-time-contract h3 { margin: 0 0 4px; font-size: calc(12px * var(--bs-font-scale, 1)); }
.ds-time-row { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 9px; padding: 8px; border-radius: 8px; background: #f3f6f3; }
.ds-time-row strong { color: var(--ds-forest-2); font-size: calc(9px * var(--bs-font-scale, 1)); }
.ds-time-row span { font-size: calc(8.7px * var(--bs-font-scale, 1)); line-height: 1.35; }
.ds-dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 14px; }
.ds-property-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.ds-property-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 3px 12px rgba(19,48,39,.06); }
.ds-property-thumb { height: 120px; display: grid; place-items: center; overflow: hidden; background: #d9dfda; border-bottom: 1px solid var(--line); }
.ds-property-thumb svg { width: 100%; height: 100%; }
.ds-property-copy { padding: 11px; }
.ds-property-copy h3 { margin: 0; font-size: calc(11.5px * var(--bs-font-scale, 1)); }
.ds-property-copy p { margin: 3px 0 8px; color: var(--muted); font-size: calc(8.5px * var(--bs-font-scale, 1)); }
.ds-property-meta { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 9px; font-size: calc(8px * var(--bs-font-scale, 1)); color: #6e7a74; }
.ds-side-stack { display: grid; gap: 10px; align-content: start; }
.ds-plan-card { border: 1px solid var(--line); border-radius: 12px; background: white; padding: 13px; }
.ds-plan-card h3 { margin: 0 0 4px; font-size: calc(11px * var(--bs-font-scale, 1)); }
.ds-plan-card p { margin: 0 0 10px; color: var(--muted); font-size: calc(8.7px * var(--bs-font-scale, 1)); line-height: 1.45; }
.ds-plan-price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 9px; }
.ds-plan-price strong { font-size: calc(24px * var(--bs-font-scale, 1)); }
.ds-plan-price span { color: var(--muted); font-size: calc(9px * var(--bs-font-scale, 1)); }
.ds-feature-list { display: grid; gap: 5px; margin: 9px 0; }
.ds-feature-list div { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 6px; font-size: calc(8.5px * var(--bs-font-scale, 1)); line-height: 1.35; }
.ds-feature-list div::before { content: "✓"; color: #24704a; font-weight: 900; }

/* Package */
.ds-package-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 12px; }
.ds-package-summary .ds-score { min-height: 72px; }
.ds-package-preview { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 12px; }
.ds-plan-preview { overflow: hidden; min-height: 420px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #dde2de; }
.ds-plan-preview svg { width: 100%; height: 100%; max-height: 630px; background: white; }
.ds-package-outline { display: grid; gap: 8px; align-content: start; }
.ds-package-section { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.ds-package-section h3 { margin: 0 0 6px; font-size: calc(10px * var(--bs-font-scale, 1)); }
.ds-package-section ul { margin: 0; padding-left: 16px; color: #59665f; font-size: calc(8.4px * var(--bs-font-scale, 1)); line-height: 1.5; }
.ds-paywall { text-align: center; padding: 24px 18px; border: 1px solid #cbd9d1; border-radius: 13px; background: radial-gradient(circle at 80% 0, rgba(207,255,116,.32), transparent 25%), #f3f8f4; }
.ds-paywall .ds-lock { width: 52px; height: 52px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 14px; background: var(--ds-forest); color: var(--ds-lime); font-size: calc(22px * var(--bs-font-scale, 1)); }
.ds-paywall h3 { margin: 0; font-size: calc(18px * var(--bs-font-scale, 1)); }
.ds-paywall p { max-width: 520px; margin: 7px auto 13px; color: var(--muted); font-size: calc(10px * var(--bs-font-scale, 1)); line-height: 1.55; }
.ds-paywall-price { margin-bottom: 12px; font-size: calc(11px * var(--bs-font-scale, 1)); }
.ds-paywall-price strong { font-size: calc(28px * var(--bs-font-scale, 1)); color: var(--ds-forest); }

/* Checkout */
.ds-checkout-card { max-width: 540px; margin: 0 auto; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.ds-checkout-line { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ds-checkout-line:last-child { border-bottom: 0; }
.ds-checkout-line strong { font-size: calc(11px * var(--bs-font-scale, 1)); }
.ds-checkout-line span { font-size: calc(11px * var(--bs-font-scale, 1)); font-weight: 850; }

/* Toast */
.ds-toast-root { position: fixed; z-index: 500; right: 16px; bottom: 16px; display: grid; gap: 7px; pointer-events: none; }
.ds-toast { max-width: 370px; padding: 10px 12px; border-radius: 9px; background: #173a30; color: white; box-shadow: var(--ds-shadow-sm); font-size: calc(9.5px * var(--bs-font-scale, 1)); line-height: 1.4; }
.ds-toast.warning { background: #805813; }
.ds-toast.error { background: #8e302c; }
.ds-toast.success { background: #246a43; }

@media (max-width: 1260px) {
  .topbar { grid-template-columns: minmax(165px, auto) minmax(120px, 1fr) auto; gap: 8px; }
  .top-actions { gap: 4px; }
  .ds-top-button span.ds-hide-narrow { display: none; }
  .ds-workflow-step { grid-template-columns: 25px minmax(0,1fr); }
  .ds-step-time { display: none; }
}
@media (max-width: 1050px) {
  :root { --ds-workflow-h: 57px; }
  .ds-workflow-bar { padding: 6px 8px; }
  .ds-step-copy small { display: none; }
  .ds-workflow-step { padding: 5px 7px; }
  .ds-session-meter { display: none; }
  .ds-dashboard-hero, .ds-dashboard-grid, .ds-package-preview { grid-template-columns: 1fr; }
  .ds-property-grid { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .app-shell { grid-template-rows: var(--topbar-h) var(--ds-workflow-h) 1fr; }
  .ds-workflow-steps { grid-template-columns: repeat(4, minmax(70px,1fr)); }
  .ds-workflow-step { grid-template-columns: 1fr; place-items: center; text-align: center; gap: 2px; }
  .ds-step-index { width: 23px; height: 23px; }
  .ds-step-copy strong { font-size: calc(8px * var(--bs-font-scale, 1)); }
  .ds-drawer { top: calc(var(--topbar-h) + var(--ds-workflow-h)); width: 100vw; }
  .ds-modal-backdrop { padding: 0; }
  .ds-modal, .ds-modal.wide, .ds-modal.full { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .ds-tier-grid, .ds-score-grid, .ds-package-summary { grid-template-columns: 1fr; }
  .ds-form-grid, .ds-goal-grid { grid-template-columns: 1fr; }
  .ds-purchase-summary { grid-template-columns: 1fr 1fr; }
}