:root { --ink:#17212e; --muted:#667085; --line:#e8edf3; --paper:#fff; --canvas:#f5f7fa; --navy:#0e2438; --teal:#0b786f; --teal-soft:#dff5f1; --coral:#bd3d3e; --amber:#9b6711; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:Tahoma, Arial, sans-serif; font-size:14px; }
a { color:var(--teal); text-decoration:none; }
.shell { min-height:100vh; display:grid; grid-template-columns:252px minmax(0,1fr); direction:ltr; }
.sidebar { direction:rtl; padding:26px 18px; background:var(--navy); color:#d7e2ec; display:flex; flex-direction:column; gap:32px; }
.brand { display:flex; direction:ltr; align-items:center; gap:11px; color:white; font-weight:700; letter-spacing:.2px; }
.brand-mark { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:#33a69c; color:#062137; font-weight:900; }
.brand small { display:block; direction:rtl; text-align:right; font-size:10px; font-weight:normal; opacity:.68; margin-top:3px; }
nav { display:grid; gap:5px; }
nav a { color:#b7c8d8; padding:11px 12px; border-radius:8px; transition:background .16s ease, color .16s ease; }
nav a:hover { background:rgba(255,255,255,.09); color:white; }
.sidebar-note { margin-top:auto; border-top:1px solid rgba(255,255,255,.12); padding:17px 5px 0; font-size:12px; line-height:1.8; color:#9bb1c1; }
.content { direction:rtl; max-width:1500px; width:100%; margin:0 auto; padding:30px 42px 60px; }
.topbar, .panel-heading, .page-actions, .hero { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.header-actions { display:flex; align-items:center; gap:8px; }.header-actions form { margin:0; }.logout { font:inherit; font-size:12px; border:0; background:transparent; cursor:pointer; color:var(--muted); }
.test-banner { background:#fff7ed; border:1px solid #fdba74; color:#9a3412; padding:12px 15px; border-radius:9px; margin-bottom:18px; font-size:13px; }
.language-switch { color:var(--ink); border:1px solid var(--line); background:#fff; border-radius:8px; padding:7px 10px; text-decoration:none; font-size:12px; white-space:nowrap; }
html[dir=ltr] .sidebar, html[dir=ltr] .content, html[dir=ltr] .brand small { direction:ltr; text-align:left; }
html[dir=ltr] .eyebrow { text-align:left; }
html[dir=ltr] table { text-align:left; }
.topbar { margin-bottom:28px; }.topbar h1 { font-size:22px; margin:0; }.eyebrow { color:#8492a6; font-size:10px; font-weight:bold; letter-spacing:1.3px; margin:0 0 6px; direction:ltr; text-align:right; }.health { border:1px solid var(--line); background:white; padding:8px 12px; border-radius:99px; font-size:12px; }
.hero { background:linear-gradient(115deg,#103049,#0f695f); color:#f8fcfc; padding:34px 36px; border-radius:14px; margin-bottom:20px; }.hero .eyebrow { color:#9fd5cd; }.hero h2 { margin:0 0 10px; font-size:27px; letter-spacing:-.5px; }.hero p:not(.eyebrow) { margin:0; color:#d1e6e4; max-width:650px; line-height:1.8; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:40px; border-radius:8px; padding:0 16px; border:1px solid transparent; cursor:pointer; font:inherit; }.button.primary { background:#2ac0b2; color:#062a32; font-weight:bold; }.button.primary:hover { background:#48d3c5; }.button.secondary { background:white; border-color:var(--line); color:var(--ink); }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }.metrics article { background:var(--paper); padding:20px; border:1px solid var(--line); border-radius:12px; }.metrics span { display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }.metrics strong { font-size:28px; }.danger-text { color:var(--coral); }
.panel { background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; }.panel-heading { padding:20px 22px; border-bottom:1px solid var(--line); }.panel-heading h3 { margin:0; font-size:16px; }.panel-heading a { font-size:12px; }.empty { padding:42px 25px; text-align:center; color:var(--muted); line-height:1.8; }
table { width:100%; border-collapse:collapse; text-align:right; } th { color:#7d8c9f; font-size:11px; font-weight:bold; letter-spacing:.5px; padding:13px 18px; background:#fafbfc; border-bottom:1px solid var(--line); } td { padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:top; } tr:last-child td { border-bottom:0; } td small { display:block; color:#8492a6; margin-top:4px; }.status { display:inline-block; border-radius:99px; padding:5px 8px; font-size:11px; font-weight:bold; }.status.succeeded { background:var(--teal-soft); color:#087066; }.status.failed { background:#fce7e7; color:var(--coral); }.status.running { background:#fdf1da; color:var(--amber); }.status.paused { background:#edf0f5; color:#667085; }.actions { display:flex; gap:10px; align-items:center; white-space:nowrap; }.actions form { margin:0; }.link-button { border:0; background:transparent; color:var(--teal); cursor:pointer; font:inherit; padding:0; }.path { max-width:250px; word-break:break-word; }.error-detail { color:var(--coral); line-height:1.5; }
.page-actions { margin-bottom:19px; }.page-actions p:not(.eyebrow) { color:var(--muted); margin:0; }.form-grid { display:grid; gap:18px; }.form-section { padding:24px; overflow:visible; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:19px; }.form-section .panel-heading { grid-column:1/-1; padding:0 0 17px; }.field { display:flex; flex-direction:column; gap:7px; }.field.full { grid-column:1/-1; }.field.two { grid-column:span 1; }.field label { font-weight:bold; font-size:12px; }.field input:not([type=checkbox]), .field textarea, .field select { background:#fff; color:var(--ink); border:1px solid #d5dee9; border-radius:7px; padding:10px 11px; font:inherit; outline:0; }.field textarea { resize:vertical; direction:ltr; text-align:left; font-family:Consolas, monospace; font-size:12px; line-height:1.6; }.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(11,120,111,.1); }.field small { color:var(--muted); font-size:11px; line-height:1.5; }.field span { color:var(--coral); font-size:11px; }.checkbox { flex-direction:row; align-items:center; padding-top:10px; }.checkbox input { width:16px; height:16px; accent-color:var(--teal); }.form-actions { display:flex; justify-content:flex-start; gap:10px; }
.alert { border-radius:9px; padding:12px 15px; margin-bottom:18px; line-height:1.6; }.alert.success { color:#075f57; background:#e1f7f3; }.alert.error { color:#993737; background:#feecec; }
.login-body { min-height:100vh; display:grid; place-items:center; background:radial-gradient(circle at 15% 20%,#d5f1ed 0,transparent 27%),#f3f6f9; }.login-card { width:min(420px,calc(100vw - 32px)); background:white; border:1px solid var(--line); border-radius:16px; padding:34px; box-shadow:0 18px 45px rgba(20,46,68,.1); }.login-brand { color:var(--navy); margin-bottom:32px; }.login-brand small { color:var(--muted); }.login-card h1 { margin:0 0 8px; font-size:23px; }.login-card > p { color:var(--muted); margin:0 0 26px; line-height:1.7; }.login-form { display:grid; gap:9px; }.login-form label { font-weight:bold; font-size:12px; }.login-form input { border:1px solid #d5dee9; border-radius:7px; padding:11px; font:inherit; outline:0; }.login-form input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(11,120,111,.1); }.login-form span, .login-form [class*=validation-summary] { color:var(--coral); font-size:12px; }.login-form .button { margin-top:10px; width:100%; }
@media (max-width: 820px) { .shell { grid-template-columns:1fr; }.sidebar { padding:15px 20px; flex-direction:row; align-items:center; }.sidebar nav { display:flex; margin-right:auto; }.sidebar-note { display:none; }.content { padding:24px 16px; }.hero, .topbar, .page-actions { align-items:flex-start; flex-direction:column; }.metrics { grid-template-columns:1fr; }.form-section { grid-template-columns:1fr; }.field.two { grid-column:auto; }.panel { overflow-x:auto; } table { min-width:730px; } }