* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; height:100vh; display:flex; background: #f9fafb; }

/* LEFT – premium branding */
.left{
  width:40%;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px;
  background:
    radial-gradient(900px 500px at 15% 18%, rgba(34,197,94,0.18) 0%, rgba(34,197,94,0) 55%),
    radial-gradient(900px 600px at 85% 75%, rgba(59,130,246,0.14) 0%, rgba(59,130,246,0) 60%),
    linear-gradient(135deg, #0b1220 0%, #111827 45%, #0a1020 100%);
  position:relative;
  overflow:hidden;
}
.left::before{
  content:"";
  position:absolute;
  inset:-120px;
  background: repeating-linear-gradient(135deg,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      rgba(255,255,255,0) 1px,
      rgba(255,255,255,0) 12px);
  opacity:.25;
  transform: rotate(8deg);
  pointer-events:none;
}

.brand{ position:relative; width:min(520px, 100%); z-index:2; }
.brand-top{ display:flex; align-items:center; gap:14px; margin-bottom: 18px; }

.brand-mark{
  width:70px; height:70px; border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  position:relative;
  display:grid;
  place-items:center;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  overflow:hidden;
}

/* Ring animat VIZIBIL */
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.mark-ring{
  position:absolute;
  inset:-12px;
  border-radius: 24px;
  background: conic-gradient(
    from 0deg,
    rgba(34,197,94,1),
    rgba(34,197,94,0.35),
    rgba(34,197,94,0.08),
    rgba(34,197,94,0.0) 45%
  );
  filter: blur(10px);
  animation: spinSlow 6s linear infinite;
}

.mark-core{
  font-weight: 1000;
  font-size: 30px;
  letter-spacing: -1px;
  color: #d1fae5;
  position:relative;
  z-index:2;
  text-shadow: 0 18px 40px rgba(34,197,94,0.18);
}

.brand-meta{ display:flex; flex-direction:column; gap:6px; }
.brand-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 7px 10px; border-radius: 999px; width: fit-content;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.25);
  color: rgba(209,250,229,0.95);
  font-weight: 900;
  font-size: 12px;
}
.brand-sub{ color: rgba(255,255,255,0.78); font-size: 13px; }

.brand-title{ font-size: 80px; line-height: 1; letter-spacing: -4px; font-weight: 1000; margin: 10px 0 10px; }
.brand-title .t4{ color: rgba(255,255,255,0.95); text-shadow: 0 18px 50px rgba(0,0,0,0.4); }
.brand-title .ton{
  background: linear-gradient(90deg, #22c55e 0%, #a7f3d0 55%, #22c55e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 18px 45px rgba(34,197,94,0.22));
  animation: pulseGlow 4s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%   { filter: drop-shadow(0 18px 45px rgba(34,197,94,0.15)); }
  50%  { filter: drop-shadow(0 22px 60px rgba(34,197,94,0.35)); }
  100% { filter: drop-shadow(0 18px 45px rgba(34,197,94,0.15)); }
}

.brand-tagline{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top: 4px; color: rgba(255,255,255,0.85); }
.tag-strong{ font-weight: 1000; font-size: 20px; }
.tag-on{ font-weight: 1000; color:#22c55e; text-shadow: 0 16px 40px rgba(34,197,94,0.18); }
.tag-dot{ opacity:.6; }
.tag-mini{ font-size: 13px; opacity:.78; }

.brand-line{
  height: 1px; margin: 18px 0 14px;
  background: linear-gradient(90deg, rgba(34,197,94,0.0), rgba(34,197,94,0.55), rgba(255,255,255,0.18), rgba(34,197,94,0.0));
  opacity: .9;
}
.brand-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.foot-pill{
  display:inline-flex; padding: 8px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.86); font-weight: 800; font-size: 12px;
}
.foot-mini{ color: rgba(255,255,255,0.65); font-size: 12px; }

/* Install button */
.install-btn{
  margin-top:18px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,0.35);
  background:rgba(34,197,94,0.12);
  color:#d1fae5;
  font-weight:900;
  cursor:pointer;
  transition:.2s;
  width: fit-content;
}
.install-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 25px rgba(34,197,94,0.35); }

