html,body{margin:0;padding:0;background:#EFF4F3;}
button,input{font-family:inherit;}
a{text-decoration:none;}
/* Child pickup mobile */
.pickup-mobile,
.pickup-app {
    min-height: 100dvh;
    background: #EFF4F3;
    color: #111827;
    font-family: "Microsoft JhengHei", "Segoe UI", sans-serif;
}

.pickup-mobile {
    padding: 28px 18px;
}

.pickup-login-hero {
    min-height: 250px;
    border-radius: 28px;
    padding: 28px;
    background: linear-gradient(160deg, #67D1E6, #28AFC6);
    color: white;
    box-shadow: 0 18px 38px rgba(8, 145, 178, .24);
}

.pickup-brand-mark {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .22);
    display: grid;
    place-items: center;
    font-size: 34px;
    font-weight: 900;
    margin-bottom: 28px;
}

.pickup-login-hero h1 {
    margin: 0 0 12px;
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: 0;
}

.pickup-login-hero p {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: #F0FDFF;
}

.pickup-login-card,
.pickup-demo-card,
.pickup-panel {
    margin-top: 18px;
    background: white;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
    border: 1px solid #D6EEF5;
}

.pickup-login-card label,
.pickup-panel label {
    display: block;
    margin: 10px 0 8px;
    color: #475569;
    font-size: 18px;
    font-weight: 800;
}

.pickup-input {
    width: 100%;
    min-height: 56px;
    border: 2px solid #B7E8F1;
    border-radius: 18px;
    background: #F2FBFD;
    padding: 0 16px;
    font-size: 21px;
    outline: none;
}

.pickup-input:focus {
    border-color: #29B8CF;
    background: white;
}

.pickup-primary {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 18px;
    margin-top: 18px;
    background: #25AEC7;
    color: white;
    font-size: 21px;
    font-weight: 900;
}

.pickup-secondary {
    width: 100%;
    min-height: 58px;
    border: 1px solid #9DDBEA;
    border-radius: 18px;
    background: #EFFBFF;
    color: #246275;
    font-size: 21px;
    font-weight: 900;
}

.pickup-alert {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #FFF7ED;
    color: #9A3412;
    font-size: 17px;
    line-height: 1.45;
}

.pickup-alert.page {
    margin: 14px 18px 0;
}

.pickup-demo-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #334155;
    font-size: 17px;
}

.pickup-top {
    height: 86px;
    padding: max(14px, env(safe-area-inset-top)) 18px 12px;
    background: #69C9DE;
    color: white;
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}

.pickup-top h1 {
    margin: 0;
    text-align: center;
    font-size: 34px;
    font-weight: 500;
    letter-spacing: 0;
}

.pickup-icon-button {
    width: 52px;
    height: 52px;
    border: 0;
    background: transparent;
    color: white;
    font-size: 36px;
    line-height: 1;
}

.pickup-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.pickup-drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
}

.pickup-drawer {
    position: fixed;
    z-index: 90;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(72vw, 330px);
    padding-top: max(18px, env(safe-area-inset-top));
    background: #67C7DB;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 18px 0 38px rgba(0, 0, 0, .22);
}

.pickup-drawer.open {
    transform: translateX(0);
}

.pickup-drawer a {
    min-height: 72px;
    border-bottom: 1px solid rgba(255, 255, 255, .58);
    padding: 0 30px;
    display: flex;
    align-items: center;
    color: white;
    font-size: 28px;
    font-weight: 700;
}

.pickup-map {
    position: relative;
    height: 330px;
    overflow: hidden;
    background: #F9F6ED;
    border-bottom: 8px solid #69C9DE;
}

.pickup-map::before {
    content: "";
    position: absolute;
    inset: -20px;
    background:
        linear-gradient(28deg, transparent 45%, #D3DFE6 46%, #D3DFE6 49%, transparent 50%),
        linear-gradient(98deg, transparent 43%, #A8BCCC 44%, #A8BCCC 48%, transparent 49%),
        linear-gradient(150deg, transparent 58%, #D3DFE6 59%, #D3DFE6 62%, transparent 63%);
}

.pickup-road {
    position: absolute;
    background: #A8BCCC;
    border-radius: 999px;
}

.pickup-road.r1 {
    width: 120%;
    height: 22px;
    left: -10%;
    top: 150px;
    transform: rotate(18deg);
}

.pickup-road.r2 {
    width: 24px;
    height: 120%;
    left: 42%;
    top: -10%;
    transform: rotate(-8deg);
}

.pickup-pin {
    position: absolute;
    width: 46px;
    height: 46px;
    border-radius: 50% 50% 50% 0;
    display: grid;
    place-items: center;
    transform: rotate(-45deg);
    color: white;
    font-size: 18px;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
}

.pickup-pin.school {
    left: 58%;
    top: 120px;
    background: #F05234;
}

.pickup-pin.parent {
    left: 48%;
    top: 205px;
    background: #08B4C4;
}

.pickup-pin::after {
    transform: rotate(45deg);
}

.pickup-map-label {
    position: absolute;
    left: 42%;
    top: 172px;
    background: white;
    border: 1px solid #CBD5E1;
    padding: 8px 12px;
    font-size: 22px;
    font-weight: 900;
}

.pickup-status-bar {
    padding: 22px 22px 20px;
    background: #69C9DE;
}

.pickup-segment {
    width: 50%;
    min-height: 58px;
    border: 2px solid rgba(255, 255, 255, .75);
    background: transparent;
    color: white;
    font-size: 25px;
    font-weight: 700;
}

.pickup-segment:first-child {
    border-radius: 999px 0 0 999px;
}

.pickup-segment:last-child {
    border-radius: 0 999px 999px 0;
}

.pickup-segment.active {
    background: white;
    color: #58BBCF;
}

.pickup-student-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 14px 18px;
    background: white;
}

.pickup-chip {
    flex: 0 0 auto;
    min-height: 46px;
    border: 1px solid #A8E3EC;
    border-radius: 999px;
    background: #ECFEFF;
    color: #155E75;
    padding: 0 16px;
    font-size: 18px;
    font-weight: 800;
}

.pickup-chip.active {
    background: #A8D957;
    color: white;
}

.pickup-panel {
    margin: 18px;
}

.pickup-panel h2 {
    margin: 0 0 12px;
    font-size: 30px;
    letter-spacing: 0;
}

.pickup-notice,
.pickup-faq {
    padding: 12px 0;
    border-bottom: 1px solid #E5E7EB;
    color: #263B63;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.45;
}

.pickup-list {
    padding-bottom: 120px;
    background: white;
}

.pickup-record {
    min-height: 96px;
    display: grid;
    grid-template-columns: 1fr 118px;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E7EB;
}

.pickup-record.done {
    background: #F8FAFC;
}

.pickup-record strong {
    display: block;
    font-size: 24px;
    font-weight: 500;
}

.pickup-record span {
    display: block;
    margin-top: 5px;
    color: #5A5F66;
    font-size: 21px;
}

.pickup-time {
    text-align: right;
    color: #555;
}

.pickup-time b {
    display: block;
    font-size: 27px;
    font-weight: 500;
}

.pickup-time small {
    display: block;
    font-size: 24px;
}

.pickup-switch-row,
.pickup-person-row {
    min-height: 76px;
    border-radius: 18px;
    margin: 14px 0;
    padding: 0 18px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26px;
}

.pickup-person-row {
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.pickup-person-row span {
    color: #64748B;
    font-size: 18px;
}

.pickup-switch {
    width: 82px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: #CBD5E1;
    position: relative;
}

.pickup-switch::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: white;
    transition: left .16s ease;
}

.pickup-switch.on {
    background: #67C7DB;
}

.pickup-switch.on::after {
    left: 39px;
}

.pickup-location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pickup-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
}

.pickup-hint,
.pickup-empty {
    color: #64748B;
    font-size: 20px;
    line-height: 1.55;
}

.pickup-live-list {
    display: grid;
    gap: 12px;
}

.pickup-live-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid #D7EEF5;
    border-radius: 18px;
    background: #F8FDFF;
}

