/* ═══ FuTech console — نظام تصميم عصري | هوية فيودكس: برتقالي #FF5700 + بنفسجي #3A2666 ═══ */
:root{
  --orange:#FF5700; --orange-2:#ff7a33; --purple:#3A2666; --purple-2:#5b3da3; --purple-3:#241640;
  --bg:#0c0a14; --bg-2:#0f0c1a; --panel:#15111f; --panel-2:#1b1630; --panel-3:#221b3a;
  --line:#2a2342; --line-2:#352c52;
  --txt:#f0eef8; --txt-2:#b7b0cf; --mut:#8b83a8; --mut-2:#665e85;
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171; --info:#60a5fa;
  --grad:linear-gradient(135deg,var(--orange),#b8430f 45%,var(--purple) 110%);
  --grad-soft:linear-gradient(135deg,rgba(255,87,0,.16),rgba(58,38,102,.16));
  --r:14px; --r-lg:20px; --r-sm:10px;
  --sh:0 8px 30px rgba(0,0,0,.35); --sh-lg:0 18px 50px rgba(0,0,0,.5);
  --ease:cubic-bezier(.22,.61,.36,1); --t:.18s var(--ease);
  --side-w:264px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--txt);font-size:15px;line-height:1.6;
  font-family:-apple-system,"SF Pro Text","Segoe UI",system-ui,"Tahoma",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,87,0,.3)}
.muted,.mut{color:var(--mut)} .err{color:var(--bad)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--purple-2)}

#app{min-height:100vh}
#app.loading{display:flex;align-items:center;justify-content:center;color:var(--mut)}
#app.ready{display:flex}

/* ── أيقونات SVG أوتلاين أحادية (لا إيموجي) ── */
.ic{width:20px;height:20px;flex:none;vertical-align:-4px}
.ic-sm{width:16px;height:16px;vertical-align:-3px}
.ic-lg{width:26px;height:26px}

/* ── الهوية ── */
.brand-mark{font-weight:800;font-size:30px;letter-spacing:-1px;line-height:1;
  background:linear-gradient(120deg,var(--orange),var(--orange-2) 40%,#caa6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand-mark span{-webkit-text-fill-color:var(--orange)}
.brand-mark.sm{font-size:23px}

/* ── شاشة الدخول ── */
.login-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:radial-gradient(900px 500px at 75% -15%,rgba(255,87,0,.22),transparent 60%),
             radial-gradient(700px 500px at 10% 110%,rgba(91,61,163,.25),transparent 60%),var(--bg)}
.login-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:var(--r-lg);padding:48px 42px;text-align:center;max-width:430px;width:90%;box-shadow:var(--sh-lg)}
.login-card .brand-mark{font-size:42px;margin-bottom:6px}
.tagline{color:var(--mut);margin:8px 0 30px;font-size:15px}
.btn-google{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#1a1a1a;font-weight:700;
  padding:13px 28px;border-radius:12px;transition:transform var(--t),box-shadow var(--t)}
.btn-google:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.45)}

/* ── التخطيط ── */
.side{width:var(--side-w);min-height:100vh;background:linear-gradient(180deg,var(--purple-3),var(--bg) 60%);
  border-inline-start:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-head{padding:22px 22px 6px;display:flex;align-items:center;gap:10px}
.side-head .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.side nav{flex:1;padding:12px;display:flex;flex-direction:column;gap:2px;overflow:auto}
.nav-cap{font-size:11px;color:var(--mut-2);font-weight:700;padding:14px 14px 6px;letter-spacing:.5px}
.side nav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:12px;color:var(--txt-2);
  font-weight:600;transition:background var(--t),color var(--t),transform var(--t);position:relative}
