:root {
  --ui-ink: #0d2f4f;
  --ui-blue: #1f68ad;
  --ui-green: #178b57;
  --ui-red: #a9343f;
  --ui-yellow: #f2b635;
  --ui-border: #dbe5ef;
}

.dashboard-feedback-dialog {
  position: fixed;
  inset: 0;
  width: min(31rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  overflow: auto;
  border: 0;
  border-radius: 1.3rem;
  background: #fff;
  padding: 0;
  color: var(--ui-ink);
  box-shadow: 0 1.75rem 5rem rgb(4 25 45 / .34);
}
.dashboard-feedback-dialog::backdrop { background: rgb(4 25 45 / .7); backdrop-filter: blur(4px); }
.dashboard-feedback-dialog__panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.5rem; }
.dashboard-feedback-dialog__icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; background: #dcfce7; color: #166534; font-size: 1.3rem; font-weight: 950; }
.dashboard-feedback-dialog[data-tone="warning"] .dashboard-feedback-dialog__icon { background: #fef3c7; color: #92400e; }
.dashboard-feedback-dialog[data-tone="error"] .dashboard-feedback-dialog__icon { background: #fee2e2; color: #991b1b; }
.dashboard-feedback-dialog__eyebrow { margin: 0 0 .25rem; color: #16864d; font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-feedback-dialog h2 { margin: 0; color: var(--ui-ink); font-size: 1.25rem; font-weight: 950; }
.dashboard-feedback-dialog [data-feedback-text] { margin-top: .55rem; color: #52677b; font-size: .84rem; line-height: 1.6; }
.dashboard-feedback-dialog__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .65rem; margin-top: .25rem; padding-top: 1rem; border-top: 1px solid var(--ui-border); }
.dashboard-feedback-dialog__actions button { min-height: 2.65rem; border-radius: .75rem; padding: .65rem 1rem; font-size: .78rem; font-weight: 900; cursor: pointer; }
.dashboard-feedback-dialog__cancel { border: 1px solid #cbd5e1; background: #fff; color: #475569; }
.dashboard-feedback-dialog__confirm { border: 1px solid #116a42; background: var(--ui-green); color: #fff; }
.dashboard-feedback-dialog[data-tone="warning"] .dashboard-feedback-dialog__confirm { border-color: #b77908; background: var(--ui-yellow); color: #3e2b00; }
.dashboard-feedback-dialog[data-tone="error"] .dashboard-feedback-dialog__confirm { border-color: #8d2631; background: var(--ui-red); }

@media (max-width: 32rem) {
  .dashboard-feedback-dialog__panel { grid-template-columns: 1fr; padding: 1.2rem; }
  .dashboard-feedback-dialog__actions { grid-column: auto; flex-direction: column-reverse; }
  .dashboard-feedback-dialog__actions button { width: 100%; }
}

.site-cart-link {
  position: relative;
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  border: 1px solid #bce8ff;
  border-radius: .9rem;
  background: #eef9ff;
  color: #196cc4;
  box-shadow: 0 .5rem 1rem rgb(13 47 79 / .08);
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.site-cart-link:hover { transform: translateY(-1px); background: #d9f1ff; box-shadow: 0 .75rem 1.2rem rgb(13 47 79 / .13); }
.site-cart-link svg,
.mobile-cart-link svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-cart-link__count {
  position: absolute;
  top: -.42rem;
  right: -.42rem;
  display: grid;
  min-width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #1d87e5;
  padding-inline: .25rem;
  color: #fff;
  font-size: .62rem;
  font-weight: 900;
}
.mobile-cart-link { display: flex; align-items: center; gap: .65rem; border: 1px solid #bce8ff; border-radius: .8rem; background: #eef9ff; padding: .75rem; color: #1a4d7e; font-weight: 800; }
.mobile-cart-link strong { display: grid; min-width: 1.45rem; height: 1.45rem; margin-left: auto; place-items: center; border-radius: 999px; background: #1d87e5; color: #fff; font-size: .7rem; }

.dashboard-header-action svg,
.dashboard-button svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dashboard-header-action { border: 1px solid rgb(255 255 255 / .38); transition: transform .16s ease, box-shadow .16s ease; }
.dashboard-header-action:hover { transform: translateY(-1px); }
.dashboard-header-action--muted { border-color: #bce8ff; background: #fff; color: #1a4d7e; }

.dashboard-form-card {
  border: 1px solid var(--ui-border);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.97);
  padding: clamp(1rem, 3vw, 1.75rem);
  box-shadow: 0 .85rem 2rem rgb(13 47 79 / .08);
}
.address-form-card { max-width: 70rem; }
.dashboard-form-intro { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; border-bottom: 1px solid #e5edf3; padding-bottom: 1rem; }
.dashboard-form-intro__icon { display: grid; width: 2.8rem; height: 2.8rem; flex: none; place-items: center; border-radius: .9rem; background: #eef9ff; color: #1b5ba0; }
.dashboard-form-intro__icon svg,
.address-card svg,
.address-empty-state svg,
.client-order-card svg,
.client-order-panel svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-form-intro h2 { color: var(--ui-ink); font-size: 1.08rem; font-weight: 900; }
.dashboard-form-intro p { margin-top: .15rem; color: #64748b; font-size: .78rem; }
.dashboard-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dashboard-field { display: grid; align-content: start; gap: .4rem; }
.dashboard-field--wide { grid-column: 1 / -1; }
.dashboard-field label { color: #233f59; font-size: .76rem; font-weight: 900; }
.dashboard-field label > span[aria-hidden] { color: var(--ui-red); }
.dashboard-field input:not([type=checkbox]),
.dashboard-field select,
.dashboard-field textarea { width: 100%; min-height: 3rem; border: 1px solid #b8c8d6; border-radius: .75rem; background: #fff; padding: .75rem; color: #173653; outline: none; transition: border-color .16s ease, box-shadow .16s ease; }
.dashboard-field textarea { min-height: 7rem; }
.dashboard-field input:focus,
.dashboard-field select:focus,
.dashboard-field textarea:focus { border-color: #1d87e5; box-shadow: 0 0 0 3px rgb(51 166 245 / .14); }
.dashboard-field--invalid input,
.dashboard-field--invalid select,
.dashboard-field--invalid textarea { border-color: #c64c57; background: #fffafa; }
.dashboard-field-help { color: #64748b; font-size: .68rem; line-height: 1.45; }
.dashboard-field-error,
.dashboard-form-error-summary { color: #9f2f39; font-size: .72rem; font-weight: 800; }
.dashboard-form-error-summary { margin-bottom: 1rem; border: 1px solid #efc4c8; border-radius: .8rem; background: #fff7f7; padding: .8rem; }
.dashboard-field--checkbox { align-content: stretch; }
.dashboard-check { display: flex; height: 100%; align-items: flex-start; gap: .7rem; border: 1px solid #dbe5ef; border-radius: .85rem; background: #f8fbfd; padding: .85rem; cursor: pointer; }
.dashboard-check input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: #16864d; }
.dashboard-check strong,
.dashboard-check small { display: block; }
.dashboard-check small { margin-top: .2rem; color: #64748b; font-weight: 500; line-height: 1.45; }
.dashboard-form-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.25rem; border-top: 1px solid #e5edf3; padding-top: 1rem; }

.dashboard-button {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  background: var(--ui-green);
  padding: .65rem .9rem;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  box-shadow: 0 .5rem 1rem rgb(13 47 79 / .1);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.dashboard-button:hover { transform: translateY(-1px); box-shadow: 0 .7rem 1.2rem rgb(13 47 79 / .16); }
.dashboard-button--confirm { background: var(--ui-green); }
.dashboard-button--secondary { background: var(--ui-blue); }
.dashboard-button--primary,.dashboard-button--preview { background: var(--ui-blue); }
.dashboard-button--edit { border-color: #dca51f; background: var(--ui-yellow); color: #3e2b00; }
.dashboard-button--danger { background: var(--ui-red); }
.dashboard-button--danger-outline { border-color: #e4a4aa; background: #fff; color: #922d38; box-shadow: none; }
.dashboard-button--compact { min-height: 2.3rem; padding: .45rem .65rem; font-size: .7rem; box-shadow: none; }
.dashboard-button:disabled { opacity: .58; cursor: not-allowed; transform: none; box-shadow: none; }

.address-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.address-card { display: flex; min-height: 21rem; flex-direction: column; border: 1px solid var(--ui-border); border-radius: 1.25rem; background: #fff; padding: 1.25rem; box-shadow: 0 .8rem 1.8rem rgb(13 47 79 / .07); }
.address-card--default { border-color: #80d8a7; box-shadow: inset 0 .22rem #24a561, 0 .8rem 1.8rem rgb(13 47 79 / .08); }
.address-card__top { display: flex; align-items: center; gap: .75rem; }
.address-card__icon { display: grid; width: 2.7rem; height: 2.7rem; flex: none; place-items: center; border-radius: .85rem; background: #eef9ff; color: #1b5ba0; }
.address-card__label { display: block; color: var(--ui-ink); font-size: .82rem; font-weight: 900; text-transform: capitalize; }
.address-card__badge { display: inline-flex; margin-top: .2rem; border-radius: 999px; background: #d8f5e3; padding: .2rem .5rem; color: #115536; font-size: .62rem; font-weight: 900; }
.address-card h2 { margin-top: 1rem; color: var(--ui-ink); font-size: 1.05rem; font-weight: 900; }
.address-card address { margin-top: .45rem; color: #5f7185; font-size: .8rem; font-style: normal; line-height: 1.65; }
.address-card__purposes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.address-card__purposes span { border-radius: 999px; background: #eef3f7; padding: .25rem .55rem; color: #536b83; font-size: .64rem; font-weight: 850; }
.address-card__actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; border-top: 1px solid #e5edf3; padding-top: 1rem; }
.address-card__actions form { display: contents; }
.address-card__actions .dashboard-button { flex: 1 1 auto; }
.dashboard-empty-state { border: 1px dashed #b8c8d6; border-radius: 1.25rem; background: rgba(255,255,255,.8); padding: 2rem; text-align: center; }
.dashboard-empty-state h2 { margin-top: .75rem; color: var(--ui-ink); font-size: 1.1rem; font-weight: 900; }
.dashboard-empty-state p { margin: .35rem auto 1rem; color: #64748b; font-size: .82rem; }
.address-empty-state { grid-column: 1 / -1; }
.address-empty-state > span { display: grid; width: 4rem; height: 4rem; margin: 0 auto; place-items: center; border-radius: 50%; background: #eef9ff; color: #1b5ba0; }

.client-order-list { display: grid; gap: .8rem; }
.client-order-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; border: 1px solid var(--ui-border); border-radius: 1.1rem; background: #fff; padding: 1rem; box-shadow: 0 .65rem 1.5rem rgb(13 47 79 / .06); transition: transform .16s ease, border-color .16s ease; }
.client-order-card:hover { transform: translateY(-2px); border-color: #80d8a7; }
.client-order-card__icon { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: .85rem; background: #eef9ff; color: #1b5ba0; }
.client-order-card__reference { color: #126b40; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.client-order-card h2 { margin-top: .15rem; color: var(--ui-ink); font-size: 1rem; font-weight: 900; }
.client-order-card p { margin-top: .15rem; color: #64748b; font-size: .74rem; }
.client-order-card__total { text-align: right; }
.client-order-card__total strong { display: block; color: var(--ui-ink); font-size: .9rem; }
.client-order-card__arrow { color: #1b5ba0; font-size: 1.3rem; font-weight: 900; }
.client-order-status { display: inline-flex; margin-top: .35rem; border-radius: 999px; background: #fff0cf; padding: .25rem .55rem; color: #714913; font-size: .62rem; font-weight: 900; }
.client-order-status--confirmed,
.client-order-status--preparing,
.client-order-status--shipped,
.client-order-status--delivered { background: #d8f5e3; color: #115536; }
.client-order-status--cancelled { background: #fee2e2; color: #991b1b; }
.client-order-status--payment-paid, .client-order-status--payment-demo_approved { background: #d8f5e3; color: #115536; }
.client-order-status--payment-failed { background: #fee2e2; color: #991b1b; }
.client-order-status--payment-expired { background: #edf0f4; color: #4e5d70; }
.client-order-status--payment-review { background: #fff0d8; color: #86480a; }
.client-order-overview { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--ui-border); border-radius: 1.2rem; background: #fff; padding: 1.25rem; box-shadow: 0 .7rem 1.6rem rgb(13 47 79 / .06); }
.client-order-overview h2 { margin-top: .35rem; color: var(--ui-ink); font-size: 1.2rem; font-weight: 900; }
.client-order-overview p,
.client-order-overview small { display: block; color: #64748b; font-size: .72rem; }
.client-order-overview > div:last-child { text-align: right; }
.client-order-overview > div:last-child span { color: #64748b; font-size: .68rem; font-weight: 800; }
.client-order-overview > div:last-child strong { display: block; color: var(--ui-ink); font-size: 1.25rem; }
.client-order-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, .7fr); gap: 1rem; margin-top: 1rem; align-items: start; }
.client-order-sidebar { display: grid; gap: 1rem; }
.client-order-panel { border: 1px solid var(--ui-border); border-radius: 1.2rem; background: #fff; padding: 1.25rem; box-shadow: 0 .7rem 1.6rem rgb(13 47 79 / .06); }
.client-order-panel__heading { display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid #e5edf3; padding-bottom: .85rem; }
.client-order-panel__heading > span { display: grid; width: 2.5rem; height: 2.5rem; flex: none; place-items: center; border-radius: .75rem; background: #eef9ff; color: #1b5ba0; }
.client-order-panel__heading h2 { color: var(--ui-ink); font-size: 1rem; font-weight: 900; }
.client-order-panel__heading p { margin-top: .12rem; color: #64748b; font-size: .7rem; }
.client-timeline { position: relative; display: grid; gap: 0; margin-top: 1rem; }
.client-timeline::before { content: ""; position: absolute; top: .55rem; bottom: .55rem; left: .42rem; width: 2px; background: #dbe5ef; }
.client-timeline li { position: relative; display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .8rem; padding-bottom: 1.1rem; }
.client-timeline__marker { z-index: 1; width: .9rem; height: .9rem; margin-top: .3rem; border: 3px solid #fff; border-radius: 50%; background: #24a561; box-shadow: 0 0 0 2px #80d8a7; }
.client-timeline p { margin-top: .45rem; color: #405a72; font-size: .8rem; line-height: 1.55; }
.client-timeline time { display: block; margin-top: .3rem; color: #8293a4; font-size: .66rem; font-weight: 800; }
.client-order-products { display: grid; gap: .7rem; margin-top: .9rem; }
.client-order-products article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; border-radius: .85rem; background: #f7fafc; padding: .8rem; }
.client-order-products article > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .6rem; background: #d8f5e3; color: #115536; font-size: .72rem; font-weight: 900; }
.client-order-products h3 { color: var(--ui-ink); font-size: .82rem; font-weight: 900; }
.client-order-products small { color: #718396; font-size: .65rem; }
.client-order-products p { margin-top: .25rem; color: #5f7185; font-size: .7rem; line-height: 1.45; }
.client-order-products strong { display: block; margin-top: .35rem; color: var(--ui-ink); font-size: .78rem; }
.client-order-address { display: grid; gap: .25rem; margin-top: .9rem; color: #5f7185; font-size: .78rem; font-style: normal; line-height: 1.5; }
.client-order-address strong { color: var(--ui-ink); font-size: .88rem; }

@media (max-width: 48rem) {
  .dashboard-form-grid,
  .client-order-layout { grid-template-columns: 1fr; }
  .dashboard-field--wide { grid-column: auto; }
  .dashboard-form-actions { flex-direction: column-reverse; }
  .dashboard-form-actions .dashboard-button { width: 100%; }
  .client-order-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .client-order-card__total { grid-column: 2; text-align: left; }
  .client-order-card__arrow { grid-column: 3; grid-row: 1 / span 2; }
  .client-order-overview { align-items: flex-start; flex-direction: column; }
  .client-order-overview > div:last-child { text-align: left; }
}