|
|
|
|
|
|
|
|
|
|
|
:root{ |
|
|
|
|
|
--ink: #eaf0ff; |
|
|
--muted: #b7c3e0; |
|
|
|
|
|
|
|
|
--primary: #7aa5ff; |
|
|
--primary-2: #59e0ff; |
|
|
--ok: #3ed197; |
|
|
--danger: #ef7777; |
|
|
|
|
|
|
|
|
--stroke: rgba(255,255,255,.18); |
|
|
--soft-shadow: 0 12px 30px rgba(8, 20, 60, .25); |
|
|
--card-shadow: 0 20px 60px rgba(4, 12, 46, .35); |
|
|
|
|
|
|
|
|
--card: rgba(11, 20, 52, .92); |
|
|
--card2: #0d1426; |
|
|
|
|
|
--radius: 16px; |
|
|
} |
|
|
|
|
|
*{box-sizing:border-box} |
|
|
html,body{ |
|
|
margin:0;padding:0; |
|
|
background: |
|
|
radial-gradient(1000px 700px at 50% -220px, #1a2562 0%, transparent 60%), |
|
|
linear-gradient(160deg, #0e1326 0%, #111a3a 100%); |
|
|
color: var(--ink); |
|
|
font-family: "Tajawal","Cairo",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Noto Naskh Arabic",Tahoma,Arial,sans-serif; |
|
|
} |
|
|
.center{text-align:center} |
|
|
h1,h2{margin:0 0 12px 0} |
|
|
h1{font-weight:800;letter-spacing:.2px;font-size:26px} |
|
|
h2{font-weight:700;font-size:18px} |
|
|
.muted{color:var(--muted)} |
|
|
|
|
|
.topbar{ |
|
|
position:sticky;top:0;padding:14px; |
|
|
background:rgba(14,19,38,.55); |
|
|
border-bottom:1px solid var(--stroke); |
|
|
backdrop-filter:saturate(180%) blur(10px) |
|
|
} |
|
|
|
|
|
.container{ |
|
|
max-width:1150px;margin:22px auto;padding:0 14px; |
|
|
display:flex;flex-direction:column;gap:14px;align-items:center |
|
|
} |
|
|
|
|
|
.card{ |
|
|
width:100%; |
|
|
background: var(--card); |
|
|
border:1px solid var(--stroke); |
|
|
border-radius: var(--radius); |
|
|
padding:16px; |
|
|
box-shadow: var(--card-shadow); |
|
|
} |
|
|
|
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;width:100%} |
|
|
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px;width:100%} |
|
|
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px;width:100%} |
|
|
@media (max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} } |
|
|
|
|
|
label{display:block;margin-bottom:6px;font-size:13px;color:var(--muted);font-weight:700} |
|
|
select,input{ |
|
|
width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--stroke);background:#0b1434;color:var(--ink); |
|
|
transition:border-color .2s ease, box-shadow .2s ease |
|
|
} |
|
|
select:focus,input:focus{outline:none;border-color:#2a3b7a;box-shadow:0 0 0 3px rgba(122,165,255,.18)} |
|
|
|
|
|
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} |
|
|
button{ |
|
|
padding:10px 14px;border-radius:12px;border:1px solid var(--stroke);background:#0f1a2e;color:var(--ink);cursor:pointer; |
|
|
transition:transform .1s ease, box-shadow .15s ease, background .15s ease |
|
|
} |
|
|
button:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(0,0,0,.20)} |
|
|
button.primary{ |
|
|
background: linear-gradient(90deg, var(--primary), var(--primary-2)); |
|
|
border-color: transparent; |
|
|
color: #0d142a; |
|
|
font-weight:800; |
|
|
} |
|
|
button.secondary{background:#0f1a2e} |
|
|
button:disabled{opacity:.6;cursor:not-allowed} |
|
|
|
|
|
.flex-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap} |
|
|
|
|
|
.upload-wrap{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} |
|
|
.drop-area{ |
|
|
border:2px dashed #2a3b7a;border-radius:14px;padding:18px;text-align:center;cursor:pointer;outline:none;min-width:280px; |
|
|
transition:border-color .2s ease, transform .12s ease |
|
|
} |
|
|
.drop-area:hover,.drop-area:focus{border-color:var(--primary);transform:translateY(-1px)} |
|
|
.drop-inner .icon{font-size:28px;margin-bottom:6px} |
|
|
.drop-inner .title{font-weight:800;margin-bottom:4px} |
|
|
.drop-inner .hint{color:var(--muted);font-size:13px} |
|
|
|
|
|
|
|
|
.inspector-card{ |
|
|
border:1px solid var(--stroke);border-radius:14px;padding:14px; |
|
|
background:var(--card); |
|
|
box-shadow: var(--soft-shadow); |
|
|
transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease |
|
|
} |
|
|
.inspector-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.25); } |
|
|
.inspector-card h3{margin:0 0 10px 0;font-size:16px;color:#eaf2ff;font-weight:800} |
|
|
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 4px} |
|
|
.kpi{ |
|
|
flex:1 1 110px; min-width:110px; |
|
|
background: var(--card2); |
|
|
border: 1px solid #223055; |
|
|
border-radius:12px; |
|
|
padding:10px 12px; text-align:center |
|
|
} |
|
|
.kpi .label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:700} |
|
|
.kpi .value{font-size:18px;font-weight:800;letter-spacing:.3px} |
|
|
.kpi .value.ok{color:var(--ok)} |
|
|
|
|
|
.inspector-card footer{display:flex;gap:10px;justify-content:flex-end} |
|
|
|
|
|
.footer{padding:18px;text-align:center;border-top:1px solid var(--stroke)} |
|
|
|
|
|
|
|
|
.lock-overlay{ |
|
|
position:fixed;inset:0; |
|
|
background: linear-gradient(160deg, #0e1326, #111a3a); |
|
|
display:none;align-items:center;justify-content:center;z-index:9999; |
|
|
pointer-events:auto; |
|
|
} |
|
|
.lock-overlay.show{display:flex} |
|
|
.lock-card{ |
|
|
width:min(420px,92%);background:var(--card);border:1px solid var(--stroke); |
|
|
border-radius:16px;padding:18px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35) |
|
|
} |
|
|
.lock-card input{margin-top:10px} |
|
|
.lock-card .err{color:#ff6b6b;margin-top:8px;font-size:13px} |
|
|
|
|
|
|
|
|
.toast{ |
|
|
position:fixed;inset-inline-start:50%;transform:translateX(-50%);bottom:18px; |
|
|
background:rgba(20,24,38,.92);border:1px solid #27304b;border-radius:10px; |
|
|
padding:8px 12px;font-size:13px;color:var(--ink);display:none;z-index:50 |
|
|
} |
|
|
|
|
|
|
|
|
h2{ |
|
|
background: linear-gradient(90deg, var(--primary), var(--primary-2)); |
|
|
-webkit-background-clip: text; background-clip: text; color: transparent; |
|
|
} |
|
|
|
