/* style.css — FINAL (EXCELLENT logo, theme preserved) */
:root{
  --bg0:#0b1220;
  --bg1:#0f1a2d;
  --card:#0f1a2b;
  --stroke:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.62);

  --blue:#6bb6ff;
  --blue2:#3a86ff;
  --blue-glow:rgba(107,182,255,.55);

  --ok:#35d07f;
  --warn:#ffb84d;
  --bad:#ff5b5b;

  --shadow:0 22px 60px rgba(0,0,0,.48);
  --r:16px;
  --r2:22px;

  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1100px 600px at 75% 30%, rgba(107,182,255,.18), transparent 60%),
    radial-gradient(900px 520px at 30% 75%, rgba(53,208,127,.14), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.app{max-width:1200px;margin:0 auto;padding:18px}

/* =========================
   Topbar
========================= */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-radius:var(--r2);
  box-shadow:var(--shadow);
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
}

/* =========================
   LOGO — DECISION ENGINE MARK (EXCELLENT)
========================= */
.brand-badge{
  position:relative;
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;

  /* core plate */
  background:
    linear-gradient(180deg, #121c33, #0b1220),
    radial-gradient(18px 18px at 70% 25%, rgba(255,255,255,.18), transparent 60%);
  border:1px solid rgba(107,182,255,.55);

  /* depth */
  box-shadow:
    0 10px 26px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.06);

  font-weight:900;
  font-size:18px;
  letter-spacing:.5px;
  color:#ffffff;
}

/* vertical decision flow */
.brand-badge::before{
  content:"";
  position:absolute;
  top:7px;
  bottom:7px;
  right:12px;
  width:2px;
  border-radius:2px;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(107,182,255,.9),
      rgba(107,182,255,.9),
      transparent
    );
  opacity:.9;
}

/* decision node */
.brand-badge::after{
  content:"";
  position:absolute;
  right:8px;
  top:50%;
  width:9px;
  height:9px;
  margin-top:-4.5px;
  border-radius:50%;
  background:#6bb6ff;
  box-shadow:
    0 0 0 3px rgba(107,182,255,.18),
    0 0 16px rgba(107,182,255,.65);
}

/* subtle hover authority (no animation spam) */
.brand-badge:hover{
  box-shadow:
    0 12px 30px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* brand text */
.brand-name{
  font-weight:900;
  letter-spacing:.4px;
  font-size:18px;
}
.brand-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.topbar-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   Layout / Cards (unchanged)
========================= */
.grid{
  display:grid;
  grid-template-columns:1.25fr .85fr;
  gap:14px;
  margin-top:14px;
}
@media(max-width:980px){
  .grid{grid-template-columns:1fr}
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid var(--stroke);
  border-radius:var(--r2);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card-lg{min-height:380px}
.card-xl{grid-column:1/-1}

.card-h{
  padding:14px 16px;
  border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(0,0,0,.18), transparent);
}
.h-title{font-weight:900}
.h-sub{font-size:12px;color:var(--muted);margin-top:4px}

/* =========================
   Input / Buttons / Verdict / Stats / Table / Modal
   (UNCHANGED — preserved stability)
========================= */
/* ⬇⬇⬇ أبقيت كل ما بعد هذا مطابقًا لملفك بدون أي تعديل وظيفي ⬇⬇⬇ */

.textarea{width:100%;min-height:240px;padding:14px;border:0;outline:none;resize:vertical;font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.95);background:rgba(0,0,0,.18)}
.textarea::placeholder{color:rgba(255,255,255,.35)}
.hint{padding:0 16px 14px;font-size:12px;color:var(--muted)}

.btn{border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:rgba(255,255,255,.92);padding:10px 12px;border-radius:14px;font-weight:800;cursor:pointer}
.btn:hover{background:rgba(255,255,255,.09)}
.btn-primary{background:linear-gradient(180deg, rgba(107,182,255,.55), rgba(58,134,255,.22));border-color:rgba(107,182,255,.55)}
.btn-danger{background:linear-gradient(180deg, rgba(255,91,91,.45), rgba(255,91,91,.20));border-color:rgba(255,91,91,.45)}
.btn-ghost{background:rgba(255,255,255,.04)}
.btn-pill{border-radius:999px}

.verdict{margin:14px 16px 10px;border-radius:18px;padding:16px;border:1px solid var(--stroke);background:rgba(0,0,0,.16)}
.verdict-title{font-size:40px;letter-spacing:1.2px;font-weight:900}

.verdict-secure{box-shadow:0 0 0 1px rgba(53,208,127,.18) inset}
.verdict-warn{box-shadow:0 0 0 1px rgba(255,184,77,.22) inset}
.verdict-danger{box-shadow:0 0 0 1px rgba(255,91,91,.26) inset}

.hidden{display:none}