.pickup-live-card strong {
    display: block;
    color: #0F2847;
    font-size: 23px;
    font-weight: 900;
}

.pickup-live-card span,
.pickup-live-card small {
    display: block;
    color: #64748B;
    font-size: 17px;
    margin-top: 4px;
}

.pickup-live-distance {
    min-width: 112px;
    text-align: right;
}

.pickup-live-distance b {
    display: block;
    color: #0E7490;
    font-size: 26px;
    font-weight: 900;
}

.pickup-online {
    display: inline-flex;
    justify-content: center;
    min-width: 68px;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #E2E8F0;
    color: #475569;
    font-size: 13px;
    font-weight: 900;
}

.pickup-online.on {
    background: #DCFCE7;
    color: #15803D;
}

.pickup-loading {
    padding: 40px;
    font-size: 24px;
}

.pickup-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 88px;
    padding-bottom: env(safe-area-inset-bottom);
    background: #67C7DB;
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    z-index: 50;
}

.pickup-bottom button {
    border: 0;
    background: transparent;
    color: #2C7082;
    font-size: 20px;
    font-weight: 800;
}

.pickup-bottom button.center {
    margin-top: -36px;
    min-height: 92px;
    border-radius: 999px;
    background: #A8D957;
    color: white;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}

.pickup-bottom button.active {
    color: white;
}

/* Customer */
.customer-link em {
    font-style: normal;
    color: #3C74DC;
    font-size: 13px;
    font-weight: 800;
    margin-top: 4px;
}

/* Detail */
.detail-hero {
    background: linear-gradient(135deg, #08213F, #3C74DC);
    color: white;
    padding: 20px;
    border-radius: 22px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 12px 28px rgba(8, 33, 63, .18);
}

    .detail-hero strong {
        font-size: 24px;
    }

    .detail-hero span,
    .detail-hero small {
        color: #D6E6FF;
    }

.info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #EEF3FA;
}

    .info-row span,
    .info-block span {
        color: #68748A;
        font-size: 14px;
    }

    .info-row b {
        text-align: right;
        color: #08213F;
    }

.info-block {
    padding: 10px 0;
    border-bottom: 1px solid #EEF3FA;
}

    .info-block p {
        margin: 4px 0 0;
        color: #08213F;
        line-height: 1.5;
    }

