:root{--radius:.75rem;--ios-blue:#007aff;--ios-green:#34c759;--ios-orange:#ff9500;--ios-red:#ff3b30;--ios-purple:#af52de;--ios-teal:#5ac8fa;--safe-bottom:env(safe-area-inset-bottom,0px)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,sans-serif;background:#f5f5f7;color:#1c1c1e;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.font-arabic{font-family:'IBM Plex Sans Arabic',-apple-system,BlinkMacSystemFont,sans-serif}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c7c7cc;border-radius:100px}
@keyframes iosFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes iosSlideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes iosScaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes springBounce{0%{transform:scale(0)}50%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 20px rgba(37,99,235,.3)}50%{box-shadow:0 0 40px rgba(37,99,235,.6)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}
@keyframes blobFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,20px) scale(1.1)}}
@keyframes blobFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-20px,-30px) scale(1.15)}}
@keyframes blobFloat3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(15px,25px) scale(1.05)}}
@keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes progressGrow{from{width:0}to{width:var(--target-width)}}
.animate-fade-in{animation:iosFadeIn .4s cubic-bezier(.25,.46,.45,.94)}
.animate-slide-up{animation:iosSlideUp .4s cubic-bezier(.25,.46,.45,.94)}
.animate-scale-in{animation:iosScaleIn .3s cubic-bezier(.25,.46,.45,.94)}
.animate-spring{animation:springBounce .6s cubic-bezier(.25,.46,.45,.94)}
.animate-glow{animation:glowPulse 3s ease-in-out infinite}
.animate-float{animation:float 6s ease-in-out infinite}
.animate-shake{animation:shake .5s ease-in-out}
.blob-1{animation:blobFloat1 8s ease-in-out infinite}
.blob-2{animation:blobFloat2 10s ease-in-out infinite}
.blob-3{animation:blobFloat3 12s ease-in-out infinite}
.glass{background:rgba(255,255,255,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3)}
.glass-dark{background:rgba(255,255,255,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15)}
.ios-tab-bar{background:rgba(249,249,249,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:.5px solid rgba(0,0,0,.08);padding:6px 0;padding-bottom:calc(6px + var(--safe-bottom));position:sticky;bottom:0;z-index:40}
input[type="password"]::placeholder{letter-spacing:6px}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}
.gm-map-container{width:100%;height:100%;border-radius:16px;overflow:hidden;position:relative}
.gm-map-container .gm-style{border-radius:16px}
.gm-custom-marker{width:28px;height:28px;border-radius:50%;border:3px solid white;box-shadow:0 2px 8px rgba(37,99,235,0.4);background:#2563eb}
.gm-custom-marker-sm{width:24px;height:24px;border-radius:50%;border:2px solid white;box-shadow:0 2px 6px rgba(0,0,0,0.3)}
.gm-popup{background:white;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.15);padding:12px 16px;font-family:'IBM Plex Sans Arabic',sans-serif;max-width:250px;position:relative}
.gm-popup::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}
.dialog-overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;animation:iosFadeIn .2s ease-out}
.dialog-content{background:#fff;border-radius:1.5rem;max-width:28rem;width:calc(100% - 2rem);max-height:85vh;overflow:hidden;animation:iosScaleIn .2s ease-out;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.select-dropdown{position:absolute;top:100%;right:0;min-width:100%;background:#fff;border:1px solid rgba(60,60,67,.08);border-radius:.75rem;box-shadow:0 10px 40px rgba(0,0,0,.12);z-index:50;max-height:200px;overflow-y:auto;margin-top:4px;animation:iosSlideUp .2s ease-out}
.select-item{padding:8px 12px;cursor:pointer;font-size:14px;transition:background .15s}
.select-item:hover{background:#f0f0f5}
.select-item.selected{background:#eff6ff;color:#2563eb;font-weight:600}
.z-breathe{animation:breathe 2.5s ease-in-out infinite}
.bc{display:flex;align-items:flex-end;gap:6px;height:160px;padding:0 4px}
.bco{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.bv{font-size:10px;color:#8e8e93;font-weight:600}
.bw{width:100%;background:rgba(37,99,235,.06);border-radius:8px 8px 4px 4px;position:relative;overflow:hidden;height:100%}
.bf{position:absolute;bottom:0;width:100%;border-radius:8px 8px 4px 4px;transition:height .6s cubic-bezier(.25,.46,.45,.94)}
.bl{font-size:11px;color:#aeaeb2;font-weight:500}

/* Offline Banner */
.offline-banner{position:fixed;top:0;left:0;right:0;z-index:100;padding:8px 16px;text-align:center;font-size:13px;font-weight:600;animation:iosSlideUp .3s ease-out}
.offline-banner.offline{background:#ff9500;color:white}
.offline-banner.syncing{background:#34c759;color:white}
.offline-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:#ff3b30;color:white;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid white}