/* RIGHT */
.right { width:60%; display:flex; flex-direction: column; padding:60px; overflow-y: auto; }
.container { width: 100%; max-width: 700px; margin: auto; }

.search-box { display: flex; gap: 8px; background: white; padding: 6px; border-radius: 14px; border: 1px solid #e5e7eb; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05); margin-bottom: 10px; }
input { flex: 1; border: none; padding: 12px; font-size: 16px; outline: none; }
button { background: #22c55e; color: white; border: none; padding: 0 20px; border-radius: 12px; font-weight: 900; cursor: pointer; }

#status-msg { display:none; font-size:13px; padding:12px; border-radius:10px; margin-bottom:16px; border: 1px solid transparent; }
.msg-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.msg-info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

#results { display:none; }

.section{
  background:#fff;
  border-radius:16px;
  border:1px solid #e5e7eb;
  padding:18px;
  box-shadow:0 4px 6px rgba(0,0,0,0.02);
  margin-bottom:12px;
}
.section-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.section-title h3{ font-size:13px; letter-spacing:.6px; text-transform:uppercase; color:#6b7280; font-weight:900; }
.pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid #e5e7eb; font-size:12px; color:#111827; background:#f9fafb; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media (max-width: 620px){ .grid-2, .grid-3 { grid-template-columns:1fr; } }

.row{ border-top:1px solid #f3f4f6; padding-top:10px; margin-top:10px; }
.res-label{ font-size:11px; color:#9ca3af; text-transform:uppercase; font-weight:900; }
.res-value{ font-size:16px; color:#111827; font-weight:900; }
.muted{ font-size:13px; color:#6b7280; font-weight:500; }
.small{ font-size:12px; color:#6b7280; }

.badge{ display:inline-block; padding:4px 10px; border-radius:10px; font-size:12px; font-weight:900; }
.active{ background:#dcfce7; color:#166534; }
.inactive{ background:#fee2e2; color:#991b1b; }
.info{ background:#eef2ff; color:#3730a3; }
.warn{ background:#fffbeb; color:#92400e; }

.timeline{ display:flex; flex-direction:column; gap:8px; }
.t-item{ display:flex; gap:10px; padding:10px 12px; border:1px solid #eef2f7; border-radius:12px; background: linear-gradient(180deg,#fff 0%,#fbfdff 100%); }
.dot{ width:10px; height:10px; border-radius:999px; margin-top:4px; background:#22c55e; }
.dot.red{ background:#ef4444; }
.dot.amber{ background:#f59e0b; }
.dot.blue{ background:#3b82f6; }
.t-main{ flex:1; }
.t-title{ font-weight:900; color:#111827; font-size:13px; }
.t-date{ font-weight:900; color:#111827; font-size:13px; }
.t-sub{ font-size:12px; color:#6b7280; margin-top:2px; }

.btn-mini{
  border:1px solid #e5e7eb; background:#fff; color:#111827;
  padding:8px 10px; border-radius:10px; font-weight:900; cursor:pointer; font-size:12px;
}

.callout{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  font-size:12px;
  line-height:1.4;
  display:none;
}
.callout-bad{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.callout-warn{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
.callout-info{ background:#eff6ff; border-color:#bfdbfe; color:#1e40af; }

#debug{ background:#111827; padding:14px; border-radius:14px; margin-top:10px; }
pre{ color:#22c55e; font-size:11px; font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; white-space: pre-wrap; }

@media (max-width: 768px){
  body{ flex-direction:column; overflow:auto; height:auto; }
  .left{ width:100%; height:42vh; padding:28px; }
  .right{ width:100%; height:auto; padding:30px; }
  .brand-title{ font-size:60px; }
}

/* Respect pentru utilizatori care dezactivează animații */
@media (prefers-reduced-motion: reduce){
  .mark-ring, .brand-title .ton { animation: none; }
}