.mini-card {
    background: #F5F9FF;
    border: 1px solid #D8E5F5;
    border-radius: 16px;
    padding: 12px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .mini-card strong {
        color: #08213F;
    }

    .mini-card span {
        color: #3C74DC;
        font-weight: 800;
    }

    .mini-card small,
    .muted {
        color: #68748A;
    }

/* Notice */
.notice-item {
    padding: 8px 0;
    color: #1F3558;
    border-bottom: 1px solid #EEF3FA;
    font-weight: 700;
}

    .notice-item:last-child {
        border-bottom: 0;
    }

/* Service Tabs */
.quick-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.tab-btn {
    border: 1px solid #D8E5F5;
    background: white;
    border-radius: 999px;
    height: 38px;
    font-weight: 800;
    color: #3C74DC;
}

    .tab-btn.active {
        background: #3C74DC;
        color: white;
    }

/* Service Cards */
.service-card {
    display: block;
    background: white;
    border: 1px solid #D8E5F5;
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 8px 18px rgba(31, 53, 88, .06);
}

.service-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.service-card h3 {
    margin: 10px 0 6px;
    color: #08213F;
}

.service-card p {
    margin: 0 0 6px;
    color: #3C74DC;
    font-weight: 800;
}

.service-card small {
    display: block;
    color: #68748A;
    line-height: 1.5;
}

.service-action {
    margin-top: 10px;
}

.service-text {
    color: #1F3558;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Status Badge */
.status-badge {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

    .status-badge.pending {
        background: #FFF4E5;
        color: #A15C00;
    }

    .status-badge.doing {
        background: #EAF3FF;
        color: #2459B8;
    }

    .status-badge.done {
        background: #E8F8ED;
        color: #16803A;
    }

    .status-badge.void {
        background: #FFECEC;
        color: #D62828;
    }

/* Mobile layout size fix */
.list-summary {
    width: 100%;
    margin: 14px 0 8px;
    font-size: 15px;
    color: #0f2147;
}

.list-card,
.customer-link {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
    margin: 12px 0;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid #d7e4f7;
    background: #ffffff;
    color: #0f2147;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(15, 33, 71, 0.06);
}

    .list-card strong,
    .customer-link strong {
        display: block;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .list-card span,
    .customer-link span,
    .list-card small,
    .customer-link small,
    .list-card em,
    .customer-link em {
        display: block;
        line-height: 1.7;
    }

    .customer-link em,
    .list-card em {
        margin-top: 8px;
        color: #315be8;
        font-style: normal;
        font-weight: 700;
    }

/* Dashboard Pro UI */
.dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.dashboard-date {
    font-size: 13px;
    color: #D6E6FF;
    font-weight: 700;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.kpi-card {
    position: relative;
    overflow: hidden;
    min-height: 104px;
    background: linear-gradient(135deg, #173C81, #3C74DC);
    color: white;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 10px 24px rgba(23, 60, 129, .18);
}

    .kpi-card::after {
        content: "";
        position: absolute;
        right: -22px;
        bottom: -22px;
        width: 82px;
        height: 82px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .12);
    }

    .kpi-card span {
        display: block;
        font-size: 13px;
        color: #D6E6FF;
        font-weight: 800;
    }

    .kpi-card strong {
        display: block;
        margin-top: 10px;
        font-size: 30px;
        line-height: 1;
        letter-spacing: .5px;
    }

    .kpi-card small {
        display: block;
        margin-top: 8px;
        color: #BFD8FF;
        font-size: 12px;
        font-weight: 700;
    }

    .kpi-card.warning {
        background: linear-gradient(135deg, #8A4B00, #F59E0B);
    }

    .kpi-card.success {
        background: linear-gradient(135deg, #0F6B3A, #22A55A);
    }

    .kpi-card.danger {
        background: linear-gradient(135deg, #8B1E2D, #DC3545);
    }

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 10px;
}

    .section-title h2 {
        margin: 0;
        color: #08213F;
        font-size: 18px;
    }

    .section-title span {
        color: #68748A;
        font-size: 13px;
        font-weight: 700;
    }

.module-card {
    position: relative;
    overflow: hidden;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

    .module-card::after {
        content: "";
        position: absolute;
        right: -18px;
        bottom: -18px;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(60, 116, 220, .08);
    }

    .module-card:active {
        transform: scale(.98);
        box-shadow: 0 4px 12px rgba(31, 53, 88, .08);
    }

    .module-card .icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        background: #EAF3FF;
        color: #3C74DC;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900;
        margin-bottom: 10px;
    }

.notice-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notice-pro {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border-radius: 16px;
    background: #F5F9FF;
    border: 1px solid #D8E5F5;
}

    .notice-pro .dot {
        width: 10px;
        height: 10px;
        min-width: 10px;
        border-radius: 50%;
        background: #3C74DC;
        margin-top: 6px;
    }

    .notice-pro.warning .dot {
        background: #F59E0B;
    }

    .notice-pro.danger .dot {
        background: #DC3545;
    }

    .notice-pro.success .dot {
        background: #22A55A;
    }

    .notice-pro strong {
        display: block;
        color: #08213F;
        font-size: 14px;
        margin-bottom: 2px;
    }

    .notice-pro small {
        display: block;
        color: #68748A;
        line-height: 1.4;
    }

.server-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #E8F8ED;
    color: #16803A;
    font-size: 13px;
    font-weight: 800;
}

    .server-chip.error {
        background: #FFECEC;
        color: #D62828;
    }

.hero-card,
.card,
.module-card,
.list-card {
    backdrop-filter: blur(6px);
}

/* Camera / attachment mobile blocks */
.upload-panel {
    border: 1px dashed #90CAF9;
    background: #F5F9FF;
    border-radius: 18px;
    padding: 16px;
    margin: 12px 0;
}

    .upload-panel strong {
        display: block;
        color: #08213F;
        margin-bottom: 6px;
    }

    .upload-panel small {
        display: block;
        color: #68748A;
        line-height: 1.5;
    }

.file-input {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: white;
    border: 1px solid #D8E5F5;
}

/* Signature Fix */
.signature-canvas {
    width: 100%;
    height: 260px;
    display: block;
    border: 1px solid #90CAF9;
    border-radius: 18px;
    background: #ffffff;
    touch-action: none;
    -ms-touch-action: none;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* 電腦瀏覽器測手機版時，讓畫面不要太窄 */
@media (min-width: 768px) {
    .mobile-page {
        max-width: 820px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .list-card,
    .customer-link {
        width: 100%;
    }
}

/* 真手機寬度 */
@media (max-width: 480px) {
    .mobile-page {
        padding: 18px 12px 52px;
    }

    .hero-card h1,
    .page-title h1 {
        font-size: 24px;
    }

    .card {
        padding: 16px;
    }

    .list-card,
    .customer-link {
        padding: 16px;
        border-radius: 16px;
    }

        .list-card strong,
        .customer-link strong {
            font-size: 16px;
        }

    .kpi-card {
        min-height: 98px;
        padding: 16px;
        border-radius: 20px;
    }

        .kpi-card strong {
            font-size: 26px;
        }

    .module-card {
        min-height: 104px;
        padding: 14px;
    }

    .signature-canvas {
        height: 260px;
    }

    .signature-cal-panel {
        position: relative;
        width: 100%;
        height: 180px;
        margin-top: 14px;
        border: 2px dashed #3C74DC;
        border-radius: 18px;
        background: #F5F9FF;
        touch-action: none;
        user-select: none;
    }

    .signature-cross.horizontal {
        position: absolute;
        left: 20%;
        right: 20%;
        top: 50%;
        height: 2px;
        background: #DC3545;
    }

    .signature-cross.vertical {
        position: absolute;
        top: 20%;
        bottom: 20%;
        left: 50%;
        width: 2px;
        background: #DC3545;
    }

    .signature-cross-dot {
        position: absolute;
        width: 18px;
        height: 18px;
        left: calc(50% - 9px);
        top: calc(50% - 9px);
        border-radius: 50%;
        background: #DC3545;
        border: 3px solid white;
        box-shadow: 0 0 0 2px #DC3545;
    }

    .signature-cal-panel {
        position: relative;
        width: 100%;
        height: 180px;
        margin-top: 14px;
        border: 2px dashed #3C74DC;
        border-radius: 18px;
        background: #F5F9FF;
        touch-action: none;
        user-select: none;
    }

    .signature-cross.horizontal {
        position: absolute;
        left: 20%;
        right: 20%;
        top: 50%;
        height: 2px;
        background: #DC3545;
    }

    .signature-cross.vertical {
        position: absolute;
        top: 20%;
        bottom: 20%;
        left: 50%;
        width: 2px;
        background: #DC3545;
    }

    .signature-cross-dot {
        position: absolute;
        width: 18px;
        height: 18px;
        left: calc(50% - 9px);
        top: calc(50% - 9px);
        border-radius: 50%;
        background: #DC3545;
        border: 3px solid white;
        box-shadow: 0 0 0 2px #DC3545;
    }
}
/* =========================
   ERP Permission UI
========================= */

.permission-denied {
    background: linear-gradient(135deg, #8B1E2D, #DC3545);
    color: white;
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 12px 28px rgba(220, 53, 69, .22);
}

    .permission-denied h2 {
        margin: 0 0 10px;
        font-size: 24px;
    }

    .permission-denied p {
        margin: 0;
        line-height: 1.7;
        color: #FFE8EC;
    }

.readonly-mask {
    position: relative;
    opacity: .78;
    pointer-events: none;
}

.readonly-banner {
    background: #FFF4E5;
    border: 1px solid #FFD399;
    color: #8A4B00;
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-weight: 800;
}

.permission-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #EAF3FF;
    color: #2459B8;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    margin-right: 8px;
    margin-bottom: 8px;
}

    .permission-chip.danger {
        background: #FFECEC;
        color: #D62828;
    }

    .permission-chip.success {
        background: #E8F8ED;
        color: #16803A;
    }

    .permission-chip.warning {
        background: #FFF4E5;
        color: #A15C00;
    }


/* Mobile Product Management */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.scan-row {
    display: grid;
    grid-template-columns: 1fr 96px;
    gap: 8px;
    align-items: start;
}

.scan-input {
    margin-right: 0;
}

.btn-scan {
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: #198754;
    color: white;
    font-weight: 800;
    margin: 8px 0 12px;
}

.action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

    .action-row .btn-danger {
        grid-column: span 2;
    }

.btn-danger {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 14px;
    font-weight: 800;
    cursor: pointer;
    background: #DC3545;
    color: white;
}

.success-alert {
    background: #E8F8ED;
    border-color: #A8E0B8;
    color: #146C2E;
}

.info-alert {
    background: #EAF3FF;
    border-color: #90CAF9;
    color: #1F579A;
}

.product-link em {
    font-style: normal;
    color: #3C74DC;
    font-size: 13px;
    font-weight: 800;
    margin-top: 4px;
}

/* Barcode Scanner */
.barcode-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(8, 33, 63, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.barcode-panel {
    width: min(100%, 420px);
    background: white;
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
}

.barcode-title {
    font-weight: 900;
    color: #08213F;
    font-size: 18px;
    margin-bottom: 10px;
}

.barcode-video {
    width: 100%;
    min-height: 260px;
    background: #000;
    border-radius: 16px;
    object-fit: cover;
}

.barcode-hint {
    color: #68748A;
    font-weight: 700;
    margin: 10px 0;
    line-height: 1.5;
}

.barcode-cancel {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: 14px;
    background: #DC3545;
    color: white;
    font-weight: 900;
}

@media (max-width: 520px) {
    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }

    .scan-row {
        grid-template-columns: 1fr;
    }

    .btn-scan {
        margin-top: -4px;
    }
}

/* Barcode Scanner - iPhone compatible controls */
.barcode-open-camera,
.barcode-photo,
.barcode-manual-ok {
    border: 0;
    border-radius: 14px;
    font-weight: 900;
    min-height: 44px;
}

.barcode-open-camera {
    width: 100%;
    background: #3C74DC;
    color: white;
    margin-bottom: 8px;
}

.barcode-photo {
    width: 100%;
    background: #EAF3FF;
    color: #1F579A;
    border: 1px solid #90CAF9;
    margin-bottom: 8px;
}

.barcode-manual-row {
    display: grid;
    grid-template-columns: 1fr 86px;
    gap: 8px;
    margin: 10px 0;
}

.barcode-manual-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid #B9C7DA;
    border-radius: 14px;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 800;
}

.barcode-manual-ok {
    background: #1F9D55;
    color: white;
}

.barcode-open-camera:disabled,
.barcode-photo:disabled,
.barcode-manual-ok:disabled {
    opacity: .58;
}

/* Public online meter reading */
.public-meter-page .success-card {
    border-color: #B7E4C7;
    background: #F1FFF6;
}

/* Rental / meter mobile readability */
.mobile-page:has(.meter-card),
.mobile-page:has(.meter-tabs),
.mobile-page:has(.detail-hero),
.public-meter-page {
    font-size: 17px;
    line-height: 1.68;
}

.mobile-page:has(.meter-card) .page-title h1,
.mobile-page:has(.meter-tabs) .page-title h1,
.mobile-page:has(.detail-hero) .page-title h1,
.public-meter-page .hero-card h1 {
    font-size: 30px;
    line-height: 1.18;
}

.mobile-page:has(.meter-card) .page-title p,
.mobile-page:has(.meter-tabs) .page-title p,
.mobile-page:has(.detail-hero) .page-title p,
.public-meter-page .hero-card p {
    font-size: 17px;
    line-height: 1.75;
}

.mobile-page:has(.meter-card) label,
.mobile-page:has(.meter-tabs) label,
.mobile-page:has(.detail-hero) label,
.public-meter-page label {
    display: block;
    font-size: 17px;
    line-height: 1.45;
    margin-top: 6px;
}

.mobile-page:has(.meter-card) .input,
.mobile-page:has(.meter-tabs) .input,
.mobile-page:has(.detail-hero) .input,
.mobile-page:has(.meter-card) .textarea,
.mobile-page:has(.meter-tabs) .textarea,
.mobile-page:has(.detail-hero) .textarea,
.public-meter-page .input,
.public-meter-page .textarea {
    min-height: 52px;
    height: auto;
    font-size: 18px;
    line-height: 1.45;
    border-radius: 16px;
    padding: 12px 14px;
}

.mobile-page:has(.meter-card) .textarea,
.mobile-page:has(.meter-tabs) .textarea,
.mobile-page:has(.detail-hero) .textarea,
.public-meter-page .textarea {
    min-height: 132px;
}

.mobile-page:has(.meter-card) .btn-primary,
.mobile-page:has(.meter-card) .btn-secondary,
.mobile-page:has(.meter-card) .link-button,
.mobile-page:has(.meter-tabs) .btn-primary,
.mobile-page:has(.meter-tabs) .btn-secondary,
.mobile-page:has(.meter-tabs) .link-button,
.mobile-page:has(.detail-hero) .btn-primary,
.mobile-page:has(.detail-hero) .btn-secondary,
.mobile-page:has(.detail-hero) .link-button,
.public-meter-page .btn-primary,
.public-meter-page .btn-secondary,
.public-meter-page .link-button {
    min-height: 52px;
    height: auto;
    font-size: 17px;
    line-height: 1.25;
    padding: 12px 14px;
    border-radius: 16px;
}

.mobile-page:has(.meter-card) .card,
.mobile-page:has(.meter-tabs) .card,
.mobile-page:has(.detail-hero) .card,
.public-meter-page .card {
    padding: 20px;
    border-radius: 22px;
}

.mobile-page:has(.meter-card) .card h2,
.mobile-page:has(.meter-tabs) .card h2,
.mobile-page:has(.detail-hero) .card h2,
.public-meter-page .card h2 {
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 12px;
}

.mobile-page:has(.meter-card) .service-card,
.mobile-page:has(.meter-tabs) .service-card,
.mobile-page:has(.detail-hero) .mini-card,
.public-meter-page .mini-card {
    padding: 18px;
    border-radius: 20px;
}

.mobile-page:has(.meter-card) .service-card h3,
.mobile-page:has(.meter-tabs) .service-card h3 {
    font-size: 22px;
    line-height: 1.35;
}

.mobile-page:has(.meter-card) .service-card p,
.mobile-page:has(.meter-tabs) .service-card p,
.mobile-page:has(.meter-card) .service-card small,
.mobile-page:has(.meter-tabs) .service-card small,
.mobile-page:has(.detail-hero) .mini-card small,
.mobile-page:has(.detail-hero) .muted,
.public-meter-page .mini-card small,
.public-meter-page .muted {
    font-size: 16px;
    line-height: 1.72;
}

.mobile-page:has(.meter-card) .status-badge,
.mobile-page:has(.meter-tabs) .status-badge,
.mobile-page:has(.detail-hero) .status-badge {
    font-size: 15px;
    padding: 7px 12px;
}

.mobile-page:has(.meter-card) .tab-btn,
.mobile-page:has(.meter-tabs) .tab-btn {
    min-height: 48px;
    height: auto;
    font-size: 16px;
    border-radius: 16px;
}

.mobile-page:has(.detail-hero) .detail-hero,
.public-meter-page .detail-hero {
    padding: 22px;
    gap: 8px;
}

.mobile-page:has(.detail-hero) .detail-hero strong,
.public-meter-page .detail-hero strong {
    font-size: 28px;
    line-height: 1.25;
}

.mobile-page:has(.detail-hero) .detail-hero span,
.mobile-page:has(.detail-hero) .detail-hero small,
.public-meter-page .detail-hero span,
.public-meter-page .detail-hero small {
    font-size: 17px;
    line-height: 1.55;
}

.mobile-page:has(.detail-hero) .info-row,
.public-meter-page .info-row {
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
}

.mobile-page:has(.detail-hero) .info-row span,
.mobile-page:has(.detail-hero) .info-block span,
.public-meter-page .info-row span,
.public-meter-page .info-block span {
    font-size: 16px;
    line-height: 1.55;
}

.mobile-page:has(.detail-hero) .info-row b,
.public-meter-page .info-row b {
    font-size: 18px;
    line-height: 1.45;
}

.required {
    color: #C62828;
}

.signature-canvas {
    display: block;
    width: 100%;
    height: 220px;
    border: 2px dashed #90CAF9;
    border-radius: 16px;
    background: #FFFFFF;
    touch-action: none;
    margin: 10px 0 12px;
}

.button-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.button-row .btn-primary,
.button-row .btn-secondary {
    flex: 1;
}

.muted {
    color: #68748A;
    font-size: 13px;
    line-height: 1.5;
}

/* Online meter photo compression / signature lock */
.photo-mini-card small {
    display: block;
    margin-top: 4px;
}

.signature-status {
    border: 1px solid #FFD399;
    background: #FFF8EC;
    color: #8A4B00;
    border-radius: 14px;
    padding: 10px 12px;
    font-weight: 900;
    margin: 8px 0 10px;
}

.signature-status.locked {
    border-color: #A8E0B8;
    background: #E8F8ED;
    color: #146C2E;
}

.signature-canvas.signature-locked {
    border-style: solid;
    border-color: #22A559;
    background: #F8FFF9;
}

.signature-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}

@media (max-width: 420px) {
    .signature-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .mobile-page:has(.meter-card),
    .mobile-page:has(.meter-tabs),
    .mobile-page:has(.detail-hero),
    .public-meter-page {
        padding: 20px 14px 118px;
        font-size: 18px;
    }

    .mobile-page:has(.meter-card) .page-title h1,
    .mobile-page:has(.meter-tabs) .page-title h1,
    .mobile-page:has(.detail-hero) .page-title h1,
    .public-meter-page .hero-card h1 {
        font-size: 30px;
    }

    .mobile-page:has(.meter-card) .grid-2,
    .mobile-page:has(.meter-tabs) .grid-2,
    .mobile-page:has(.detail-hero) .grid-2,
    .public-meter-page .grid-2,
    .public-meter-page .signature-action-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mobile-page:has(.meter-card) .quick-tabs,
    .mobile-page:has(.meter-tabs) .quick-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-page:has(.meter-card) .service-card-head,
    .mobile-page:has(.meter-tabs) .service-card-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-page:has(.detail-hero) .info-row,
    .public-meter-page .info-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .mobile-page:has(.detail-hero) .info-row b,
    .public-meter-page .info-row b {
        text-align: left;
    }

}

body.erp-signature-fullscreen-open {
    overflow: hidden;
    touch-action: none;
}

.erp-signature-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(5, 18, 34, .94);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

.erp-signature-fullscreen-panel {
    width: min(100%, 760px);
    min-height: calc(100dvh - 20px);
    background: #F5F7FB;
    border-radius: 22px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .35);
}

.erp-signature-fullscreen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.erp-signature-fullscreen-header strong {
    color: #08213F;
    font-size: 20px;
    font-weight: 900;
}

.erp-signature-fullscreen-header button,
.erp-signature-fullscreen-actions button {
    border: 0;
    border-radius: 14px;
    min-height: 46px;
    padding: 0 18px;
    font-weight: 900;
}

.erp-signature-fullscreen-header button,
.erp-signature-fullscreen-actions .secondary {
    background: #EAF3FF;
    color: #1F579A;
    border: 1px solid #90CAF9;
}

.erp-signature-fullscreen-hint {
    color: #68748A;
    font-weight: 800;
    line-height: 1.5;
}

.erp-signature-fullscreen-canvas {
    width: 100%;
    height: calc(100dvh - 190px);
    min-height: 360px;
    flex: 1;
    background: #FFFFFF;
    border: 3px dashed #3C74DC;
    border-radius: 18px;
    touch-action: none;
}

.erp-signature-fullscreen-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
}

.erp-signature-fullscreen-actions .primary {
    background: #22A559;
    color: white;
    font-size: 18px;
}

@media (orientation: landscape) {
    .erp-signature-fullscreen-panel {
        width: min(100%, 980px);
    }

    .erp-signature-fullscreen-canvas {
        min-height: 220px;
        height: calc(100dvh - 150px);
    }
}

/* Electric Meter Mobile */
.checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    margin: 4px 0 12px;
}

.checkbox-line input {
    width: 18px;
    height: 18px;
}

.meter-chip-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.meter-chip {
    border: 1px solid #D8E5F5;
    background: #F5F9FF;
    border-radius: 16px;
    padding: 10px 12px;
    text-align: left;
    font-family: inherit;
}

.meter-chip strong,
.meter-chip span,
.meter-chip small {
    display: block;
    line-height: 1.45;
}

.meter-chip strong {
    color: #08213F;
    font-size: 15px;
}

.meter-chip span {
    color: #3C74DC;
    font-weight: 800;
    font-size: 13px;
}

.meter-chip small {
    color: #16803A;
    font-weight: 800;
    font-size: 12px;
}

.meter-chip.disabled {
    background: #F3F4F6;
    border-color: #E1E5EA;
    opacity: .72;
}

.meter-chip.disabled small {
    color: #D62828;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 8px 0 14px;
}

.metric-box {
    background: #F5F9FF;
    border: 1px solid #D8E5F5;
    border-radius: 16px;
    padding: 12px;
    min-height: 92px;
}

.metric-box span,
.metric-box small {
    display: block;
    color: #68748A;
    font-size: 12px;
    font-weight: 800;
}

.metric-box strong {
    display: block;
    margin: 7px 0 4px;
    color: #08213F;
    font-size: 20px;
    line-height: 1;
}

.fee-input-row {
    margin: 10px 0 8px;
}

.fee-preview {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    border: 1px solid #D8E5F5;
    border-radius: 14px;
    background: #F5F9FF;
    padding: 9px 12px;
}

.fee-preview strong,
.fee-preview small {
    display: block;
}

.fee-preview strong {
    color: #08213F;
    font-size: 18px;
    line-height: 1.2;
}

.fee-preview small {
    margin-top: 4px;
    color: #68748A;
    font-size: 12px;
    font-weight: 800;
}

.total-summary-card {
    margin-top: 14px;
}

.total-metric-grid {
    grid-template-columns: repeat(4, 1fr);
}

.fee-total-box strong {
    color: #16803A;
}

.export-row {
    margin-top: 10px;
}

.electric-reading-card span {
    color: #2459B8;
}

@media (max-width: 520px) {
    .meter-chip-list,
    .metric-grid {
        grid-template-columns: 1fr;
    }
}

/* Child pickup formal mobile theme */
.pickup-mobile,
.pickup-app {
    background: #F5F7F3;
    color: #17211D;
}

.pickup-mobile {
    padding: 18px 14px;
}

.pickup-login-hero {
    min-height: 188px;
    border-radius: 22px;
    padding: 22px;
    background: linear-gradient(145deg, #244C42, #3E7160);
    box-shadow: 0 14px 28px rgba(36, 76, 66, .22);
}

.pickup-brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    margin-bottom: 18px;
    font-size: 27px;
    background: rgba(255, 255, 255, .18);
}

.pickup-login-hero h1 {
    font-size: 30px;
    line-height: 1.2;
}

.pickup-login-hero p {
    font-size: 16px;
    color: #EEF8F1;
}

.pickup-login-card,
.pickup-login-note,
.pickup-panel {
    margin-top: 14px;
    border: 1px solid #DBE6DC;
    border-radius: 18px;
    padding: 18px;
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(32, 45, 39, .08);
}

.pickup-login-note {
    display: grid;
    gap: 6px;
    color: #52635B;
    font-size: 15px;
    line-height: 1.5;
}

.pickup-login-note strong {
    color: #244C42;
    font-size: 17px;
}

.pickup-login-card label,
.pickup-panel label {
    margin: 8px 0 6px;
    color: #33443C;
    font-size: 15px;
}

.pickup-input {
    min-height: 46px;
    border: 1px solid #BED2C4;
    border-radius: 13px;
    background: #F8FBF6;
    padding: 0 13px;
    font-size: 17px;
}

.pickup-input:focus {
    border-color: #D86B51;
    background: #FFFFFF;
}

.pickup-primary,
.pickup-secondary {
    min-height: 48px;
    border-radius: 13px;
    font-size: 17px;
}

.pickup-primary {
    margin-top: 14px;
    background: #D86B51;
}

.pickup-secondary {
    border-color: #C9D8CB;
    background: #EEF5EE;
    color: #244C42;
}

.pickup-top {
    height: 66px;
    padding: max(10px, env(safe-area-inset-top)) 12px 8px;
    background: #244C42;
    grid-template-columns: 46px 1fr 46px;
}

.pickup-top h1 {
    font-size: 22px;
    font-weight: 800;
}

.pickup-icon-button {
    width: 42px;
    height: 42px;
    color: #FFFFFF;
    font-size: 28px;
    text-decoration: none;
    display: grid;
    place-items: center;
}

.pickup-drawer {
    background: #244C42;
}

.pickup-drawer a {
    min-height: 58px;
    padding: 0 24px;
    font-size: 21px;
}

.pickup-map {
    height: 250px;
    border-bottom-color: #244C42;
}

.pickup-status-bar {
    padding: 16px;
    background: #244C42;
}

.pickup-segment {
    min-height: 46px;
    font-size: 18px;
}

.pickup-segment.active {
    color: #244C42;
}

.pickup-chip {
    min-height: 38px;
    border-color: #BFD2C6;
    background: #F1F6F1;
    color: #244C42;
    font-size: 15px;
}

.pickup-chip.active {
    background: #D86B51;
}

.pickup-panel {
    margin: 14px;
}

.pickup-panel.compact {
    padding: 16px;
}

.pickup-panel h2 {
    margin-bottom: 10px;
    color: #1F382F;
    font-size: 22px;
}

.pickup-notice,
.pickup-faq {
    padding: 9px 0;
    color: #253B34;
    font-size: 16px;
}

.pickup-record {
    min-height: 76px;
    grid-template-columns: 1fr 86px;
    padding: 12px 14px;
}

.pickup-record strong {
    font-size: 18px;
    font-weight: 800;
}

.pickup-record span {
    font-size: 15px;
}

.pickup-time b {
    font-size: 20px;
}

.pickup-time small {
    font-size: 17px;
}

.pickup-switch-row,
.pickup-person-row {
    min-height: 58px;
    border-radius: 14px;
    padding: 0 14px;
    font-size: 19px;
}

.pickup-person-row span {
    font-size: 14px;
}

.pickup-switch {
    width: 64px;
    height: 34px;
}

.pickup-switch::after {
    width: 28px;
    height: 28px;
}

.pickup-switch.on {
    background: #D86B51;
}

.pickup-switch.on::after {
    left: 33px;
}

.pickup-actions.two {
    grid-template-columns: 1fr 1fr;
}

.pickup-hint,
.pickup-empty {
    font-size: 15px;
}

.pickup-live-card {
    border-color: #D9E5DA;
    border-radius: 15px;
    background: #FCFDFB;
    padding: 13px;
}

.pickup-live-card strong {
    color: #1F382F;
    font-size: 18px;
}

.pickup-live-card span,
.pickup-live-card small {
    font-size: 13px;
}

.pickup-live-distance {
    min-width: 86px;
}

.pickup-live-distance b {
    color: #D86B51;
    font-size: 20px;
}

.pickup-online.on {
    background: #E7F5E7;
    color: #2F6B3E;
}

.pickup-bottom {
    height: 72px;
    background: #244C42;
}

.pickup-bottom button {
    color: #D7E5DB;
    font-size: 16px;
}

.pickup-bottom button.center {
    width: 118px;
    height: 72px;
    margin-top: -18px;
    background: #D86B51;
    box-shadow: 0 6px 16px rgba(216, 107, 81, .28);
}

.school-mode {
    padding-bottom: 24px;
}

.school-map-panel {
    margin: 12px;
    overflow: hidden;
    border: 1px solid #DBE6DC;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 10px 22px rgba(32, 45, 39, .08);
}

.school-map-shell {
    position: relative;
    height: 310px;
    overflow: hidden;
    background: #E7ECE6;
}

.school-google-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.school-map-shade {
    position: absolute;
    inset: auto 0 0;
    height: 72px;
    background: linear-gradient(to top, rgba(20, 36, 31, .28), transparent);
    pointer-events: none;
}

.school-marker {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -100%);
    display: grid;
    gap: 4px;
    justify-items: center;
    max-width: 170px;
}

.school-marker b {
    width: 38px;
    height: 38px;
    border: 3px solid #FFFFFF;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #D86B51;
    color: #FFFFFF;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .24);
}

.school-marker.school b {
    background: #244C42;
}

.school-marker span {
    max-width: 170px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #17211D;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .16);
}

.school-map-summary {
    display: grid;
    gap: 4px;
    padding: 13px 15px;
}

.school-map-summary strong {
    color: #1F382F;
    font-size: 18px;
}

.school-map-summary span {
    color: #647168;
    font-size: 13px;
}

.pickup-app.parent-mode .pickup-drawer {
    width: min(70vw, 300px);
}

.pickup-app.parent-mode .pickup-bottom {
    grid-template-columns: 1fr 1fr;
}

.pickup-app.parent-mode .pickup-bottom button.center {
    width: auto;
    height: auto;
    margin-top: 0;
    border-radius: 0;
    box-shadow: none;
}

.pickup-alert.inline {
    margin-top: 14px;
}

.pickup-panel.disabled-feature {
    margin: 22px;
}

.pickup-panel.disabled-feature p {
    color: #5F6F66;
    font-size: 18px;
    line-height: 1.6;
}

.pickup-actions .link-button {
    display: grid;
    place-items: center;
    text-decoration: none;
}

.pickup-primary.full {
    width: 100%;
    margin-top: 16px;
}

.pickup-toggle-list {
    display: grid;
    gap: 12px;
}

.pickup-toggle-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid rgba(36, 76, 66, .18);
    border-radius: 14px;
    background: #F7FBF5;
}

.pickup-toggle-row span {
    display: grid;
    gap: 4px;
}

.pickup-toggle-row strong {
    color: #20372F;
    font-size: 17px;
}

.pickup-toggle-row small {
    color: #65746B;
    font-size: 13px;
}

.pickup-toggle-row input {
    width: 24px;
    height: 24px;
    accent-color: #D27253;
}

.pickup-login-hero.school-admin {
    background: linear-gradient(135deg, #244C42, #D27253);
}

.pickup-mobile.school-login .pickup-brand-mark {
    background: rgba(255, 255, 255, .18);
    color: #FFFFFF;
}

.pickup-refresh-hint {
    margin: 0 0 12px;
    color: #5E6F66;
    font-size: 14px;
    font-weight: 800;
}

.pickup-app.parent-mode .pickup-status-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 18px 24px;
    background: #244C42;
}

.pickup-app.parent-mode .pickup-segment {
    width: 100%;
    min-height: 58px;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    font-size: 20px;
    text-align: center;
}

.pickup-app.parent-mode .pickup-segment:first-child,
.pickup-app.parent-mode .pickup-segment:last-child {
    border-radius: 999px;
}

.pickup-app.school-mode .pickup-drawer {
    width: min(72vw, 320px);
    background: #244C42;
}

.pickup-app.school-mode .pickup-drawer a {
    min-height: 64px;
    padding: 0 26px;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    font-size: 22px;
    font-weight: 900;
}

.pickup-board-page {
    min-height: 100vh;
    padding: 28px;
    background: #F1F5EF;
    color: #17211D;
    font-family: "Microsoft JhengHei", "Segoe UI", sans-serif;
}

.pickup-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 32px;
    border-radius: 26px;
    background: linear-gradient(135deg, #244C42, #17352E);
    color: #FFFFFF;
    box-shadow: 0 18px 38px rgba(22, 42, 35, .18);
}

.pickup-board-header span {
    color: #BDE3D5;
    font-size: 18px;
    letter-spacing: .08em;
    font-weight: 800;
}

.pickup-board-header h1 {
    margin: 10px 0 0;
    font-size: clamp(34px, 4vw, 64px);
    line-height: 1.1;
}

.pickup-board-clock {
    min-width: 190px;
    text-align: right;
}

.pickup-board-clock b {
    display: block;
    font-size: clamp(32px, 4vw, 58px);
}

.pickup-board-clock small {
    color: #CDE8DC;
    font-size: 18px;
}

.pickup-board-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 22px 0;
}

