:root {
  --blue-950: #12324f;
  --blue-800: #24567e;
  --blue-700: #2f6f9f;
  --blue-600: #4388b9;
  --blue-200: #cfe8f7;
  --blue-100: #e8f5fc;
  --blue-50: #f4faff;
  --ink: #203447;
  --muted: #60758a;
  --line: #dcebf4;
  --white: #fff;
  --danger: #b42318;
  --shadow: 0 18px 50px rgba(47, 111, 159, .11);
  --radius-lg: 24px;
  --radius-md: 15px;
}

html { font-size: 16px; min-height: 100%; }
body { min-height: 100vh; margin: 0; color: var(--ink); font-family: Inter, "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; }
a { color: var(--blue-700); }
.skip-link { position: fixed; z-index: 9999; top: .5rem; left: .5rem; padding: .6rem 1rem; background: var(--blue-950); color: #fff; border-radius: .5rem; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.public-body, .admin-body { background: linear-gradient(180deg, #eef8fe 0, #f8fcff 280px, #fff 680px); }
.public-header, .admin-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(207,232,247,.9); backdrop-filter: blur(16px); }
.brand-link { display: inline-flex; align-items: center; gap: .7rem; color: var(--blue-950); font-size: 1.05rem; font-weight: 800; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 11px; color: #fff; background: linear-gradient(145deg, var(--blue-600), var(--blue-800)); box-shadow: 0 7px 18px rgba(47,111,159,.25); }
.header-link { color: var(--blue-800); font-weight: 700; text-decoration: none; padding: .55rem .9rem; border-radius: 999px; }
.header-link:hover, .header-link:focus { background: var(--blue-100); }
.page-shell { min-height: calc(100vh - 150px); }
.public-footer { padding: 1.4rem 0; border-top: 1px solid var(--line); background: #f8fcff; color: var(--muted); font-size: .9rem; }

.hero-section { max-width: 760px; margin: 0 auto; padding: 5.5rem 1rem 3rem; }
.eyebrow { display: inline-block; color: var(--blue-700); font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: .8rem; }
h1, h2, h3 { color: var(--blue-950); letter-spacing: -.02em; }
.hero-section h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); font-weight: 850; margin-bottom: 1rem; }
.hero-copy { max-width: 590px; margin: 0 auto; color: var(--muted); font-size: 1.12rem; line-height: 1.8; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 1120px; margin: 0 auto 2rem; }
.service-card { min-height: 290px; display: flex; flex-direction: column; padding: 1.7rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.96); color: var(--ink); text-decoration: none; box-shadow: 0 8px 30px rgba(47,111,159,.07); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.service-card:hover, .service-card:focus-visible { color: var(--ink); transform: translateY(-5px); border-color: #a9d8f2; box-shadow: var(--shadow); outline: 3px solid rgba(67,136,185,.18); outline-offset: 2px; }
.service-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 17px; color: var(--blue-800); background: var(--blue-100); font-size: 1.7rem; margin-bottom: 1.5rem; }
.service-card-title { color: var(--blue-950); font-size: 1.25rem; font-weight: 800; margin-bottom: .75rem; }
.service-card-copy { color: var(--muted); line-height: 1.75; }
.service-card-action { margin-top: auto; padding-top: 1.4rem; color: var(--blue-700); font-weight: 800; }
.track-callout { max-width: 1120px; margin: 2rem auto 5rem; padding: 2rem 2.2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border: 1px solid #cfe7f5; border-radius: var(--radius-lg); background: linear-gradient(135deg, #e8f6fd, #f8fcff); }
.track-callout h2 { font-size: 1.35rem; font-weight: 800; margin-bottom: .4rem; }
.track-callout p { margin: 0; color: var(--muted); }

.btn { border-radius: 12px; font-weight: 750; padding: .7rem 1.15rem; }
.btn-lg { padding: .9rem 1.45rem; font-size: 1rem; }
.btn-primary { --bs-btn-bg: var(--blue-700); --bs-btn-border-color: var(--blue-700); --bs-btn-hover-bg: var(--blue-800); --bs-btn-hover-border-color: var(--blue-800); --bs-btn-active-bg: var(--blue-950); }
.btn-soft { color: var(--blue-800); background: var(--blue-100); border: 1px solid #c9e5f5; }
.btn-soft:hover, .btn-soft:focus { color: var(--blue-950); background: #d9f0fb; }
.btn:focus-visible, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 .22rem rgba(67,136,185,.24); }

.wizard-shell { max-width: 880px; margin: 0 auto; padding: 3.2rem 0 5rem; }
.wizard-heading { margin-bottom: 2rem; }
.wizard-heading h1 { font-size: clamp(1.9rem, 4vw, 2.65rem); font-weight: 850; }
.back-link { display: inline-block; margin-bottom: 1.6rem; color: var(--muted); text-decoration: none; font-weight: 650; }
.back-link:hover { color: var(--blue-700); }
.stepper { display: flex; align-items: flex-start; list-style: none; padding: 0; margin: 0 0 2.5rem; counter-reset: step; }
.stepper li { position: relative; flex: 1; display: grid; justify-items: center; gap: .55rem; color: #8194a5; text-align: center; }
.stepper li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; top: 17px; left: 55%; width: 90%; height: 3px; background: #d7e8f2; }
.stepper li span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e3eef5; color: #6e8293; font-weight: 800; }
.stepper li small { font-size: .8rem; font-weight: 700; }
.stepper li.active span { color: #fff; background: var(--blue-700); box-shadow: 0 0 0 6px rgba(67,136,185,.13); }
.stepper li.active { color: var(--blue-950); }
.stepper li.complete span { color: #fff; background: #70b7dd; }
.stepper li.complete:not(:last-child)::after { background: #91cbea; }
.panel-card, .narrow-card, .tracking-result, .result-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: rgba(255,255,255,.98); box-shadow: var(--shadow); }
.panel-card { padding: clamp(1.25rem, 4vw, 2.35rem); }
.panel-card h2 { font-size: 1.5rem; font-weight: 850; margin-bottom: 1.6rem; }
.panel-card h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: 1rem; }
.info-callout, .sensitive-note { padding: 1rem 1.1rem; margin-bottom: 1.5rem; border: 1px solid #cce8f7; border-radius: var(--radius-md); background: var(--blue-50); color: #335a76; }
.info-callout strong { display: block; color: var(--blue-950); margin-bottom: .25rem; }
.info-callout p, .sensitive-note { margin-bottom: 0; line-height: 1.65; }
.sensitive-note { font-size: .9rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.form-field { margin-bottom: 1.35rem; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label, .form-fieldset legend { display: block; margin-bottom: .5rem; color: #2f485e; font-size: .94rem; font-weight: 750; }
.form-fieldset { min-width: 0; padding: 0; margin: 0 0 1.5rem; border: 0; }
.form-field small { display: block; margin-top: .4rem; color: var(--muted); font-size: .82rem; }
.required-mark { color: #d04438; }
.optional-mark { display: inline-block; margin-left: .25rem; color: var(--muted); font-size: .75rem; font-weight: 600; }
.form-control { min-height: 48px; border: 1px solid #cddde7; border-radius: 12px; padding: .72rem .9rem; color: var(--ink); background: #fbfdff; }
textarea.form-control { min-height: 110px; resize: vertical; }
.form-control[readonly] { color: var(--ink); background: #f3f9fd; cursor: default; }
.family-store-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: stretch; }
.family-store-picker .btn { white-space: nowrap; }
.form-control:hover { border-color: #aacfe4; }
.form-control:focus { border-color: var(--blue-600); background: #fff; }

@media (max-width: 640px) {
    .family-store-picker { grid-template-columns: 1fr; }
    .family-store-picker .btn { width: 100%; }
}
.field-error { display: block; min-height: 0; margin-top: .35rem; color: var(--danger); font-size: .84rem; font-weight: 650; }
.field-validation-valid { display: none; }
.input-validation-error { border-color: #db776e; background: #fffafa; }
.validation-summary { color: var(--danger); border-radius: 12px; }
.validation-summary:empty, .validation-summary-valid { display: none; }
.validation-summary-errors { padding: .9rem 1rem; margin-bottom: 1.2rem; border: 1px solid #f0bbb6; background: #fff6f5; }
.validation-summary-errors ul { margin: 0; padding-left: 1.25rem; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.choice-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-stack { display: grid; gap: .65rem; }
.choice-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.choice-card { display: flex; min-height: 96px; flex-direction: column; gap: .3rem; padding: 1rem 1.05rem; border: 2px solid #e1edf4; border-radius: var(--radius-md); background: #fff; color: var(--muted); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.choice-card:hover { border-color: #a8d3ea; transform: translateY(-1px); }
.choice-card.compact { min-height: 62px; justify-content: center; }
.choice-card-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.choice-card-badge { flex: 0 0 auto; padding: .25rem .75rem; border-radius: 999px; color: var(--blue-800); background: var(--blue-100); font-size: .78rem; font-weight: 700; line-height: 1.4; }
.choice-title { color: var(--ink); font-weight: 800; }
.choice-input:focus-visible + .choice-card { outline: 3px solid rgba(67,136,185,.28); outline-offset: 2px; }
.choice-input:checked + .choice-card { border-color: var(--blue-600); background: var(--blue-50); box-shadow: inset 0 0 0 1px var(--blue-600); }
.subsection { padding: 1.2rem; margin: 1rem 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: #f9fcfe; }
.consent-box { display: flex; align-items: flex-start; gap: .7rem; padding: 1rem 1.1rem; border-radius: var(--radius-md); background: var(--blue-50); }
.consent-box .form-check-input { flex: 0 0 auto; margin-top: .2rem; }
.consent-box label { line-height: 1.6; cursor: pointer; }
.attachment-field { padding: 1.1rem; border: 1px dashed #9bcce7; border-radius: var(--radius-md); background: #f8fcff; }
.file-preview { margin: .75rem 0 0; padding-left: 1.25rem; color: var(--blue-800); font-size: .88rem; }
.wizard-actions { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; }
.wizard-panel[hidden], [data-branch][hidden], [data-branch-any][hidden] { display: none !important; }
.review-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.review-list > div { display: flex; min-width: 0; flex-direction: column; gap: .25rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.review-list > div:nth-child(odd) { border-right: 1px solid var(--line); }
.review-list span { color: var(--muted); font-size: .78rem; font-weight: 700; }
.review-list strong { overflow-wrap: anywhere; white-space: pre-wrap; font-weight: 750; }

.narrow-card, .result-card { max-width: 650px; margin: 4.5rem auto; padding: clamp(1.5rem, 5vw, 3rem); }
.narrow-card h1, .result-card h1, .tracking-result h1 { font-weight: 850; }
.result-card { max-width: 720px; }
.success-icon { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 1.2rem; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #5eb2df, var(--blue-700)); font-size: 2rem; box-shadow: 0 12px 28px rgba(67,136,185,.28); }
.case-number-box { display: grid; justify-items: center; gap: .5rem; padding: 1.3rem; margin: 1.5rem 0 0; border: 1px dashed #91c9e7; border-radius: var(--radius-md); background: var(--blue-50); }
.case-number-box span { color: var(--muted); font-size: .82rem; }
.case-number-box strong { color: var(--blue-950); font-size: clamp(1.2rem, 4vw, 1.7rem); letter-spacing: .04em; }
.case-number-screenshot-note { display: flex; align-items: center; justify-content: center; gap: .55rem; width: min(100%, 310px); padding: .55rem .75rem; border-radius: 10px; background: #fff6dc; color: var(--blue-950); text-align: left; }
.case-number-screenshot-note .case-number-camera { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; padding: .22rem; border-radius: 6px; color: #fff; background: var(--blue-950); fill: currentColor; }
.case-number-screenshot-note > span:last-child { display: grid; gap: .08rem; color: inherit; }
.case-number-screenshot-note strong { color: inherit; font-size: .9rem; letter-spacing: 0; line-height: 1.35; }
.case-number-screenshot-note small { color: #687785; font-size: .68rem; line-height: 1.4; }
.case-number-copy-button { min-width: 160px; }
.case-success-line-contact { display: none; }
@media screen and (max-width: 767.98px) {
  .case-success-line-contact { display: grid; gap: .8rem; margin-top: .85rem; padding: .9rem; border: 1px solid #d8efdf; border-radius: var(--radius-md); background: #f0fbf3; text-align: left; }
  .case-success-line-heading { display: flex; align-items: center; gap: .85rem; }
  .case-success-line-logo { flex: 0 0 auto; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; color: #fff; background: #08b73f; font-size: .72rem; font-weight: 900; letter-spacing: -.03em; box-shadow: 0 7px 18px rgba(8,183,63,.18); }
  .case-success-line-copy { display: grid; min-width: 0; gap: .1rem; }
  .case-success-line-copy small { color: #178a46; font-size: .75rem; font-weight: 850; }
  .case-success-line-copy strong { color: #087a36; font-size: 1.08rem; line-height: 1.4; }
  .case-success-line-copy > span { color: #536d5d; font-size: .72rem; line-height: 1.45; }
  .public-body .case-success-line-contact .case-success-line-button { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; justify-content: center; gap: .65rem; width: 100%; min-height: 52px; padding: .7rem .8rem; border: 1px solid #087b3c; border-radius: 10px; color: #fff; background: #087b3c; font-family: inherit; font-size: .95rem; font-weight: 750; line-height: 1.5; text-align: center; text-decoration: none; white-space: normal; }
  .case-success-line-button-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #087b3c; background: #fff; font-size: .5rem; font-weight: 900; }
  .public-body .case-success-line-contact .case-success-line-button:hover { border-color: #06632f; background: #06632f; }
  .public-body .case-success-line-contact .case-success-line-button:focus-visible { outline: 3px solid #087b3c; outline-offset: 3px; }
}
.tracking-result { max-width: 850px; margin: 4rem auto; padding: clamp(1.3rem, 4vw, 2.5rem); }
.status-pill { display: inline-flex; align-items: center; width: fit-content; padding: .52rem .85rem; border-radius: 999px; color: var(--blue-950); background: #dff3fe; font-size: .85rem; font-weight: 800; }
.status-refunded, .status-reshipped, .status-closed { color: #22603c; background: #ddf7e7; }
.status-rejected, .status-dataissue { color: #862e28; background: #fde8e6; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.detail-grid > div { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; background: #fbfdff; }
.detail-grid > div:nth-child(odd) { border-right: 1px solid var(--line); }
.detail-grid .detail-wide { grid-column: 1 / -1; border-top: 1px solid var(--line); border-right: 0; }
.detail-grid span { color: var(--muted); font-size: .78rem; }
.section-title { font-size: 1.15rem; font-weight: 800; margin: 1.8rem 0 1rem; }
.tracking-current-status { display: grid; gap: .4rem; padding: 1.15rem 1.25rem; border: 1px solid #e4c66f; border-left: 5px solid #d6a62e; border-radius: var(--radius-md); background: #fff9df; box-shadow: 0 10px 25px rgba(118,88,19,.07); }
.tracking-current-status > span { color: #806719; font-size: .75rem; font-weight: 850; letter-spacing: .08em; }
.tracking-current-status > strong { color: #382f19; font-size: clamp(1.15rem, 3vw, 1.4rem); }
.tracking-current-status > p { margin: 0; color: #66582e; line-height: 1.65; }
.tracking-current-status.status-refunded, .tracking-current-status.status-reshipped, .tracking-current-status.status-closed { border-color: #9bcdb0; border-left-color: #3d9964; background: #edf9f2; }
.tracking-current-status.status-rejected, .tracking-current-status.status-dataissue { border-color: #e3aaa5; border-left-color: #b94b42; background: #fff0ef; }
.tracking-history-title { margin: 1.8rem 0 1rem; color: var(--ink); font-size: 1rem; font-weight: 800; }
.timeline-list { list-style: none; padding: 0; margin: 0; }
.timeline-list li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: .8rem; padding-bottom: 1.5rem; }
.timeline-list li:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 17px; bottom: 0; width: 2px; background: var(--line); }
.timeline-dot { z-index: 1; width: 18px; height: 18px; margin-top: .15rem; border: 4px solid #c5e8fa; border-radius: 50%; background: var(--blue-700); }
.timeline-list p { margin: .35rem 0; color: #47647b; }
.timeline-list time { color: var(--muted); font-size: .8rem; }

.admin-body { min-width: 320px; background: #f3f9fd; }
.admin-page-title { font-weight: 850; margin: 0; }
.admin-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 8px 25px rgba(47,111,159,.06); }
.admin-card-header { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.admin-card-body { padding: 1.2rem; }
.admin-table { margin: 0; }
.admin-table th { color: #5e7487; background: #f7fbfe; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.admin-table td { padding-top: .85rem; padding-bottom: .85rem; vertical-align: middle; }
.admin-table a { color: var(--blue-800); font-weight: 800; text-decoration: none; }
.admin-filter { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(145px, 1fr)) auto; gap: .7rem; align-items: center; }
.admin-filter .input-group-text { background: var(--blue-50); border-color: var(--line); color: var(--blue-950); font-size: .86rem; font-weight: 700; }
.filter-actions { display: flex; gap: .5rem; }
.admin-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 1.2rem; align-items: start; }
.definition-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); margin: 0; }
.definition-list > div { padding: .85rem 0; border-bottom: 1px solid #edf3f7; }
.definition-list > div:nth-child(odd) { padding-right: 1rem; }
.definition-list .wide { grid-column: 1 / -1; }
.definition-list dt { color: var(--muted); font-size: .78rem; font-weight: 700; }
.definition-list dd { margin: .25rem 0 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; white-space: pre-wrap; }
.admin-timeline { list-style: none; margin: 0; padding: 0; }
.admin-timeline li { padding: .9rem 0; border-bottom: 1px solid #edf3f7; }
.admin-timeline time { color: var(--muted); font-size: .78rem; }
.internal-note { margin-top: .45rem; padding: .65rem .75rem; border-radius: 10px; background: #fff8e8; color: #6d5620; }
.public-message { margin-top: .45rem; padding: .65rem .75rem; border-radius: 10px; background: var(--blue-50); }
.auth-card { max-width: 520px; margin: 6vh auto; }
.bank-reveal { max-width: 620px; margin: 4rem auto; }
.bank-number { padding: 1rem; border-radius: 12px; background: #eef7fc; color: var(--blue-950); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.25rem; letter-spacing: .05em; overflow-wrap: anywhere; }

/* Admin application shell */
.admin-header { z-index: 200; border-bottom: 1px solid #d8e7ef; box-shadow: 0 4px 18px rgba(28,69,97,.05); }
.admin-topbar { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.5rem; }
.admin-brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--blue-950); text-decoration: none; }
.admin-brand:hover { color: var(--blue-800); }
.admin-brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #143a5a, #2f83ad); font-size: .76rem; font-weight: 900; letter-spacing: .03em; box-shadow: 0 8px 20px rgba(28,91,130,.2); }
.admin-brand > span:last-child { display: flex; flex-direction: column; }
.admin-brand strong { font-size: .98rem; }
.admin-brand small { color: #8293a1; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.admin-user-menu { display: flex; align-items: center; gap: 1rem; }
.admin-user-menu > span { display: flex; flex-direction: column; align-items: flex-end; }
.admin-user-menu strong { color: #2b4356; font-size: .85rem; }
.admin-user-menu small { color: #8193a3; font-size: .7rem; }
.admin-app-shell { display: grid; min-height: calc(100vh - 76px); grid-template-columns: 235px minmax(0,1fr); }
.admin-sidebar { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; padding: 1.4rem 1rem; border-right: 1px solid #dce9f0; background: #fff; }
.admin-nav { display: grid; gap: .35rem; }
.admin-nav > a { display: grid; grid-template-columns: 30px 1fr; gap: .45rem; align-items: center; padding: .78rem .85rem; border-radius: 11px; color: #526c7f; text-decoration: none; }
.admin-nav > a > span { display: grid; width: 28px; height: 28px; place-items: center; color: #65849b; font-size: 1.12rem; }
.admin-nav > a strong { font-size: .9rem; }
.admin-nav > a:hover { color: #173e5d; background: #f0f8fc; }
.admin-nav > a.active { color: #fff; background: linear-gradient(100deg, #245f87, #3187ae); box-shadow: 0 9px 20px rgba(47,111,159,.18); }
.admin-nav > a.active > span { color: #fff; }
.admin-nav-heading { padding: 1.2rem .85rem .35rem; color: #9aabb7; font-size: .66rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.admin-sidebar-note { padding: .9rem; border: 1px solid #dcebf3; border-radius: 12px; background: #f5fafc; }
.admin-sidebar-note span { color: #2b658b; font-size: .72rem; font-weight: 850; }
.admin-sidebar-note p { margin: .35rem 0 0; color: #718594; font-size: .72rem; line-height: 1.6; }
.admin-main { min-width: 0; padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem; }
.admin-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; }
.admin-page-heading.compact { align-items: start; }
.admin-page-heading .eyebrow { margin-bottom: .35rem; }
.admin-page-heading p { margin: .4rem 0 0; color: var(--muted); }
.admin-form-card { max-width: 900px; }

.dashboard-metrics { display: grid; grid-template-columns: repeat(5, minmax(145px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.dashboard-metric { position: relative; display: flex; min-height: 150px; flex-direction: column; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; color: #425b6d; background: #fff; text-decoration: none; box-shadow: 0 7px 22px rgba(47,111,159,.055); overflow: hidden; }
.dashboard-metric::after { position: absolute; top: -.9rem; right: -1rem; width: 64px; height: 64px; content: ""; border-radius: 50%; background: #e7f5fb; }
.dashboard-metric:hover { color: #214b69; border-color: #a9d4e9; transform: translateY(-2px); }
.dashboard-metric > span { position: relative; z-index: 1; font-size: .78rem; font-weight: 800; }
.dashboard-metric > strong { margin: auto 0 .2rem; color: #173e5c; font-size: 2.25rem; line-height: 1; }
.dashboard-metric > small { color: #8a9aa6; font-size: .7rem; }
.dashboard-metric.metric-today { color: #fff; border-color: #2f7da5; background: linear-gradient(145deg, #245d83, #338bb2); }
.dashboard-metric.metric-today strong, .dashboard-metric.metric-today small { color: #fff; }
.dashboard-metric.metric-today small { opacity: .7; }
.dashboard-metric.metric-today::after { background: rgba(255,255,255,.1); }
.dashboard-metric.metric-attention { border-color: #efd5b1; background: #fffaf1; }
.dashboard-metric.metric-attention::after { background: #ffebcd; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(270px, .85fr); gap: 1.2rem; align-items: start; }
.status-overview-row { display: grid; gap: .45rem; padding: .62rem 0; color: #425a6b; text-decoration: none; }
.status-overview-row > span { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; }
.status-overview-row b { color: #6f8798; }
.status-overview-row > i { height: 6px; border-radius: 999px; background: #e8f1f6; overflow: hidden; }
.status-overview-row > i > em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #50acd3, #2f709e); }

.admin-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; min-width: 235px; }
.admin-row-actions form { margin: 0; }
.admin-row-inactive { opacity: .62; background: #f7f8f9; }
.role-badge, .account-state, .audit-action { display: inline-flex; width: fit-content; padding: .35rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.role-administrator { color: #6c3d78; background: #f3e4f5; }

.order-lookup-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.85rem; margin-top:1.25rem; }
.order-lookup-status { min-height:1.5rem; margin-top:.8rem; font-weight:700; color:#44627b; }
.order-lookup-status:empty { min-height:0; margin-top:0; }
.order-lookup-status.is-loading { color:#2e78a2; }
.order-lookup-status.is-success { color:#19734c; }
.order-lookup-status.is-error { color:#b3263f; }
.order-choice-list { display:grid; gap:1rem; margin-top:1rem; }
.order-choice-heading { font-weight:800; color:#17395c; }
.order-choice { display:grid; }
.order-choice .choice-card { width:100%; }
.order-resolved { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.1rem; padding:1rem 1.1rem; border:1px solid #a9d8c4; border-radius:16px; background:#f0fbf6; color:#145e40; }
.order-resolved div { display:grid; gap:.2rem; }
.order-resolved small { color:#537365; }
.order-followup { scroll-margin-top:1.5rem; }
.section-divider { display:flex; align-items:center; gap:1rem; margin:1.75rem 0 1.25rem; color:#315b79; font-weight:800; }
.section-divider::before,.section-divider::after { content:""; flex:1; height:1px; background:#cfe0ec; }

@media (max-width: 575.98px) {
    .order-lookup-actions .btn,.order-choice-list > .btn,.order-choice-list .info-callout .btn { width:100%; }
    .order-resolved { align-items:stretch; }
    .order-resolved .btn { width:100%; }
}
.role-manager { color: #265a7b; background: #e4f1f8; }
.role-agent { color: #3f674e; background: #e5f3e9; }
.state-on { color: #276340; background: #e1f3e7; }
.state-off { color: #6e7377; background: #e9ecee; }
.state-locked { color: #8b5c17; background: #fff0d2; }
.admin-info-note { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem 1rem; border: 1px solid #d6e8f1; border-radius: 12px; color: #5b7181; background: #f5fafc; font-size: .83rem; }
.admin-info-note strong { flex: 0 0 auto; color: #275f82; }
.audit-filter { display: grid; grid-template-columns: minmax(240px, 1.6fr) repeat(2, minmax(145px, 1fr)) repeat(2, minmax(155px, 1fr)) auto; gap: .7rem; align-items: center; }
.audit-filter .input-group-text { border-color: var(--line); color: #557084; background: #f4f9fc; font-size: .78rem; font-weight: 750; }
.audit-action { border-radius: 7px; color: #285f81; background: #e6f3fa; }
.audit-detail { margin-top: .35rem; }
.audit-detail summary { color: #2e6e96; font-size: .72rem; font-weight: 700; cursor: pointer; }
.audit-detail code { display: block; max-width: 420px; padding: .55rem; margin-top: .35rem; border-radius: 7px; color: #475a67; background: #f1f5f7; font-size: .68rem; overflow-wrap: anywhere; white-space: pre-wrap; }

/* External order management */
.order-filter { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: .8rem; align-items: end; }
.order-filter label { display: block; margin-bottom: .35rem; color: #60798b; font-size: .74rem; font-weight: 800; }
.order-filter .filter-actions { align-self: end; }
.order-product-list { display: grid; gap: .65rem; padding: 0; margin: 0; list-style: none; }
.order-product-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem .9rem; border: 1px solid #e0edf4; border-radius: 10px; background: #f8fcfe; }
.order-product-list span { overflow-wrap: anywhere; }
.order-product-list strong { flex: 0 0 auto; color: #265f84; }
.sync-metrics { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.sync-metrics > div { display: flex; min-height: 120px; flex-direction: column; justify-content: space-between; padding: 1.1rem 1.2rem; }
.sync-metrics span { color: #6c8292; font-size: .78rem; font-weight: 800; }
.sync-metrics strong { color: #173e5c; font-size: 2rem; }
.sync-range-form { display: grid; grid-template-columns: minmax(125px, 1fr) minmax(125px, 1fr) auto; gap: .4rem; align-items: end; min-width: 380px; }
.sync-range-form label > span { display: block; margin-bottom: .2rem; color: #7c8f9d; font-size: .65rem; font-weight: 750; }
.mapping-form { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: .5rem; min-width: 260px; }
.mapping-unresolved { background: #fffaf0; }
.sync-state { display: inline-flex; padding: .35rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 850; }
.sync-queued { color: #795b1d; background: #fff1ce; }
.sync-running { color: #205f84; background: #dff2fd; }
.sync-completed { color: #276340; background: #e1f3e7; }
.sync-failed { color: #8a3934; background: #fbe6e4; }
.order-status-canceled, .order-status-refunded, .order-status-returned { color: #6e7377; background: #e9ecee; }
.order-status-new_order, .order-status-confirming, .order-status-pending { color: #795b1d; background: #fff1ce; }
.order-status-confirmed, .order-status-awaiting_for_shipment, .order-status-shipping { color: #205f84; background: #dff2fd; }
.order-status-shipped { color: #276340; background: #e1f3e7; }

@media (max-width: 1300px) {
  .audit-filter { grid-template-columns: minmax(250px, 1.7fr) repeat(2, minmax(155px, 1fr)); }
  .order-filter { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}

@media (max-width: 900px) {
  .service-grid { grid-template-columns: 1fr; max-width: 650px; }
  .service-card { min-height: 230px; }
  .admin-detail-grid { grid-template-columns: 1fr; }
  .admin-filter { grid-template-columns: 1fr 1fr; }
  .admin-filter .query-field { grid-column: 1 / -1; }
  .admin-filter .filter-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .admin-app-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: sticky; z-index: 90; top: 76px; display: block; padding: .65rem 1rem; border-right: 0; border-bottom: 1px solid #dce9f0; overflow-x: auto; }
  .admin-nav { display: flex; width: max-content; }
  .admin-nav > a { grid-template-columns: 24px auto; padding: .58rem .75rem; }
  .admin-nav > a > span { width: 22px; height: 22px; font-size: .95rem; }
  .admin-nav-heading, .admin-sidebar-note { display: none; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .audit-filter { grid-template-columns: 1fr 1fr; }
  .audit-filter .audit-query, .audit-filter .filter-actions { grid-column: 1 / -1; }
  .order-filter { grid-template-columns: 1fr 1fr; }
  .sync-metrics { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}
@media (max-width: 640px) {
  .hero-section { padding-top: 3.5rem; }
  .track-callout { align-items: stretch; flex-direction: column; padding: 1.4rem; }
  .form-grid, .choice-grid, .choice-grid-compact, .review-list, .detail-grid, .definition-list { grid-template-columns: 1fr; }
  .form-field-wide, .detail-grid .detail-wide, .definition-list .wide { grid-column: auto; }
  .review-list > div:nth-child(odd), .detail-grid > div:nth-child(odd) { border-right: 0; }
  .detail-grid .detail-wide { border-top: 0; }
  .stepper li small { font-size: .67rem; }
  .wizard-actions .btn { flex: 1; }
  .admin-filter { grid-template-columns: 1fr; }
  .admin-filter .query-field { grid-column: auto; }
  .admin-filter .filter-actions { grid-column: auto; }
  .admin-topbar { min-height: 68px; padding: .55rem .75rem; }
  .admin-brand-mark { width: 36px; height: 36px; }
  .admin-user-menu > span { display: none; }
  .admin-sidebar { top: 68px; }
  .admin-main { padding: 1.4rem .8rem 3rem; }
  .admin-page-heading { align-items: stretch; flex-direction: column; gap: 1rem; }
  .admin-page-heading > .btn { align-self: stretch; }
  .dashboard-metrics { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .dashboard-metric { min-height: 130px; padding: .9rem; }
  .dashboard-metric > strong { font-size: 1.8rem; }
  .audit-filter { grid-template-columns: 1fr; }
  .audit-filter .audit-query, .audit-filter .filter-actions { grid-column: auto; }
  .admin-info-note { flex-direction: column; gap: .3rem; }
  .order-filter, .sync-metrics { grid-template-columns: 1fr; }
  .sync-range-form { grid-template-columns: 1fr; min-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}