@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');
:root{--bg:#080d11;--panel:#132128;--line:#294049;--red:#df2b30;--white:#f6f8f9;--muted:#a8b8bf}*{box-sizing:border-box;min-width:0}html,body{width:100%;max-width:100%;margin:0;overflow-x:hidden;background:var(--bg)}body{min-height:100dvh;background:radial-gradient(circle at 50% 0,#183640,#080d11 52%);color:var(--white);font-family:Tajawal,Arial,sans-serif}button,input{font:inherit}#app{width:100%;max-width:520px;min-height:100dvh;margin:0 auto;padding:env(safe-area-inset-top) 12px calc(76px + env(safe-area-inset-bottom));overflow-x:hidden}.screen{width:100%;max-width:100%;animation:in .2s ease}@keyframes in{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}.splash{min-height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.car{display:block;object-fit:contain;flex:none}.car.hero{width:84px;height:84px}.car.logo{width:58px;height:58px;margin:6px auto 0}.car.small{width:23px;height:23px}.car.search-car{width:42px;height:42px;margin:auto}.car.credit-icon{width:37px;height:37px}.brand{font-size:1.75rem;font-weight:800;line-height:1.25;margin:10px 0 3px}.en{font-size:.7rem;letter-spacing:1.7px}.ribbon{width:132px;height:4px;margin:17px;border-radius:99px;background:linear-gradient(90deg,var(--red),#fff,var(--red))}.tag{margin:0 0 26px;color:#d4dde0}.button{display:block;width:100%;min-height:45px;padding:11px 14px;border:0;border-radius:12px;background:linear-gradient(135deg,#ef494d,var(--red));color:#fff;font-size:.98rem;font-weight:700;cursor:pointer}.button.alt{margin-top:8px;background:transparent;border:1px solid #526872}.top{position:relative;display:flex;align-items:center;justify-content:center;min-height:43px;padding:5px 42px 5px 118px;overflow:hidden}.top h2{max-width:100%;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.12rem;text-align:center}.back{position:absolute;right:0;top:2px;width:38px;height:38px;padding:0;border:0;background:transparent;color:#fff;font:400 2.2rem/1 Arial;cursor:pointer}.top-space{position:absolute;right:0;width:38px}.mini{position:absolute;left:0;top:8px;display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:.67rem;font-weight:800;line-height:1.2}.card{width:100%;max-width:100%;margin:9px 0;padding:13px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(135deg,#17282f,#0f181d);box-shadow:0 7px 18px #0002}.center{text-align:center}.muted{color:var(--muted);line-height:1.55}.input{display:block;width:100%;max-width:100%;height:46px;margin:8px 0;padding:11px 13px;border:1px solid #e6ecee;border-radius:11px;background:#f6f7f8;color:#0d161a;direction:ltr;text-align:left;font:700 1rem Arial}.nav{position:fixed;z-index:3;bottom:0;left:50%;width:100%;max-width:520px;transform:translateX(-50%);display:flex;justify-content:space-around;padding:7px 16px calc(7px + env(safe-area-inset-bottom));border-top:1px solid #25363d;background:#0b1317f2;backdrop-filter:blur(10px)}.nav button{display:flex;align-items:center;gap:2px;min-width:0;padding:0;border:0;background:transparent;color:var(--muted);font-size:.72rem}.nav button.active{color:#ff5558}.ico{font-size:1.15rem}.plate{width:100%;max-width:100%;padding:8px;overflow:hidden;border:2px solid #aeb9bd;border-radius:9px;background:#f5f7f7;color:#101417;direction:ltr;text-align:center;unicode-bidi:plaintext;font:bold 1.18rem Arial;white-space:nowrap}.plate i{margin:0 7px;color:var(--red);font-style:normal}.row{display:flex;justify-content:space-between;gap:10px;padding:6px 0}.row b{overflow-wrap:anywhere}.label{color:var(--muted)}.detail{width:100%;max-width:100%;margin:10px 0;padding:12px;border-radius:14px;background:#f5f7f7;color:#172025}.detail h3{margin:0 0 4px;font-size:1.02rem}.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #d7e0e2}.kv b{overflow-wrap:anywhere}.kv:last-child{border:0}.ltr{direction:ltr;unicode-bidi:plaintext;text-align:left}.history{display:flex;align-items:center;justify-content:space-between;gap:8px}.small{font-size:.8rem}.notice{margin:8px 0;padding:9px;border-radius:10px;background:#61242a;color:#ffe6e6}.install{margin:10px 0;padding:10px;border:1px solid #2b4a54;border-radius:12px;color:#dce6e9;font-size:.8rem}.empty{padding:28px 8px;color:var(--muted);text-align:center}.login-screen{padding-top:1vh}.credit-bar,.credit-card{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;max-width:100%;margin:2px 0 11px;padding:9px 11px;border:1px solid #3a5059;border-radius:12px;background:#111d22}.credit-bar b,.credit-card b{color:#fff}.credit-bar button{flex:none;padding:6px 8px;border:1px solid #d84a4e;border-radius:8px;background:transparent;color:#fff;font-size:.76rem;font-weight:700}.credit-card{justify-content:flex-start}.credit-card div{display:flex;flex-direction:column;gap:1px}.credit-card span{color:var(--muted);font-size:.8rem}.packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pack{position:relative;display:flex;min-width:0;min-height:126px;flex-direction:column;justify-content:center;gap:5px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:#121e23;text-align:center}.pack strong{color:#fff;font:800 1.25rem Arial}.pack b{font-size:.82rem}.pack .button{min-height:38px;margin-top:3px;padding:8px;font-size:.78rem}.pack.best{border-color:#e24448;background:linear-gradient(145deg,#382025,#161d21);box-shadow:0 6px 16px #df2b3022}.pack.best:last-child{grid-column:1/-1;min-height:108px}.badge{position:absolute;top:-9px;right:50%;transform:translateX(50%);padding:3px 12px;border-radius:99px;background:var(--red);color:#fff;font-size:.7rem;font-weight:700;white-space:nowrap}.logout-home{display:block;margin:12px auto 0;padding:0;border:0;background:transparent;color:#d3dde0;font-size:.86rem;text-decoration:underline}.history-open{width:auto!important;min-height:36px!important;margin:0!important;padding:7px 10px!important}@media(max-width:359px){#app{padding-left:9px;padding-right:9px}.top{padding-left:104px}.mini{font-size:.61rem}.top h2{font-size:1.04rem}.brand{font-size:1.6rem}}@media(min-width:430px){#app{padding-left:16px;padding-right:16px}.card{padding:14px}}