.side nav a:hover{background:rgba(255,255,255,.045);color:var(--txt)}
.side nav a.active{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(255,87,0,.25)}
.side nav a.active .ic{color:#fff}
.side nav a .cnt{margin-inline-start:auto;font-size:11px;background:rgba(0,0,0,.28);padding:1px 8px;border-radius:9px;font-weight:700}
.side-foot{padding:14px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.avatar{width:38px;height:38px;border-radius:11px;background:var(--grad);display:flex;align-items:center;
  justify-content:center;font-weight:800;color:#fff;flex:none}
.who{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.who b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role-chip{font-size:12px;color:var(--orange);font-weight:700}
.logout{margin-inline-start:auto;color:var(--mut);display:flex;transition:color var(--t)}
.logout:hover{color:var(--bad)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 32px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
  background:rgba(12,10,20,.8);backdrop-filter:blur(12px)}
.topbar .tt h1{font-size:20px;margin:0;font-weight:800;letter-spacing:-.3px}
.topbar .tt .sub{font-size:12.5px;color:var(--mut);margin-top:1px}
#topbar-actions{display:flex;gap:9px;align-items:center}
#view{padding:26px 32px;max-width:1200px;width:100%;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── البطاقات ── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin-bottom:24px}
.card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:var(--r);padding:17px 18px;transition:transform var(--t),border-color var(--t),box-shadow var(--t)}
.card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--sh)}
.card .k{color:var(--mut);font-size:12.5px;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.card .v{font-size:30px;font-weight:800;letter-spacing:-1px}
.card.accent{background:var(--grad);border:none;box-shadow:0 10px 30px rgba(255,87,0,.22)}
.card.accent .k{color:rgba(255,255,255,.9)} .card.accent .v{color:#fff}
.card.bad .v{color:var(--bad)} .card.ok .v{color:var(--ok)} .card.warn .v{color:var(--warn)}

/* ── الألواح ── */
.panel{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px;margin-bottom:18px;box-shadow:var(--sh)}
.panel h2{font-size:16px;margin:0 0 16px;display:flex;align-items:center;gap:9px;font-weight:800}
.panel h2 .ic{color:var(--orange)}
.pill{font-size:11px;font-weight:800;padding:3px 10px;border-radius:8px}
.pill.supreme{background:rgba(255,87,0,.18);color:var(--orange)}
.pill.cto{background:rgba(123,97,255,.2);color:#b8a9ff}

/* ── الجداول ── */
table{width:100%;border-collapse:collapse}
th,td{text-align:start;padding:11px 12px;border-bottom:1px solid var(--line);font-size:14px}
th{color:var(--mut);font-weight:700;font-size:11.5px;letter-spacing:.3px;text-transform:none}
tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t)}
.tbl-rows tr:hover td{background:rgba(255,255,255,.025)}
.clickable{cursor:pointer}

/* ── الوسوم/الشارات ── */
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:8px;font-size:12px;
  font-weight:700;background:var(--panel-3);color:var(--txt-2)}
.tag.s-intake{color:var(--mut);background:rgba(139,131,168,.12)}
.tag.s-ready{color:var(--ok);background:rgba(52,211,153,.12)}
.tag.s-building{color:var(--warn);background:rgba(251,191,36,.12)}
.tag.s-live{color:var(--orange);background:rgba(255,87,0,.14)}
.tag.s-draft{color:var(--mut);background:rgba(139,131,168,.12)}
.tag.s-review{color:var(--info);background:rgba(96,165,250,.12)}
.tag.s-approved{color:var(--ok);background:rgba(52,211,153,.12)}
.tag.s-rejected{color:var(--bad);background:rgba(248,113,113,.12)}
.tag.s-dispatched,.tag.s-diff-ready{color:#c4b5fd;background:rgba(123,97,255,.14)}
.tag.s-deployed{color:var(--orange);background:rgba(255,87,0,.14)}
.tag.h-ok{color:var(--ok);background:rgba(52,211,153,.12)}
.tag.h-down{color:var(--bad);background:rgba(248,113,113,.12)}
.tag.h-degraded{color:var(--warn);background:rgba(251,191,36,.12)}
.dotx{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

/* ── البروتوكولات ── */
.proto{border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;margin-bottom:11px;
  background:var(--panel-3);transition:border-color var(--t)}
.proto:hover{border-color:var(--line-2)}
.proto .code{font-weight:800;color:var(--orange);font-size:12px;letter-spacing:.5px}
.proto .ttl{font-weight:700;margin:3px 0;font-size:15px}
.proto .bd{color:var(--txt-2);font-size:13.5px}
.proto.off{opacity:.45}

/* ── الأزرار ── */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--grad);color:#fff;border:none;
  padding:9px 17px;border-radius:11px;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px;
  transition:transform var(--t),box-shadow var(--t),filter var(--t)}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,87,0,.25)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--txt)}
.btn.ghost:hover{background:rgba(255,255,255,.05);box-shadow:none;border-color:var(--purple-2)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:9px}
.btn.danger{background:rgba(248,113,113,.14);color:var(--bad)}
.btn.danger:hover{background:rgba(248,113,113,.22);box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ── الحقول ── */
input,select,textarea{background:var(--panel-3);border:1px solid var(--line);color:var(--txt);
  padding:10px 13px;border-radius:var(--r-sm);font-family:inherit;font-size:14px;width:100%;transition:border-color var(--t),box-shadow var(--t)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,87,0,.13)}
textarea{resize:vertical}
label{display:block;font-size:13px;color:var(--mut);margin:11px 0 5px;font-weight:600}