.pickup-board-metrics article {
    padding: 22px 24px;
    border-radius: 22px;
    background: #FFFFFF;
    border: 1px solid #D9E5DA;
    box-shadow: 0 12px 26px rgba(28, 47, 40, .08);
}

.pickup-board-metrics span {
    color: #617168;
    font-size: 21px;
    font-weight: 800;
}

.pickup-board-metrics b {
    display: block;
    margin-top: 8px;
    color: #244C42;
    font-size: clamp(40px, 5vw, 78px);
    line-height: 1;
}

.pickup-board-live {
    margin-bottom: 22px;
    padding: 22px;
    border-radius: 24px;
    background: #FFFFFF;
    border: 1px solid #D9E5DA;
}

.pickup-board-live h2 {
    margin: 0 0 16px;
    font-size: 30px;
}

.pickup-board-parent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

.pickup-board-parent-grid article {
    padding: 18px;
    border-radius: 18px;
    background: #EAF4EF;
    border-left: 8px solid #D27253;
}

.pickup-board-parent-grid strong,
.pickup-board-parent-grid b,
.pickup-board-parent-grid span {
    display: block;
}

.pickup-board-parent-grid strong {
    font-size: 24px;
}

.pickup-board-parent-grid span {
    margin-top: 4px;
    color: #5D6B62;
    font-size: 18px;
}

