:root{--bg1:#eef4fc;--bg2:#e9eefc;--bg3:#f3ecfb;--surface:#fff;--surface-2:#f6f8fc;--border:#e4ebf3;--text:#16233a;--text-dim:#5f7085;--text-muted:#93a2b6;--accent:#2f6bed;--accent2:#5b4fd6;--accent-hover:#2256cf;--accent-light:#e8f0fe;--accent-glow:rgba(47,107,237,.18);--ok:#12a150;--soon:#e08600;--overdue:#e0443e;--radius:16px;--shadow:0 3px 12px rgba(22,35,58,.08);--shadow-lg:0 18px 38px rgba(22,35,58,.14)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;background:linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 50%,var(--bg3) 100%);background-attachment:fixed;color:var(--text);line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes growBar{from{width:0}}
@keyframes floatIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:14px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(22,35,58,.05)}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{font-size:20px;font-weight:800;display:flex;align-items:center;gap:11px;letter-spacing:-.4px}
.brand .logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 16px var(--accent-glow);animation:floatIcon 3s ease-in-out infinite}
.nav{display:flex;gap:4px;flex-wrap:wrap;background:var(--surface-2);padding:5px;border-radius:14px}
.nav a{padding:9px 15px;border-radius:10px;color:var(--text-dim);font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px;transition:all .2s}
.nav a i{font-size:18px}
.nav a:hover{color:var(--accent);background:#fff}
.nav a.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 4px 12px var(--accent-glow)}
.topbar-actions{display:flex;gap:9px;align-items:center}
.lang-btn{padding:9px 14px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.lang-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light);transform:translateY(-1px)}
.car-switcher{padding:9px 14px;border-radius:11px;background:linear-gradient(135deg,var(--accent-light),#f0eefe);border:1.5px solid #cfe0fb;color:var(--accent);font-weight:800;font-size:13px;max-width:200px}

.page{padding:34px 0 80px}
.page-title{font-size:27px;font-weight:800;margin-bottom:26px;display:flex;align-items:center;gap:14px;letter-spacing:-.5px;animation:fadeUp .4s ease both;padding:18px 24px;background:linear-gradient(120deg,#fff,var(--accent-light));border-radius:var(--radius);box-shadow:var(--shadow)}
.page-title .title-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 8px 18px var(--accent-glow)}

.odo-card{background:linear-gradient(120deg,#2f6bed,#5b4fd6);border-radius:var(--radius);padding:26px 28px;margin-bottom:24px;box-shadow:0 16px 34px rgba(47,107,237,.32);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;animation:fadeUp .5s ease both;position:relative;overflow:hidden}
.odo-card::after{content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.08)}
.odo-left{display:flex;align-items:center;gap:16px}
.odo-icon{width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.24);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px}
.odo-label{color:rgba(255,255,255,.88);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.odo-value{font-size:34px;font-weight:900;color:#fff;letter-spacing:-1px}
.odo-value small{font-size:15px;color:rgba(255,255,255,.85);font-weight:500}
.odo-updated{font-size:12px;color:rgba(255,255,255,.75);margin-top:4px}
.odo-form{display:flex;gap:9px;align-items:center}
.odo-form input{width:130px;padding:13px;border-radius:12px;border:none;background:rgba(255,255,255,.97);font-size:17px;font-weight:800;text-align:center;color:var(--text)}
.odo-form input:focus{outline:none;box-shadow:0 0 0 4px rgba(255,255,255,.4)}
.odo-form .btn{background:#fff;color:var(--accent);box-shadow:none}
.odo-form .btn:hover{background:#f0f5ff;transform:translateY(-1px)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s;animation:popIn .45s ease both}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:2px dashed var(--border)}
.card-title{font-size:17px;font-weight:800;display:flex;align-items:center;gap:11px}
.card-icon{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff}
.icon-oil{background:linear-gradient(135deg,#2f6bed,#5a8bff);box-shadow:0 6px 14px rgba(47,107,237,.42)}
.icon-filter{background:linear-gradient(135deg,#5b4fd6,#8b7ff0);box-shadow:0 6px 14px rgba(91,79,214,.42)}
.icon-battery{background:linear-gradient(135deg,#0e9c66,#3ec78e);box-shadow:0 6px 14px rgba(14,156,102,.42)}
.icon-tire{background:linear-gradient(135deg,#e08600,#f5a92e);box-shadow:0 6px 14px rgba(224,134,0,.42)}
.icon-blue{background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 14px var(--accent-glow)}

.card-row{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;font-size:14px;border-radius:11px;margin-bottom:7px;background:var(--surface-2);transition:background .2s}
.card-row:last-child{margin-bottom:0}
.card-row .label{display:flex;align-items:center;gap:9px;color:var(--text-dim);font-weight:600}
.card-row .label i{font-size:16px;width:26px;height:26px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--accent);box-shadow:0 1px 3px rgba(22,35,58,.1)}
.card-row .val{font-weight:800}
.card:has(.icon-oil) .card-row:hover{background:#e0edfe}
.card:has(.icon-oil) .card-row .val{color:#0c447c}
.card:has(.icon-filter) .card-row:hover{background:#e9e5fc}
.card:has(.icon-filter) .card-row .val{color:#3c3489}
.card:has(.icon-battery) .card-row:hover{background:#dbf3e9}
.card:has(.icon-battery) .card-row .val{color:#085041}
.card:has(.icon-tire) .card-row:hover{background:#fceedb}
.card:has(.icon-tire) .card-row .val{color:#854f0b}

.big-remaining{font-size:31px;font-weight:900;margin:10px 0 3px;letter-spacing:-.6px}
.big-remaining small{font-size:14px;color:var(--text-dim);font-weight:600}
.badge{padding:6px 15px;border-radius:22px;font-size:12px;font-weight:800;display:inline-flex;align-items:center;gap:6px;color:#fff}
.badge.ok{background:linear-gradient(135deg,#12a150,#22c369)}
.badge.soon{background:linear-gradient(135deg,#e08600,#f5a92e)}
.badge.overdue{background:linear-gradient(135deg,#e0443e,#f16a64)}
.progress{height:9px;background:rgba(0,0,0,.06);border-radius:12px;overflow:hidden;margin-top:14px}
.progress-bar{height:100%;border-radius:12px;animation:growBar 1s cubic-bezier(.2,.9,.3,1) both}
.progress-bar.ok{background:linear-gradient(90deg,#12a150,#22c369)}
.progress-bar.soon{background:linear-gradient(90deg,#e08600,#f5a92e)}
.progress-bar.overdue{background:linear-gradient(90deg,#e0443e,#f16a64)}
.text-ok{color:var(--ok)}.text-soon{color:var(--soon)}.text-overdue{color:var(--overdue)}

.card:has(.icon-oil){background:linear-gradient(160deg,#eef5ff,#dfeafe);border-color:#c5dcfb}
.card:has(.icon-oil) .card-title{color:#0c447c}
.card:has(.icon-oil) .big-remaining{color:#0c447c}
.card:has(.icon-filter){background:linear-gradient(160deg,#f3f0fe,#e7e2fc);border-color:#d6cff8}
.card:has(.icon-filter) .card-title{color:#3c3489}
.card:has(.icon-filter) .big-remaining{color:#3c3489}
.card:has(.icon-battery){background:linear-gradient(160deg,#e8f8f0,#d6f2e5);border-color:#b5e6d3}
.card:has(.icon-battery) .card-title{color:#085041}
.card:has(.icon-battery) .big-remaining{color:#085041}
.card:has(.icon-tire){background:linear-gradient(160deg,#fef3e2,#fce8cc);border-color:#f5d9ae}
.card:has(.icon-tire) .card-title{color:#854f0b}

.tires-card{grid-column:1/-1}
.tire-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.tire-box{background:rgba(255,255,255,.7);border:1px solid #f5d9ae;border-radius:14px;padding:16px;transition:all .2s}
.tire-box:hover{background:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(224,134,0,.15)}
.tire-box .tire-name{font-weight:800;font-size:14px;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center;color:#633806}
.tire-box .tire-detail{font-size:12px;color:#854f0b;display:flex;justify-content:space-between;padding:3px 0}

.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px;max-width:560px;box-shadow:var(--shadow);animation:fadeUp .45s ease both}
.form-group{margin-bottom:19px}
.form-group label{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-weight:700;font-size:14px}
.form-group label i{font-size:15px;width:28px;height:28px;border-radius:9px;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center}
.form-group input,.form-group select{width:100%;padding:13px 15px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface-2);font-size:15px;font-family:inherit;transition:all .2s}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 5px var(--accent-glow)}
.form-hint{font-size:12px;color:var(--text-muted);margin-top:6px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .2s;box-shadow:0 6px 16px var(--accent-glow)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px var(--accent-glow)}
.btn-block{width:100%}
.btn-sm{padding:9px 14px;font-size:13px;box-shadow:none}
.btn-danger{background:#fdeceb;color:var(--overdue);box-shadow:none}
.btn-danger:hover{background:#fbdcdb;transform:none}
.btn-secondary{background:var(--surface-2);border:1.5px solid var(--border);color:var(--text-dim);box-shadow:none}
.btn-secondary:hover{background:var(--accent-light);color:var(--accent);border-color:#cfe0fb;transform:translateY(-1px)}

.alert{padding:15px 19px;border-radius:14px;margin-bottom:22px;font-weight:700;display:flex;align-items:center;gap:10px;animation:popIn .35s ease both}
.alert-success{background:linear-gradient(120deg,#e3f6ec,#d5f2e5);color:var(--ok)}
.alert-error{background:linear-gradient(120deg,#fdeceb,#fcdedc);color:var(--overdue)}

.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);animation:fadeUp .45s ease both}
table{width:100%;border-collapse:collapse}
th,td{padding:15px 19px;text-align:start;font-size:14px}
th{background:linear-gradient(135deg,var(--accent-light),#f0eefe);font-weight:800;color:var(--accent);font-size:13px;text-transform:uppercase;letter-spacing:.3px}
tr{border-bottom:1px solid var(--border)}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--surface-2)}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:42px;width:100%;max-width:400px;box-shadow:var(--shadow-lg);animation:popIn .5s ease both}
.login-card .brand{justify-content:center;margin-bottom:26px;font-size:24px}

.footer{text-align:center;padding:28px;color:var(--text-muted);font-size:13px;border-top:1px solid var(--border)}
.section-title{font-size:19px;font-weight:800;margin:32px 0 16px;display:flex;align-items:center;gap:10px;padding-top:16px;border-top:2px dashed var(--border)}
.section-title i{font-size:21px;color:var(--accent)}

@media(max-width:600px){.odo-card{flex-direction:column;align-items:stretch}.odo-form{justify-content:center}.tire-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.odo-value{font-size:29px}.page-title{font-size:23px;padding:14px 18px}}
.add-car-panel{margin-top:8px}
.add-car-toggle{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;font-weight:800;font-size:16px;box-shadow:var(--shadow);transition:all .2s}
.add-car-toggle::-webkit-details-marker{display:none}
.add-car-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}
.add-car-toggle .chevron{margin-inline-start:auto;transition:transform .25s}
details[open] .add-car-toggle .chevron{transform:rotate(180deg)}
details[open] .add-car-toggle{border-color:var(--accent);background:var(--accent-light)}
.form-section-title{font-size:15px;font-weight:800;margin:22px 0 14px;display:flex;align-items:center;gap:8px;color:var(--accent)}
.form-section-title:first-of-type{margin-top:0}
.req{color:var(--overdue);margin-inline-start:2px}
input[type=file]{padding:10px;background:var(--surface-2);border:1.5px dashed var(--border);border-radius:12px;font-size:13px}