/* ── حالات فارغة/قريباً ── */
.empty{color:var(--mut);text-align:center;padding:44px 20px}
.empty .ic{width:40px;height:40px;color:var(--line-2);margin-bottom:10px}
.soon{display:inline-flex;align-items:center;gap:5px;background:rgba(255,87,0,.13);color:var(--orange);
  font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:9px;margin-inline-start:8px}

/* ── المودال ── */
.modal-bg{position:fixed;inset:0;background:rgba(6,4,12,.66);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:60;animation:fade .2s var(--ease)}
.modal{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:26px;width:min(580px,93vw);max-height:88vh;overflow:auto;box-shadow:var(--sh-lg);
  animation:pop .22s var(--ease)}
.modal.wide{width:min(960px,95vw)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal h2{margin:0 0 6px;font-size:18px}

/* ── التنبيهات (toast) ── */
#toasts{position:fixed;bottom:22px;inset-inline-start:22px;z-index:80;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line-2);
  border-inline-start:3px solid var(--info);border-radius:12px;padding:12px 16px;min-width:240px;max-width:380px;
  box-shadow:var(--sh-lg);animation:slidein .28s var(--ease);font-size:14px;font-weight:600}
.toast.ok{border-inline-start-color:var(--ok)} .toast.ok .ic{color:var(--ok)}
.toast.error{border-inline-start-color:var(--bad)} .toast.error .ic{color:var(--bad)}
.toast.info .ic{color:var(--info)}
.toast.out{animation:slideout .25s var(--ease) forwards}
@keyframes slidein{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes slideout{to{opacity:0;transform:translateX(-16px)}}

/* ── سكيليتون التحميل ── */
.sk{background:linear-gradient(90deg,var(--panel-2) 25%,var(--panel-3) 50%,var(--panel-2) 75%);
  background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:8px;height:14px;margin:8px 0}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.sk-card{height:96px;border-radius:var(--r)}
.sk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;margin-bottom:24px}

/* ── محرّر الأوامر (شبيه Cursor) ── */
.editor-grid{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
@media(max-width:900px){.editor-grid{grid-template-columns:1fr}}
.editor-main{background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.editor-toolbar{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--panel-2);flex-wrap:wrap}
.editor-toolbar select{width:auto;min-width:130px}
.cmd-area{width:100%;border:none;border-radius:0;background:#0d0a17;color:#eee;padding:18px 20px;
  font-family:"SF Mono","JetBrains Mono",ui-monospace,Menlo,monospace;font-size:14px;line-height:1.85;
  min-height:300px;resize:vertical;direction:rtl}
.cmd-area:focus{box-shadow:none;border:none}
.editor-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:var(--panel-2);flex-wrap:wrap}
.ctx-card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  border-radius:var(--r);padding:15px 16px;margin-bottom:13px}
.ctx-card h3{font-size:12.5px;color:var(--mut);margin:0 0 9px;font-weight:700;display:flex;align-items:center;gap:7px}
.ctx-card h3 .ic{color:var(--purple-2)}
.ctx-item{font-size:13px;color:var(--txt-2);padding:4px 0;display:flex;align-items:center;gap:7px}
.ctx-item .ic-sm{color:var(--mut)}
/* مقياس جودة الأمر */
.qbar{height:7px;border-radius:6px;background:var(--panel-3);overflow:hidden;margin:8px 0}
.qbar > i{display:block;height:100%;border-radius:6px;transition:width .3s var(--ease),background .3s}
.qhint{font-size:12.5px;color:var(--mut);display:flex;align-items:center;gap:6px;padding:3px 0}
.qhint.warn{color:var(--warn)} .qhint.ok{color:var(--ok)}
.tmpl-chip{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;background:var(--panel-3);
  border:1px solid var(--line);border-radius:9px;padding:5px 11px;cursor:pointer;transition:border-color var(--t),color var(--t)}
.tmpl-chip:hover{border-color:var(--orange);color:var(--orange)}

/* ── عرض diff (الموجة ٧) ── */
.diff{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:#0d0a17;border-radius:var(--r);
  padding:14px;overflow:auto;direction:ltr;text-align:left;line-height:1.7}
.diff .add{color:var(--ok);background:rgba(52,211,153,.08)}
.diff .del{color:var(--bad);background:rgba(248,113,113,.08)}
.diff .hk{color:var(--info)}

@media(max-width:760px){
  .side{position:fixed;z-index:50;transform:translateX(110%);transition:transform var(--t);box-shadow:var(--sh-lg)}
  .side.open{transform:none}
  #view{padding:18px}
  .editor-grid{grid-template-columns:1fr}
}