.pickup-board-parent-grid b {
    margin-top: 10px;
    color: #D27253;
    font-size: 30px;
}

.pickup-board-empty {
    color: #69756E;
    font-size: 22px;
}

.pickup-board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
}

.pickup-board-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 136px;
    padding: 20px;
    border-radius: 24px;
    background: #FFFFFF;
    border: 2px solid #DDE8DE;
    box-shadow: 0 12px 28px rgba(28, 47, 40, .08);
}

.pickup-board-card.waiting {
    border-color: #D27253;
    background: #FFF6F0;
}

.pickup-board-card.picked {
    border-color: #5BA87D;
    background: #F2FBF5;
}

.pickup-board-status {
    min-width: 92px;
    padding: 12px 10px;
    border-radius: 16px;
    background: #E7ECE6;
    color: #244C42;
    text-align: center;
    font-size: 22px;
    font-weight: 900;
}

.pickup-board-card.waiting .pickup-board-status {
    background: #D27253;
    color: #FFFFFF;
}

.pickup-board-card.picked .pickup-board-status {
    background: #5BA87D;
    color: #FFFFFF;
}

.pickup-board-card span {
    color: #66746C;
    font-size: 18px;
    font-weight: 800;
}

.pickup-board-card h2 {
    margin: 4px 0;
    color: #14221D;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.12;
}

