:root{
  --ink:#000000; --gray-900:#111214; --gray-700:#3A3D42; --gray-500:#6B6F76;
  --gray-200:#E9EAEC; --gray-100:#F5F5F6; --bg:#FFFFFF;
  --green:#06A357; --green-soft:#E4F7EE; --amber:#FFC043; --red:#E11900;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body,#root{margin:0;height:100%;}
body{background:var(--gray-100);font-family:'Inter',sans-serif;color:var(--ink);}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;letter-spacing:-0.01em;}
button{font-family:inherit;}

.app-shell{max-width:460px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;position:relative;}

.auth-wrap{flex:1;display:flex;flex-direction:column;padding:28px 22px;}
.brand{display:flex;align-items:center;gap:8px;margin-bottom:34px;}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--ink);}
.brand span{font-family:'Space Grotesk';font-weight:700;font-size:16px;}
.auth-title{font-size:26px;font-weight:700;margin-bottom:6px;}
.auth-sub{color:var(--gray-500);font-size:14px;margin-bottom:26px;line-height:1.45;}

.role-card{display:flex;align-items:center;gap:14px;border:1px solid var(--gray-200);border-radius:16px;padding:16px;margin-bottom:12px;cursor:pointer;transition:.15s;background:none;width:100%;text-align:left;}
.role-card:active{background:var(--gray-100);}
.role-card .ic{width:44px;height:44px;border-radius:12px;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.role-card .t{font-weight:600;font-size:15px;}
.role-card .d{color:var(--gray-500);font-size:12.5px;margin-top:2px;}
.role-card .arrow{margin-left:auto;color:var(--gray-500);}

.field{margin-bottom:14px;}
.field label{display:block;font-size:11.5px;font-weight:600;color:var(--gray-700);margin-bottom:6px;letter-spacing:.02em;}
.field input, .field select{width:100%;border:1.5px solid var(--gray-200);border-radius:12px;padding:13px 14px;font-size:15px;font-family:'Inter';color:var(--ink);background:var(--bg);outline:none;}
.field input:focus, .field select:focus{border-color:var(--ink);}
.field-row{display:flex;gap:10px;}
.field-row .field{flex:1;}
.field-error{color:var(--red);font-size:11.5px;margin-top:5px;}

.primary-btn{width:100%;background:var(--ink);color:#fff;border:none;border-radius:14px;padding:15px;font-family:'Space Grotesk';font-weight:700;font-size:15px;cursor:pointer;margin-top:4px;}
.primary-btn:disabled{opacity:.35;cursor:not-allowed;}
.ghost-btn{width:100%;background:none;border:none;color:var(--gray-700);padding:13px;font-size:13.5px;font-weight:600;cursor:pointer;text-align:center;}
.link-text{color:var(--ink);text-decoration:underline;}

.back-row{display:flex;align-items:center;margin-bottom:18px;}
.back-btn{background:var(--gray-100);border:none;width:34px;height:34px;border-radius:10px;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;}

.otp-row{display:flex;gap:8px;margin:20px 0 6px;}
.otp-row input{width:52px;height:58px;text-align:center;font-size:22px;font-weight:700;border:1.5px solid var(--gray-200);border-radius:12px;font-family:'Space Grotesk';}
.otp-row input:focus{border-color:var(--ink);outline:none;}
.otp-hint{background:var(--green-soft);color:var(--green);font-size:12.5px;font-weight:600;padding:10px 12px;border-radius:10px;margin-bottom:16px;}

.topbar{padding:18px 20px 12px;position:sticky;top:0;background:var(--bg);z-index:20;border-bottom:1px solid var(--gray-200);}
.topbar .row{display:flex;justify-content:space-between;align-items:center;}
.topbar h2{font-size:17px;}
.topbar .sub{font-size:12px;color:var(--gray-500);margin-top:2px;}
.logout-btn{background:none;border:none;color:var(--gray-500);font-size:12px;font-weight:600;cursor:pointer;}

.stats-row{display:flex;gap:10px;padding:14px 20px 0;}
.stat-box{flex:1;background:var(--gray-100);border-radius:14px;padding:12px;}
.stat-box .n{font-family:'Space Grotesk';font-weight:700;font-size:16px;}
.stat-box .l{font-size:10px;color:var(--gray-500);margin-top:2px;text-transform:uppercase;letter-spacing:.04em;}

nav.tabs{display:flex;padding:14px 20px 0;gap:6px;}
nav.tabs button{flex:1;background:var(--gray-100);border:none;border-radius:100px;padding:9px 4px;font-size:12px;font-weight:600;color:var(--gray-700);cursor:pointer;position:relative;}
nav.tabs button.active{background:var(--ink);color:#fff;}
.tab-badge{position:absolute;top:-5px;right:2px;background:var(--red);color:#fff;font-size:9px;padding:1px 5px;border-radius:100px;}

main{flex:1;padding:16px 20px 40px;}
.section-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500);margin:18px 0 8px;}
.section-label:first-child{margin-top:0;}

.add-card{background:var(--gray-100);border-radius:18px;padding:16px;margin-bottom:6px;}
.photo-row{display:flex;gap:10px;margin-bottom:12px;}
.photo-box{width:58px;height:58px;border-radius:14px;background:#fff;border:1.5px dashed var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;cursor:pointer;overflow:hidden;}
.photo-box img{width:100%;height:100%;object-fit:cover;}
.photo-fields{flex:1;display:flex;flex-direction:column;gap:7px;}
.photo-fields input{border:1.5px solid var(--gray-200);border-radius:10px;padding:9px 11px;font-size:13.5px;background:#fff;}

.product-card{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:11px;margin-bottom:8px;}
.p-thumb{width:46px;height:46px;border-radius:12px;background:var(--gray-100);flex-shrink:0;overflow:hidden;}
.p-thumb img{width:100%;height:100%;object-fit:cover;}
.p-name{font-weight:600;font-size:14px;}
.p-meta{font-size:12px;color:var(--gray-500);margin-top:2px;}
.p-sold{margin-left:auto;text-align:right;}
.p-sold .n{font-family:'Space Grotesk';font-weight:700;font-size:15px;color:var(--green);}
.p-sold .l{font-size:8.5px;color:var(--gray-500);}
.del-btn{background:var(--gray-100);border:none;border-radius:8px;width:26px;height:26px;margin-left:6px;cursor:pointer;}

.empty{text-align:center;padding:44px 18px;color:var(--gray-500);}
.empty .e{font-size:28px;margin-bottom:10px;}
.empty p{font-size:12.5px;line-height:1.55;margin:0;}

.order-form{background:#fff;border:1px solid var(--gray-200);border-radius:18px;padding:15px;margin-bottom:16px;}
.log-btn{width:100%;background:var(--green);color:#fff;border:none;border-radius:12px;padding:13px;font-family:'Space Grotesk';font-weight:700;font-size:14px;cursor:pointer;margin-top:2px;}
.log-btn:disabled{opacity:.4;}

.order-card, .bd-card{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:13px;margin-bottom:9px;}
.order-top{display:flex;justify-content:space-between;align-items:flex-start;}
.order-item{font-weight:600;font-size:14px;}
.order-buyer{font-size:12px;color:var(--gray-500);margin-top:2px;}
.order-price{font-family:'Space Grotesk';font-weight:700;font-size:14px;}
.pill{display:inline-block;font-size:10px;font-weight:700;padding:4px 10px;border-radius:100px;margin-top:9px;letter-spacing:.03em;}
.pill-paid{background:var(--green-soft);color:var(--green);}
.pill-packed, .pill-packing{background:#FFF4DD;color:#B87400;}
.pill-shipped{background:#E9EFFF;color:#2A4CDB;}
.pill-delivered{background:var(--gray-100);color:var(--gray-700);}

.buyer-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:13px;margin-bottom:9px;cursor:pointer;width:100%;text-align:left;}
.buyer-avatar{width:40px;height:40px;border-radius:50%;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:15px;flex-shrink:0;}
.buyer-name{font-weight:600;font-size:14px;}
.buyer-meta{font-size:11.5px;color:var(--gray-500);margin-top:2px;}
.buyer-arrow{margin-left:auto;color:var(--gray-500);}
.buyer-flag{background:var(--amber);color:#000;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;margin-left:6px;}

.bdetail-name{font-size:19px;font-weight:700;font-family:'Space Grotesk';}
.bdetail-sub{font-size:12.5px;color:var(--gray-500);margin-top:2px;}

.pack-item-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--gray-200);border-radius:13px;padding:10px 12px;margin-bottom:7px;}
.chk{width:20px;height:20px;border-radius:6px;border:2px solid var(--gray-500);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;}
.chk.on{background:var(--ink);border-color:var(--ink);}
.pir-name{font-weight:600;font-size:13px;}
.pir-meta{font-size:11px;color:var(--gray-500);}

.pack-selected-btn{width:100%;background:var(--ink);color:#fff;border:none;border-radius:12px;padding:12px;font-family:'Space Grotesk';font-weight:700;font-size:13.5px;cursor:pointer;margin:6px 0 4px;}
.pack-selected-btn:disabled{opacity:.3;}

.package-card{border:1.5px solid var(--gray-200);border-radius:16px;padding:13px;margin-bottom:12px;background:#FBFBFB;}
.package-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;}
.package-head .t{font-weight:700;font-size:13px;font-family:'Space Grotesk';}
.pkg-item-row{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--gray-200);border-radius:10px;padding:8px 10px;margin-bottom:6px;}
.pkg-item-row .n{font-size:12.5px;font-weight:600;flex:1;}
.pkg-remove{background:var(--gray-100);border:none;border-radius:7px;width:22px;height:22px;font-size:11px;cursor:pointer;}
.add-chip-wrap{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;}
.add-chip{background:var(--gray-100);border:1px dashed var(--gray-500);border-radius:100px;padding:6px 11px;font-size:11.5px;font-weight:600;cursor:pointer;}
.ship-btn{width:100%;background:var(--green);color:#fff;border:none;border-radius:10px;padding:10px;font-size:12.5px;font-weight:700;cursor:pointer;margin-top:4px;}
.shipped-card{border:1px solid var(--gray-200);border-radius:14px;padding:11px 13px;margin-bottom:8px;background:#fff;}
.shipped-card .t{font-weight:600;font-size:13px;}
.shipped-card .items{font-size:11.5px;color:var(--gray-500);margin-top:3px;}

.track-steps{display:flex;justify-content:space-between;margin-top:12px;position:relative;}
.tstep{flex:1;text-align:center;position:relative;}
.tstep .d{width:10px;height:10px;border-radius:50%;background:var(--gray-200);margin:0 auto 5px;position:relative;z-index:2;}
.tstep.on .d{background:var(--green);}
.tstep .l{font-size:8.5px;color:var(--gray-500);font-weight:600;text-transform:uppercase;}
.tline{position:absolute;top:5px;left:-50%;width:100%;height:2px;background:var(--gray-200);z-index:1;}
.tstep.on .tline{background:var(--green);}
.confirm-btn{width:100%;margin-top:12px;background:var(--ink);color:#fff;border:none;border-radius:10px;padding:10px;font-size:12.5px;font-weight:700;cursor:pointer;}
.bd-items-list{font-size:12px;color:var(--gray-500);margin-top:3px;}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;padding:11px 20px;border-radius:100px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:60;white-space:nowrap;}
.toast.show{opacity:1;}
.center-spinner{flex:1;display:flex;align-items:center;justify-content:center;color:var(--gray-500);font-size:13px;}
::-webkit-scrollbar{display:none;}

.bd-delivery-line{font-size:11.5px;color:var(--gray-500);margin-top:6px;}
.pkg-address-line{font-size:11px;color:var(--gray-500);margin-bottom:8px;}
.edit-delivery-btn{width:100%;background:none;border:1px dashed var(--gray-500);color:var(--gray-700);border-radius:10px;padding:9px;font-size:12px;font-weight:600;cursor:pointer;margin-top:10px;}
.delivery-edit-form{margin-top:10px;background:var(--gray-100);border-radius:12px;padding:12px;}
.delivery-edit-form .field input{background:#fff;}
.delivery-edit-actions{display:flex;gap:8px;justify-content:flex-end;}

/* --- Added for the PHP rebuild: small extras not in the original SPA --- */
.hidden{display:none !important;}
a.role-card, a.buyer-card{ text-decoration:none; color:inherit; }
.field-error-box{background:#FDEDEC;color:var(--red);font-size:12px;font-weight:600;padding:9px 12px;border-radius:10px;margin-bottom:12px;}
.skeleton{background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 37%,var(--gray-100) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:12px;height:60px;margin-bottom:9px;}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}