@font-face {
  font-family: "SuezArabic";
  src: url("/static/SuezArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SuezArabic";
  src: url("/static/SuezArabic-Bold.ttf") format("truetype");
  font-weight: 700 900;
  font-display: swap;
}
:root {
  --bg: #070d18; --panel: #0d1728; --panel2: #111e32; --line: #20304a;
  --text: #f3f7ff; --muted: #8391a8; --cyan: #24d7d1; --blue: #4a7cff;
  --violet: #8b6cff; --green: #36d399; --amber: #ffbf5b; --danger: #ff627d;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  font-family: "SuezArabic", Tahoma, Arial, sans-serif;
  background: radial-gradient(circle at 76% -15%, rgba(74,124,255,.13), transparent 30%), var(--bg);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.app-shell { display: grid; grid-template-columns: minmax(0, 1fr) 270px; min-height: 100vh; }
.sidebar {
  grid-column: 2;
  position: fixed; inset: 0 0 0 auto; z-index: 10; width: 270px;
  padding: 26px 18px 18px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0b1525 0%, #08111f 100%);
  border-left: 1px solid rgba(255,255,255,.06);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 25px; }
.brand-mark {
  display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px;
  background: linear-gradient(135deg, var(--cyan), var(--blue)); color: #06101a;
  font-weight: 900; font-size: 23px; box-shadow: 0 10px 30px rgba(36,215,209,.2);
}
.brand b { display: block; font-size: 22px; letter-spacing: 3px; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: 1.4px; }
.side-nav { display: flex; flex-direction: column; gap: 5px; overflow: auto; scrollbar-width: none; }
.side-nav::-webkit-scrollbar { display: none; }
.side-nav p { margin: 17px 14px 4px; color: #59677d; font-size: 10px; letter-spacing: 1px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 11px;
  color: #a9b6ca; font-size: 14px; transition: .2s;
}
.side-nav a span { width: 22px; text-align: center; color: #6f809a; font-size: 17px; }
.side-nav a:hover { background: #111f34; color: #fff; }
.side-nav a.active {
  color: #fff; border: 1px solid rgba(36,215,209,.18);
  background: linear-gradient(90deg, rgba(36,215,209,.16), rgba(74,124,255,.09));
}
.side-nav a.active span { color: var(--cyan); }
.admin-profile {
  display: grid; grid-template-columns: 38px 1fr 34px; gap: 10px; align-items: center;
  margin-top: auto; padding: 13px 10px 2px; border-top: 1px solid rgba(255,255,255,.06);
}
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #172641; color: var(--cyan); font-weight: 800; }
.admin-profile b, .admin-profile small { display: block; }
.admin-profile b { font-size: 12px; }
.admin-profile small { color: var(--muted); font-size: 10px; }
.admin-profile form { margin: 0; }
.logout { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: #142238; color: #91a0b7; cursor: pointer; }
.logout:hover { background: #3b1c2b; color: #ff8ca0; }
.workspace { grid-column: 1; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 5; height: 78px; padding: 0 34px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(7,13,24,.72); border-bottom: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(18px);
}
.topbar b, .topbar small { display: block; }
.topbar b { font-size: 16px; }
.topbar small { margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.live-dot { padding: 8px 12px; border: 1px solid var(--line); border-radius: 99px; background: rgba(13,23,40,.8); color: #a4b2c6; font-size: 11px; }
.live-dot i { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }.top-logout { display: none; }.top-logout button { padding: 7px 10px; background: rgba(255,98,125,.1); color: #ff9bad; }
.content { max-width: 1450px; margin: auto; padding: 34px; }
.hero-panel {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: 30px 34px; border: 1px solid rgba(74,124,255,.25); border-radius: 22px;
  background: linear-gradient(120deg, rgba(25,50,87,.85), rgba(12,26,47,.86)); box-shadow: var(--shadow);
}
.hero-panel::after { content: "S"; position: absolute; left: 6%; top: -67px; color: rgba(255,255,255,.025); font-size: 220px; font-weight: 900; transform: rotate(-8deg); }
.hero-panel h1 { margin: 8px 0 5px; font-size: 27px; }
.hero-panel p { margin: 0; color: #a9b6c8; font-size: 13px; }
.eyebrow { display: block; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: 1.8px; }
.primary-action, .login-button { position: relative; z-index: 1; padding: 12px 18px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--cyan), #41a9ff); color: #041018; font-weight: 800; cursor: pointer; box-shadow: 0 12px 28px rgba(36,215,209,.16); }
.primary-action span, .login-button span { margin-right: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0; }
.metric-card { position: relative; overflow: hidden; display: flex; align-items: center; gap: 17px; min-height: 132px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, var(--panel2), var(--panel)); box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.metric-card::after { content: ""; position: absolute; left: -32px; top: -30px; width: 80px; height: 80px; border-radius: 50%; opacity: .18; filter: blur(8px); }
.metric-card.cyan::after { background: var(--cyan); }.metric-card.violet::after { background: var(--violet); }.metric-card.amber::after { background: var(--amber); }.metric-card.green::after { background: var(--green); }
.metric-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #15253c; color: var(--cyan); font-size: 20px; }
.metric-card small, .metric-card strong, .metric-card em { display: block; }
.metric-card small { color: var(--muted); font-size: 11px; }.metric-card strong { margin-top: 4px; font-size: 30px; }.metric-card em { color: #607089; font-size: 10px; font-style: normal; }
.dashboard-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.surface, .card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(17,30,50,.92), rgba(12,22,38,.94)); box-shadow: 0 12px 32px rgba(0,0,0,.13); }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-heading h2, .card h2 { margin: 4px 0; font-size: 17px; }
.status-pill, .badge { display: inline-flex; padding: 6px 10px; border: 1px solid #2a3c58; border-radius: 99px; background: #14233a; color: #aec0d8; font-size: 10px; }
.status-pill.ok { color: #7ce9be; background: rgba(54,211,153,.08); border-color: rgba(54,211,153,.24); }
.status-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.055); font-size: 12px; }
.status-row:last-child { border-bottom: 0; }.status-row span { display: flex; align-items: center; gap: 10px; color: #bec9da; }
.service-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #172641; color: #7c9fff; font-size: 9px; font-style: normal; font-weight: 800; }.success-text { color: var(--green); }
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-grid a { display: grid; grid-template-columns: 35px 1fr; column-gap: 9px; padding: 13px; border: 1px solid rgba(255,255,255,.055); border-radius: 12px; background: #0c192b; transition: .2s; }
.quick-grid a:hover { transform: translateY(-2px); border-color: rgba(36,215,209,.32); }
.quick-grid a > span { grid-row: 1/3; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: #152641; color: var(--cyan); }
.quick-grid b { font-size: 11px; }.quick-grid small { color: var(--muted); font-size: 9px; }
h1 { margin: 0 0 8px; font-size: 25px; } h2 { font-size: 18px; }.muted { color: var(--muted); font-size: 12px; }
.grid, .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 13px; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; background: rgba(13,23,40,.82); font-size: 12px; }
th, td { padding: 14px 13px; border-bottom: 1px solid rgba(255,255,255,.055); text-align: right; white-space: nowrap; }
th { background: #0d192b; color: #7f91aa; font-size: 10px; letter-spacing: .3px; } tr:hover td { background: rgba(36,215,209,.025); }
form { margin: 0; } label { display: block; margin-bottom: 8px; color: #aebbd0; font-size: 11px; }
input, textarea, select { width: 100%; margin: 6px 0 9px; padding: 11px 12px; border: 1px solid #253751; border-radius: 10px; outline: 0; background: #091424; color: var(--text); transition: .2s; }
input:focus, textarea:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(36,215,209,.08); }
textarea { min-height: 90px; resize: vertical; } input[type=checkbox] { width: auto; margin-left: 6px; accent-color: var(--cyan); }
.ok, .no, button { padding: 9px 14px; border: 0; border-radius: 10px; cursor: pointer; }.ok { background: linear-gradient(135deg,#22bfae,#2c93d8); color: #031318; font-weight: 700; }.no { border: 1px solid rgba(255,98,125,.22); background: rgba(255,98,125,.13); color: #ff8ca0; }
.warning { border-color: rgba(255,191,91,.27); background: linear-gradient(145deg,rgba(60,43,19,.7),rgba(28,26,27,.8)); }.number { color: var(--cyan); font-size: 30px; font-weight: 800; }
.login-page { overflow-x: hidden; display: grid; place-items: center; padding: 30px; background: radial-gradient(circle at 15% 15%,rgba(36,215,209,.13),transparent 30%), radial-gradient(circle at 85% 80%,rgba(74,124,255,.17),transparent 33%), #060c16; }
.login-shell { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; width: min(980px,100%); min-height: 590px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 27px; background: rgba(10,19,33,.9); box-shadow: 0 40px 100px rgba(0,0,0,.55); }
.login-showcase { display: flex; flex-direction: column; justify-content: space-between; padding: 50px; border-left: 1px solid rgba(255,255,255,.07); background: linear-gradient(145deg,rgba(13,38,59,.84),rgba(11,22,39,.92)); }
.login-logo { font-size: 20px; font-weight: 900; letter-spacing: 4px; }.login-logo span { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: 9px; border-radius: 11px; background: var(--cyan); color: #061019; }
.login-showcase h1 { max-width: 420px; margin: 11px 0; font-size: 38px; line-height: 1.45; }.login-showcase p { max-width: 430px; color: #9eacc0; font-size: 13px; line-height: 2; }
.security-note { color: #8e9db3; font-size: 11px; }.security-note i { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.login-card { display: flex; flex-direction: column; justify-content: center; padding: 70px 48px; }.login-card h2 { margin: 0 0 4px; font-size: 25px; }.login-card > p { margin: 0 0 25px; color: var(--muted); font-size: 12px; }.login-card label { margin-top: 8px; }.login-button { width: 100%; margin-top: 10px; padding: 13px; }
.login-help { display: block; margin-top: 20px; color: #5f7088; font-size: 9px; text-align: center; }.alert-error { margin-bottom: 12px; padding: 11px 13px; border: 1px solid rgba(255,98,125,.2); border-radius: 10px; background: rgba(255,98,125,.1); color: #ff9bad; font-size: 11px; }.mobile-brand { display: none; }
.login-orb { position: fixed; border-radius: 50%; opacity: .16; filter: blur(80px); }.orb-one { top: -120px; right: -90px; width: 300px; height: 300px; background: var(--cyan); }.orb-two { bottom: -150px; left: -100px; width: 360px; height: 360px; background: var(--blue); }
@media (max-width:1100px) { .metric-grid { grid-template-columns: 1fr 1fr; }.dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width:780px) {
  .app-shell { display: block; }.sidebar { position: static; width: auto; height: auto; padding: 15px; }.brand { padding: 0 5px 13px; }.brand-mark { width: 36px; height: 36px; }.brand b { font-size: 18px; }
  .side-nav { flex-direction: row; overflow-x: auto; padding-bottom: 5px; }.side-nav p { display: none; }.side-nav a { min-width: max-content; padding: 9px 11px; }.admin-profile { display: none; }.workspace { min-width: 0; }.topbar { height: 64px; padding: 0 18px; }.top-logout { display: block; }.content { padding: 18px; }
  .hero-panel { display: block; padding: 22px; }.hero-panel h1 { font-size: 21px; }.hero-panel .primary-action { display: inline-block; margin-top: 18px; }.metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }.metric-card { min-height: 105px; padding: 14px; gap: 10px; }.metric-icon { width: 39px; height: 39px; }.metric-card strong { font-size: 23px; }.quick-grid { grid-template-columns: 1fr; }
  .login-shell { display: block; min-height: auto; max-width: 430px; }.login-showcase { display: none; }.login-card { padding: 42px 28px; }.mobile-brand { display: block; margin-bottom: 30px; color: var(--cyan); font-size: 11px; letter-spacing: 2px; }
}
@media (max-width:460px) { .metric-grid { grid-template-columns: 1fr; }.topbar .live-dot { display: none; }.content { padding: 14px; }.hero-panel h1 { font-size: 19px; }.login-page { padding: 15px; } }