.pickup-board-card p {
    margin: 0;
    color: #4E5E55;
    font-size: 21px;
}

.pickup-board-meta {
    text-align: right;
}

.pickup-board-meta b {
    display: block;
    color: #14221D;
    font-size: 36px;
}

.pickup-board-meta small {
    color: #D27253;
    font-size: 20px;
    font-weight: 900;
}

@media (max-width: 760px) {
    .pickup-board-page {
        padding: 14px;
    }

    .pickup-board-header,
    .pickup-board-card {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .pickup-board-header {
        display: grid;
    }

    .pickup-board-clock,
    .pickup-board-meta {
        text-align: left;
    }

    .pickup-board-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================
   ChildPickup Desktop Admin v1
   ================================ */
.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: linear-gradient(135deg, #f2f7f2 0%, #e7f0ec 52%, #fff6ef 100%);
}

.admin-login-card {
    width: min(760px, 100%);
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(28, 52, 44, .18);
    border: 1px solid rgba(47, 82, 70, .12);
    padding: 34px;
}

.admin-login-brand {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 26px;
}

.admin-login-brand h1 {
    margin: 0 0 8px;
    font-size: 32px;
    color: #183c32;
}

.admin-login-brand p {
    margin: 0;
    color: #607267;
    line-height: 1.7;
}

.admin-logo {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    background: #3f6b5b;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 32px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    flex: 0 0 auto;
}

.admin-logo.small {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 22px;
}

.admin-login-button {
    margin-top: 18px;
}

.admin-login-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.admin-login-links a {
    color: #2f5d4d;
    font-weight: 700;
    text-decoration: none;
}

.admin-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 284px 1fr;
    background: #f4f7f4;
    color: #173d33;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #173d33;
    color: #fff;
    padding: 22px;
}

.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}

