:root {
    --eg-ink: #12312d;
    --eg-muted: #687874;
    --eg-green: #078f79;
    --eg-green-2: #0aa68c;
    --eg-green-dark: #046957;
    --eg-mint: #eaf7f3;
    --eg-soft: #f4f8f6;
    --eg-line: #d6e4df;
    --eg-warm: #fffaf5;
    --eg-coral: #f06d53;
    --eg-shadow: 0 12px 34px rgba(22, 61, 54, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.errand-google-body {
    margin: 0;
    color: var(--eg-ink);
    background:
        radial-gradient(circle at 8% 6%, rgba(7, 143, 121, .07), transparent 26%),
        radial-gradient(circle at 95% 3%, rgba(240, 109, 83, .06), transparent 22%),
        #f5f8f6;
    font-family: "Noto Sans TC", system-ui, sans-serif;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.errand-google-page {
    width: min(1480px, calc(100% - 32px));
    margin: 18px auto 42px;
}

.eg-toast {
    margin-bottom: 12px;
    border-radius: 12px;
    padding: 12px 15px;
    font-weight: 800;
}
.eg-toast.success { color: #056454; background: #e3f7f0; border: 1px solid #b6e4d7; }
.eg-toast.error { color: #a23528; background: #fff0ed; border: 1px solid #f1c2b8; }

/* Compact page overview */
.eg-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 530px;
    gap: 22px;
    align-items: stretch;
    padding: 20px 22px;
    border: 1px solid var(--eg-line);
    border-radius: 20px;
    background: rgba(255,255,255,.94);
    box-shadow: var(--eg-shadow);
}
.eg-overview-main { display: grid; align-content: center; min-width: 0; }
.eg-overview-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.eg-back { color: var(--eg-green-dark); text-decoration: none; font-weight: 850; font-size: .88rem; }
.eg-overview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    min-width: 0;
}
.eg-orders-entry {
    display: grid;
    gap: 1px;
    min-width: 190px;
    padding: 8px 12px;
    border: 1px solid #b9ddd4;
    border-radius: 12px;
    color: var(--eg-green-dark);
    background: linear-gradient(135deg, #ffffff, #effaf6);
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(7, 105, 87, .08);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.eg-orders-entry:hover {
    color: var(--eg-green-dark);
    border-color: var(--eg-green);
    box-shadow: 0 9px 20px rgba(7, 105, 87, .13);
    transform: translateY(-1px);
}
.eg-orders-entry span { font-size: .8rem; font-weight: 900; line-height: 1.3; }
.eg-orders-entry small { color: var(--eg-muted); font-size: .67rem; font-weight: 700; line-height: 1.35; }
.eg-stage {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--eg-green-dark);
    background: var(--eg-mint);
    font-size: .78rem;
    font-weight: 900;
}
.eg-kicker { display: block; color: #d96a25; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.eg-title-row { margin-top: 4px; }
.eg-title-row h1 { margin: 0; font-size: clamp(2rem, 3.2vw, 2.95rem); line-height: 1.03; font-weight: 900; letter-spacing: -.035em; }
.eg-title-row p { margin: 9px 0 0; max-width: 760px; color: var(--eg-muted); font-size: .94rem; line-height: 1.62; font-weight: 600; }
.eg-service-facts {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--eg-line);
    border-radius: 15px;
    background: var(--eg-line);
}
.eg-service-facts div {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 14px 15px;
    background: #fbfdfc;
}
.eg-service-facts div.payment { color: #fff; background: linear-gradient(135deg, var(--eg-green-dark), var(--eg-green)); }
.eg-service-facts dt { color: var(--eg-muted); font-size: .72rem; font-weight: 850; }
.eg-service-facts dd { margin: 5px 0 0; font-size: .94rem; font-weight: 900; overflow-wrap: anywhere; }
.eg-service-facts .payment dt { color: rgba(255,255,255,.74); }

/* Progress */
.eg-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 12px 0;
    overflow: hidden;
    border: 1px solid var(--eg-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(22,62,55,.04);
}
.eg-progress a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    color: #76827f;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 850;
    border-right: 1px solid var(--eg-line);
}
.eg-progress a:last-child { border-right: 0; }
.eg-progress b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #77817f; background: #eef3f1; }
.eg-progress a.is-current { color: #fff; background: linear-gradient(135deg, var(--eg-green), var(--eg-green-2)); }
.eg-progress a.is-current b { color: var(--eg-green); background: #fff; }
.eg-progress a.is-done { color: var(--eg-green-dark); background: #edf9f5; }
.eg-progress a.is-done b { color: #fff; background: var(--eg-green); }

.eg-form { display: grid; gap: 12px; }
.eg-sheet,
.eg-location-panel,
.eg-detail-panel,
.eg-submit-bar,
.eg-help-row details {
    border: 1px solid var(--eg-line);
    border-radius: 18px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--eg-shadow);
}
.eg-sheet { padding: 18px 20px; }
.eg-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 13px; }
.eg-section-head.compact { align-items: center; }
.eg-section-head > p { margin: 0; color: var(--eg-muted); font-size: .8rem; font-weight: 700; }
.eg-step-heading { display: flex; align-items: center; gap: 11px; }
.eg-step-heading > b { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--eg-green); font-size: .78rem; }
.eg-step-heading span { color: var(--eg-green-dark); font-size: .72rem; font-weight: 900; }
.eg-step-heading h2 { margin: 2px 0 0; font-size: 1.28rem; line-height: 1.2; font-weight: 900; }

/* Task type selector */
.eg-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.eg-type-grid label,
.eg-proof-grid label {
    position: relative;
    display: flex;
    gap: 10px;
    border: 1px solid var(--eg-line);
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.eg-type-grid label { min-height: 106px; }
.eg-type-grid label:hover,
.eg-proof-grid label:hover { border-color: #79c9b8; transform: translateY(-1px); }
.eg-type-grid input,
.eg-proof-grid input { position: absolute; opacity: 0; pointer-events: none; }
.eg-check { flex: 0 0 auto; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #bfd1cc; border-radius: 8px; color: transparent; font-weight: 900; }
.eg-type-grid input:checked ~ .eg-check,
.eg-proof-grid input:checked ~ .eg-check { color: #fff; border-color: var(--eg-green); background: var(--eg-green); }
.eg-type-grid label:has(input:checked),
.eg-proof-grid label:has(input:checked) { border-color: var(--eg-green); background: #effaf7; }
.eg-type-grid small { display: block; color: #a36a30; font-size: .72rem; font-weight: 850; }
.eg-type-grid strong { display: block; margin-top: 2px; font-size: .97rem; }
.eg-type-grid p { margin: 5px 0 0; color: var(--eg-muted); font-size: .76rem; line-height: 1.5; }

/* Main two-column workbench */
.eg-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(410px, .88fr);
    align-items: start;
    gap: 12px;
}
.eg-location-panel,
.eg-detail-panel { padding: 17px; }
.eg-location-panel.is-disabled { opacity: .88; }
.eg-google-disabled { display: grid; gap: 6px; padding: 15px; border: 1px solid #f1c3b8; border-radius: 13px; color: #8c3d2e; background: #fff1ed; }
.eg-google-disabled code { color: inherit; font-weight: 900; }

/* Google map */
.eg-map-panel { overflow: hidden; }
.eg-map-panel-head { margin-bottom: 10px; }
.eg-google-map-workspace {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid #c8d9d4;
    border-radius: 15px;
    background: #e9efec;
}
.eg-google-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.eg-map-route-search {
    position: absolute;
    z-index: 5;
    top: 11px;
    left: 11px;
    width: min(610px, calc(100% - 22px));
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 10px 8px 8px;
    border: 1px solid rgba(22,50,46,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 10px 28px rgba(20,45,43,.18);
    backdrop-filter: blur(9px);
}
.eg-route-line { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-around; min-height: 124px; }
.eg-route-line i { position: absolute; top: 28px; bottom: 28px; width: 2px; background: #263330; }
.eg-route-line .origin,
.eg-route-line .destination { position: relative; z-index: 1; display: block; width: 15px; height: 15px; border: 4px solid #111; background: #111; }
.eg-route-line .origin { border-radius: 50%; box-shadow: inset 0 0 0 3px #fff; }
.eg-route-line .destination { border-radius: 3px; box-shadow: inset 0 0 0 3px #fff; }
.eg-route-inputs { min-width: 0; }
.eg-place-row { display: flex; align-items: center; gap: 7px; min-height: 62px; }
.eg-place-copy { position: relative; min-width: 0; flex: 1; }
.eg-place-copy > span { display: block; margin-bottom: 2px; color: #52625e; font-size: .69rem; font-weight: 900; }
.eg-route-divider { height: 1px; background: #e2e7e5; }
.eg-place-search-box {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px;
    min-height: 39px;
    padding: 3px 4px 3px 7px;
    border: 1px solid #26332f;
    border-radius: 9px;
    background: #fff;
}
.eg-place-search-box:focus-within { border-color: var(--eg-green); box-shadow: 0 0 0 3px rgba(8,127,109,.12); }
.eg-place-search-icon { color: #45534f; text-align: center; font-size: 1.1rem; font-weight: 900; }
.eg-place-query { min-width: 0; width: 100%; height: 31px; padding: 0 3px; border: 0; outline: 0; color: var(--eg-ink); background: transparent; font-size: .88rem; font-weight: 750; }
.eg-place-query::placeholder { color: #84908c; font-weight: 600; }
.eg-place-locate { height: 31px; padding: 0 11px; border: 0; border-radius: 7px; color: #fff; background: var(--eg-green); font-weight: 900; }
.eg-place-locate:hover { background: var(--eg-green-dark); }
.eg-place-locate:disabled { opacity: .55; cursor: wait; }
.eg-clear-place { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #fff; background: #111; font-size: 1.25rem; line-height: 1; }
.eg-clear-place:disabled { opacity: .17; cursor: default; }
.eg-place-copy > small { display: block; margin-top: 3px; color: var(--eg-muted); font-size: .67rem; line-height: 1.35; font-weight: 650; }
.eg-place-copy > small.is-loading { color: #a86a14; }
.eg-place-copy > small.is-ready { color: #49625c; }
.eg-place-copy > small.is-success { color: var(--eg-green); font-weight: 850; }
.eg-place-copy > small.is-warning { color: #9b681c; }
.eg-place-copy > small.is-error { color: #bd3e31; font-weight: 850; }
.eg-place-suggestions {
    position: absolute;
    z-index: 30;
    top: calc(100% - 16px);
    left: 0;
    right: 0;
    max-height: 250px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #ccd8d4;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 15px 34px rgba(18,42,39,.22);
}
.eg-place-suggestion { display: grid; gap: 3px; width: 100%; padding: 9px 10px; border: 0; border-bottom: 1px solid #edf1ef; border-radius: 8px; text-align: left; color: var(--eg-ink); background: transparent; }
.eg-place-suggestion:last-child { border-bottom: 0; }
.eg-place-suggestion:hover,
.eg-place-suggestion:focus-visible { background: #eaf7f3; outline: 0; }
.eg-place-suggestion strong { font-size: .84rem; line-height: 1.35; }
.eg-place-suggestion span { color: var(--eg-muted); font-size: .7rem; line-height: 1.4; }
.eg-place-suggestion-empty { padding: 11px; color: var(--eg-muted); font-size: .77rem; }
.eg-map-route-status {
    position: absolute;
    z-index: 4;
    left: 11px;
    bottom: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 22px);
    padding: 8px 11px;
    border: 1px solid rgba(22,50,46,.12);
    border-radius: 999px;
    color: #52625e;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 22px rgba(20,45,43,.16);
    font-size: .77rem;
    backdrop-filter: blur(8px);
}
.eg-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #a4afac; box-shadow: 0 0 0 4px rgba(164,175,172,.13); }
.eg-map-route-status.is-loading .eg-status-dot { background: #e08a22; animation: eg-pulse 1s infinite; }
.eg-map-route-status.is-success { color: var(--eg-green-dark); background: rgba(234,248,244,.96); }
.eg-map-route-status.is-success .eg-status-dot { background: var(--eg-green); }
.eg-map-route-status.is-error { color: #a53b2e; background: rgba(255,240,237,.97); }
.eg-map-route-status.is-error .eg-status-dot { background: #d74c3a; }
@keyframes eg-pulse { 50% { opacity: .35; } }

.eg-location-extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.eg-location-extra-grid label,
.eg-field-grid label,
.eg-note-field { display: grid; gap: 6px; }
.eg-location-extra-grid span,
.eg-field-grid span,
.eg-note-field > span { color: var(--eg-ink); font-size: .76rem; font-weight: 900; }
.eg-location-extra-grid input,
.eg-field-grid input,
.eg-note-field textarea {
    width: 100%;
    border: 1px solid #cfded9;
    border-radius: 11px;
    padding: 10px 12px;
    color: var(--eg-ink);
    background: #fff;
    outline: none;
}
.eg-location-extra-grid input:focus,
.eg-field-grid input:focus,
.eg-note-field textarea:focus { border-color: var(--eg-green); box-shadow: 0 0 0 3px rgba(7,141,120,.1); }
.eg-map-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 9px; }
.eg-map-metrics > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--eg-line); border-radius: 12px; background: #fbfdfc; }
.eg-map-metrics span { display: block; color: var(--eg-muted); font-size: .71rem; font-weight: 850; }
.eg-map-metrics strong { display: block; margin-top: 4px; font-size: 1rem; overflow-wrap: anywhere; }
.eg-map-metrics .fare { color: #fff; border-color: var(--eg-green-dark); background: linear-gradient(135deg, var(--eg-green-dark), var(--eg-green)); }
.eg-map-metrics .fare span { color: rgba(255,255,255,.78); }
.eg-google-note { margin: 8px 2px 0; color: var(--eg-muted); font-size: .71rem; line-height: 1.5; }

/* Details */
.eg-detail-panel { display: grid; gap: 11px; }
.eg-detail-panel > .eg-section-head { margin-bottom: 0; }
.eg-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eg-field-grid em,
.eg-note-field em { color: var(--eg-coral); font-style: normal; font-size: .68rem; }
.eg-field-grid input { min-height: 44px; }
.eg-note-field { position: relative; }
.eg-note-field textarea { min-height: 142px; resize: vertical; line-height: 1.65; }
.eg-note-field > small { justify-self: end; margin-top: -2px; color: var(--eg-muted); }
.eg-price-note { display: grid; gap: 3px; padding: 10px 12px; border-left: 4px solid var(--eg-green); border-radius: 10px; background: #f3f7f5; }
.eg-price-note strong { font-size: .81rem; }
.eg-price-note span { color: var(--eg-muted); font-size: .76rem; line-height: 1.5; }
.eg-proof-title { display: flex; align-items: center; justify-content: space-between; font-size: .83rem; font-weight: 900; }
.eg-proof-title small { color: var(--eg-muted); }
.eg-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.eg-proof-grid label { min-height: 82px; padding: 10px; border-radius: 12px; }
.eg-proof-grid strong { display: block; font-size: .82rem; }
.eg-proof-grid small { display: block; margin-top: 2px; color: var(--eg-muted); font-size: .66rem; line-height: 1.4; }
.eg-validation { padding: 11px 13px; border: 1px solid #f1c0b6; border-radius: 11px; color: #a4382b; background: #fff0ed; font-size: .82rem; font-weight: 800; }

/* Full-width submit dock */
.eg-submit-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    border-color: #b9ded4;
    background: linear-gradient(135deg, #edf9f5, #fbfdfc);
    box-shadow: 0 8px 24px rgba(22,62,55,.06);
}
.eg-submit-copy { display: grid; gap: 2px; }
.eg-submit-kicker { color: var(--eg-green); font-size: .68rem !important; font-weight: 900; letter-spacing: .08em; }
.eg-submit-bar strong { font-size: .94rem; }
.eg-submit-bar span { color: var(--eg-muted); font-size: .74rem; line-height: 1.45; }
.eg-submit-bar button { min-width: 235px; min-height: 48px; border: 0; border-radius: 11px; padding: 12px 18px; color: #fff; background: linear-gradient(135deg, var(--eg-green), var(--eg-green-2)); font-weight: 900; box-shadow: 0 8px 18px rgba(7,141,120,.18); }
.eg-submit-bar button:hover { transform: translateY(-1px); }
.eg-submit-bar button span { margin-left: 7px; color: inherit; font-size: 1rem; }

.eg-help-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.eg-help-row details { padding: 0 16px; box-shadow: none; }
.eg-help-row summary { padding: 13px 0; color: var(--eg-green-dark); font-size: .84rem; font-weight: 900; cursor: pointer; }
.eg-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 14px; }
.eg-help-grid article { padding: 11px; border: 1px solid var(--eg-line); border-radius: 11px; background: #fbfdfc; }
.eg-help-grid p { margin: 4px 0 0; color: var(--eg-muted); font-size: .77rem; line-height: 1.5; }
.eg-help-grid small { display: block; margin-top: 4px; color: #82908c; }

@media (max-width: 1180px) {
    .eg-page-header { grid-template-columns: 1fr; }
    .eg-service-facts { grid-template-columns: repeat(3, 1fr); }
    .eg-workbench { grid-template-columns: 1fr; }
    .eg-google-map-workspace { min-height: 500px; }
}
@media (max-width: 820px) {
    .errand-google-page { width: min(100% - 20px, 760px); margin-top: 14px; }
    .eg-page-header { padding: 18px; }
    .eg-overview-topline { align-items: flex-start; }
    .eg-overview-actions { align-items: flex-start; flex-wrap: wrap; }
    .eg-service-facts { grid-template-columns: 1fr; }
    .eg-progress { grid-template-columns: repeat(2, 1fr); }
    .eg-progress a:nth-child(2) { border-right: 0; }
    .eg-progress a:nth-child(-n+2) { border-bottom: 1px solid var(--eg-line); }
    .eg-type-grid { grid-template-columns: 1fr 1fr; }
    .eg-location-extra-grid,
    .eg-field-grid { grid-template-columns: 1fr; }
    .eg-submit-bar { grid-template-columns: 1fr; }
    .eg-submit-bar button { width: 100%; }
    .eg-help-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .errand-google-page { width: calc(100% - 12px); }
    .eg-page-header, .eg-sheet, .eg-location-panel, .eg-detail-panel { padding: 14px; }
    .eg-overview-topline { display: grid; }
    .eg-overview-actions { width: 100%; justify-content: flex-start; }
    .eg-orders-entry { width: 100%; min-width: 0; }
    .eg-title-row h1 { font-size: 2rem; }
    .eg-stage { justify-self: start; }
    .eg-progress a { min-height: 46px; gap: 5px; font-size: .77rem; }
    .eg-type-grid { grid-template-columns: 1fr; }
    .eg-section-head { align-items: flex-start; flex-direction: column; }
    .eg-google-map-workspace { min-height: 535px; border-radius: 13px; }
    .eg-map-route-search { width: calc(100% - 16px); top: 8px; left: 8px; grid-template-columns: 21px minmax(0,1fr); padding: 7px; }
    .eg-place-search-box { grid-template-columns: 21px minmax(0,1fr); }
    .eg-place-locate { grid-column: 1 / -1; width: 100%; }
    .eg-clear-place { width: 32px; height: 32px; }
    .eg-map-route-status { left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
    .eg-map-metrics { grid-template-columns: 1fr; }
    .eg-proof-grid { grid-template-columns: 1fr; }
    .eg-help-grid { grid-template-columns: 1fr; }
}


/* v30: login-gated errand request submission */
.eg-submit-bar.login-required {
    border-color: #f1c9ba;
    background: linear-gradient(135deg, #fff8f4 0%, #fff 68%);
}
.eg-submit-bar.login-required .eg-submit-kicker { color: #c85f40; }
.eg-login-submit {
    min-width: 270px;
    min-height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 24px;
    border-radius: 16px;
    border: 1px solid #ef6f51;
    background: #ef6f51;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 14px 28px rgba(239, 111, 81, .20);
}
.eg-login-submit:hover,
.eg-login-submit:focus-visible {
    background: #d95f43;
    border-color: #d95f43;
    color: #fff;
    transform: translateY(-1px);
}
@media (max-width: 760px) {
    .eg-login-submit { width: 100%; min-width: 0; }
}