:root{--primary: #0058be;--primary-container: #2170e4;--surface: #faf8ff;--surface-container-low: #f2f3ff;--surface-container-lowest: #ffffff;--surface-container-high: #e2e7ff;--surface-container: #eaedff;--on-surface: #131b2e;--on-surface-variant: #424754;--on-primary: #ffffff;--on-tertiary: #ffffff;--outline: #727785;--outline-variant: #c2c6d6;--tertiary: #006b2d;--tertiary-container: #00873b;--error: #ba1a1a;--error-container: #ffdad6;--on-error: #ffffff;--on-error-container: #93000a;--amber: #f59e0b;--amber-light: #fef3c7;--amber-dark: #92400e;--green-action: #22c55e;--red-action: #ef4444;--shadow-navy: rgba(19, 27, 46, .08);--font-headline: "Manrope", sans-serif;--font-body: "Inter", sans-serif;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);color:var(--on-surface);background:#f0f2f5;min-height:100vh;display:flex;justify-content:center;-webkit-font-smoothing:antialiased}#app{width:100%;max-width:480px;min-height:100vh;background:var(--surface);display:flex;flex-direction:column;position:relative;box-shadow:0 0 48px var(--shadow-navy)}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle}.icon-filled{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}.header{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1rem;height:4rem;padding:0 1.5rem;background:var(--surface)}.header__brand{font-family:var(--font-headline);font-weight:800;font-size:1.25rem;color:var(--on-surface)}.header__logo{height:1.75rem;width:auto;object-fit:contain}.header__back{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;background:transparent;color:var(--primary);border-radius:var(--radius-full);cursor:pointer;transition:background .15s}.header__back:active{background:var(--surface-container-low);transform:scale(.95)}.error-banner{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:var(--error);color:var(--on-error)}.error-banner__text{font-size:.875rem;font-weight:500;line-height:1.4}.logo-block{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-top:2rem}.logo-img{height:2.5rem;width:auto;object-fit:contain}.section{padding:0 1.5rem}.section--grow{flex:1}.headline-lg{font-family:var(--font-headline);font-weight:700;font-size:1.875rem;color:var(--on-surface);line-height:1.2}.headline-md{font-family:var(--font-headline);font-weight:700;font-size:1.75rem;color:var(--on-surface);line-height:1.2}.headline-sm{font-family:var(--font-headline);font-weight:700;font-size:1.125rem;color:var(--on-surface)}.body-lg{font-size:1rem;color:var(--on-surface-variant);line-height:1.6}.label-md{font-family:var(--font-body);font-size:.625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--outline)}.label-sm{font-family:var(--font-body);font-size:.75rem;color:var(--on-surface-variant)}.phone-group{display:flex;gap:.75rem}.phone-country{width:90px;height:56px;background:var(--surface-container-low);border:none;border-bottom:2px solid var(--outline-variant);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:space-between;padding:0 1rem;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--on-surface);transition:border-color .15s}.phone-country:focus-within{border-color:var(--primary)}.phone-input-wrap{flex:1;position:relative}.phone-prefix{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-weight:500;color:var(--outline-variant);pointer-events:none}.phone-input{width:100%;height:56px;background:var(--surface-container-low);border:none;border-bottom:2px solid var(--outline-variant);border-radius:var(--radius-lg);padding:0 1rem 0 4rem;font-family:var(--font-body);font-weight:600;font-size:1.125rem;color:var(--on-surface);outline:none;transition:border-color .15s}.phone-input::placeholder{color:var(--outline-variant);opacity:.5}.phone-input:focus{border-color:var(--primary)}.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:56px;border:none;font-family:var(--font-headline);font-weight:700;font-size:1.125rem;cursor:pointer;transition:transform .1s,background .15s}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--primary);color:var(--on-primary);border-radius:var(--radius-lg);box-shadow:0 8px 32px #0058be26}.btn--primary:hover:not(:disabled){background:var(--primary-container)}.btn--accept{background:var(--green-action);color:#fff;border-radius:var(--radius-full);box-shadow:0 8px 24px #22c55e33}.btn--accept:hover:not(:disabled){background:#16a34a}.btn--reject{background:transparent;color:var(--red-action);border:2px solid var(--red-action);border-radius:var(--radius-full)}.btn--reject:hover:not(:disabled){background:#ef44440d}.btn--confirm{background:var(--tertiary);color:var(--on-tertiary);border-radius:var(--radius-lg);box-shadow:0 4px 16px #006b2d26}.btn--confirm:hover:not(:disabled){background:var(--tertiary-container)}.tracking-card{background:var(--surface-container-lowest);border-radius:var(--radius-full);padding:1.5rem}.tracking-card__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.tracking-card__code{font-family:var(--font-headline);font-weight:700;font-size:1.125rem;color:var(--primary)}.tracking-card__divider{border:none;border-top:1px solid rgba(194,198,214,.15);margin:0}.tracking-card__summary{display:flex;align-items:center;gap:.75rem;padding-top:1rem}.tracking-card__icon{width:2.5rem;height:2.5rem;border-radius:var(--radius-full);background:var(--surface-container-high);display:flex;align-items:center;justify-content:center;color:var(--primary)}.status-pill{display:inline-flex;align-items:center;padding:.375rem 1rem;border-radius:var(--radius-full);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.status-pill--pickup{background:var(--surface-container);color:var(--on-surface-variant)}.status-pill--delivered{background:#006b2d1a;color:var(--tertiary)}.status-pill--pending{background:var(--amber-light);color:var(--amber-dark)}.progress{background:var(--surface-container-low);border-radius:var(--radius-lg);padding:1rem}.progress__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.progress__label{font-weight:500;font-size:.875rem;color:var(--on-surface)}.progress__pct{font-weight:700;font-size:.75rem;color:var(--primary)}.progress__track{width:100%;height:.5rem;background:var(--surface-container-high);border-radius:var(--radius-full);overflow:hidden}.progress__fill{height:100%;background:var(--primary);border-radius:var(--radius-full);transition:width .4s ease}.byte-card{position:relative;background:var(--surface-container-lowest);border-radius:var(--radius-lg);padding:1rem 1rem 1rem 1.25rem;overflow:hidden;cursor:pointer;transition:background .15s}.byte-card:active{transform:scale(.98)}.byte-card:hover{background:var(--surface-container-low)}.byte-card__accent{position:absolute;left:0;top:0;bottom:0;width:4px}.byte-card__accent--delivered{background:var(--tertiary)}.byte-card__accent--pending{background:var(--amber)}.byte-card__accent--primary{background:var(--primary)}.byte-card__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.25rem}.byte-card__name{font-family:var(--font-headline);font-weight:700;font-size:1rem;color:var(--on-surface)}.byte-card__phone{font-size:.875rem;color:var(--on-surface-variant);margin-bottom:.5rem}.byte-card__meta{display:flex;align-items:center;gap:.5rem;color:var(--outline);font-size:.75rem}.badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:var(--radius-full);font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.badge--delivered{background:#006b2d1a;color:var(--tertiary)}.badge--pending{background:var(--amber-light);color:var(--amber-dark)}.recipient{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.recipient__avatar{width:3rem;height:3rem;border-radius:var(--radius-full);background:var(--primary-container);display:flex;align-items:center;justify-content:center;color:var(--on-primary);flex-shrink:0}.recipient__name{font-family:var(--font-headline);font-weight:700;color:var(--on-surface)}.recipient__phone{font-size:.875rem;color:var(--on-surface-variant)}.items-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:1rem}.item-card{position:relative;background:var(--surface-container-lowest);border-radius:var(--radius-lg);padding:1rem 1rem 1rem 1.25rem;overflow:hidden}.item-card__row{display:flex;justify-content:space-between;align-items:flex-start}.item-card__product{font-weight:600;color:var(--on-surface)}.item-card__variant{font-size:.75rem;color:var(--on-surface-variant);margin-top:.25rem}.item-card__qty{font-size:.875rem;font-weight:500;margin-top:.25rem}.item-card__price{font-family:var(--font-headline);font-weight:700;color:var(--on-surface);white-space:nowrap}.verification{background:var(--surface-container-low);border-radius:var(--radius-2xl);padding:1.5rem;text-align:center}.verification__title{font-family:var(--font-headline);font-weight:700;font-size:1.125rem;margin-bottom:.5rem}.verification__desc{font-size:.875rem;color:var(--on-surface-variant);margin-bottom:1.5rem;padding:0 1rem;line-height:1.5}.pin-inputs{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.pin-input{width:3rem;height:3.5rem;background:var(--surface-container-lowest);border:none;border-bottom:2px solid var(--outline-variant);border-radius:var(--radius-md);text-align:center;font-family:var(--font-headline);font-weight:800;font-size:1.25rem;color:var(--primary);outline:none;transition:border-color .15s}.pin-input:focus{border-color:var(--primary)}.verification__note{margin-top:1rem;font-size:.75rem;color:var(--on-surface-variant);line-height:1.5}.delivered-stamp{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem;text-align:center}.delivered-stamp__icon{font-size:4rem;color:var(--tertiary)}.delivered-stamp__text{font-family:var(--font-headline);font-weight:700;font-size:1.25rem;color:var(--tertiary)}.center-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.5rem;text-align:center}.center-icon{position:relative;width:8rem;height:8rem;display:flex;align-items:center;justify-content:center;margin-bottom:2rem}.center-icon__circle{width:5rem;height:5rem;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center}.center-icon__circle--error{background:var(--error-container)}.center-icon__circle--success{background:#006b2d1a}.center-icon__circle--error .material-symbols-outlined{font-size:3rem;color:var(--error)}.center-icon__circle--success .material-symbols-outlined{font-size:5rem;color:var(--tertiary)}.center-screen__title{font-family:var(--font-headline);font-weight:700;font-size:1.75rem;color:var(--on-surface);margin-bottom:1rem;letter-spacing:-.01em}.center-screen__body{font-size:1rem;color:var(--on-surface-variant);line-height:1.6;max-width:280px}.fixed-bottom{position:fixed;bottom:0;width:100%;max-width:480px;padding:1.5rem;background:#faf8ffcc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:40;display:flex;flex-direction:column;gap:1rem}.spinner-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#faf8ffb3;display:flex;align-items:center;justify-content:center;z-index:100}.spinner{width:2.5rem;height:2.5rem;border:3px solid var(--surface-container-high);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.footer-label{text-align:center;padding:2rem 1.5rem;font-size:.625rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--outline)}.stack-sm>*+*{margin-top:.5rem}.stack-md>*+*{margin-top:1rem}.stack-lg>*+*{margin-top:1.5rem}.stack-xl>*+*{margin-top:2rem}.mt-auto{margin-top:auto}.mb-0{margin-bottom:0}.pt-md{padding-top:1rem}.pb-bottom-safe{padding-bottom:10rem}