.admin-sidebar-brand strong {
    display: block;
    font-size: 18px;
}

.admin-sidebar-brand span {
    color: rgba(255,255,255,.72);
    font-size: 13px;
}

.admin-menu {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}

.admin-menu a,
.admin-sidebar-footer a,
.admin-sidebar-footer button {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 12px 14px;
    color: rgba(255,255,255,.84);
    background: transparent;
    text-align: left;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
    font-size: 15px;
}

.admin-menu a:hover,
.admin-menu a.active {
    background: rgba(255,255,255,.14);
    color: #fff;
}

.admin-sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.14);
}

.admin-sidebar-footer button {
    color: #ffd3c3;
}

.admin-main {
    padding: 28px;
    min-width: 0;
}

.admin-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.admin-topbar h1 {
    margin: 0 0 8px;
    font-size: 30px;
    color: #173d33;
}

.admin-topbar p {
    margin: 0;
    color: #607267;
}

.admin-top-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.admin-primary,
.admin-outline,
.admin-primary-link,
.table-button {
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 10px 14px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-primary,
.admin-primary-link {
    background: #cf7354;
    color: #fff;
}

.admin-outline,
.table-button {
    background: #fff;
    color: #275344;
    border-color: #c8d8cf;
}

.table-button {
    padding: 7px 10px;
    font-size: 13px;
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.admin-kpi,
.admin-panel {
    background: #fff;
    border-radius: 22px;
    border: 1px solid #dbe7df;
    box-shadow: 0 18px 50px rgba(23, 61, 51, .08);
}

.admin-kpi {
    padding: 22px;
}

.admin-kpi span {
    color: #6b7d72;
    font-weight: 800;
}

.admin-kpi strong {
    display: block;
    font-size: 38px;
    color: #173d33;
    margin-top: 8px;
}

.admin-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-panel {
    padding: 22px;
    margin-bottom: 18px;
}

.admin-panel h2 {
    margin: 0 0 16px;
    color: #173d33;
    font-size: 22px;
}

.admin-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-panel-title h2 {
    margin: 0;
}

.admin-panel-title a {
    color: #cf7354;
    font-weight: 900;
    text-decoration: none;
}

.admin-table-wrap {
    overflow: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.admin-table.compact {
    min-width: 560px;
}

.admin-table th,
.admin-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e5eee8;
    vertical-align: top;
    text-align: left;
}

.admin-table th {
    color: #476457;
    font-size: 13px;
    background: #f7faf8;
    white-space: nowrap;
}

.admin-table small {
    color: #75887d;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.admin-form-grid.small-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-form-grid label {
    font-weight: 900;
    color: #2b4d42;
}

.admin-form-grid .wide {
    grid-column: span 2;
}

.admin-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
}

.admin-check input {
    width: 18px;
    height: 18px;
}

.admin-form-actions {
    display: flex;
    align-items: end;
    gap: 10px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
    font-size: 13px;
    background: #eef3f0;
    color: #375548;
}

.status-pill.waiting {
    background: #fff0e8;
    color: #bd5e3d;
}

.status-pill.done {
    background: #e8f7ed;
    color: #1f7a4d;
}

.status-pill.cancelled {
    background: #f1f1f1;
    color: #777;
}

@media (max-width: 980px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
        height: auto;
    }

    .admin-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-sidebar-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .admin-topbar,
    .admin-top-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-kpi-grid,
    .admin-grid-two,
    .admin-form-grid,
    .admin-form-grid.small-form {
        grid-template-columns: 1fr;
    }

    .admin-form-grid .wide {
        grid-column: auto;
    }
}

/* 2026-06 child pickup completion buttons */
.pickup-live-card-action {
    gap: 14px;
}

.pickup-complete-button {
    border: 0;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 800;
    color: #ffffff;
    background: #c96f4f;
    box-shadow: 0 10px 22px rgba(201, 111, 79, .22);
    cursor: pointer;
    white-space: nowrap;
}

.pickup-complete-button:disabled,
.table-button.complete:disabled {
    opacity: .62;
    cursor: wait;
}

.table-button.complete {
    background: #c96f4f;
    color: #ffffff;
    border-color: #c96f4f;
}

.admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}