/* LensInsight App Workspace v2
   ID-Wujud-Kelakuan: WUJUD layer.
   Premium Dark Workspace · 70-20-10 visual focus · commercial SaaS base. */
:root {
  --app-bg: #090D16;
  --app-bg-2: #0D1321;
  --app-surface: #0F1626;
  --app-panel: #111A2E;
  --app-panel-2: #151F35;
  --app-border: #1E293B;
  --app-border-soft: rgba(148, 163, 184, .16);
  --app-text: #E2E8F0;
  --app-heading: #F8FAFC;
  --app-muted: #94A3B8;
  --app-soft: #CBD5E1;
  --app-info: #38BDF8;
  --app-success: #22C55E;
  --app-warning: #F59E0B;
  --app-danger: #EF4444;
  --app-critical: #DC2626;
  --app-purple: #A78BFA;
  --app-radius-sm: 10px;
  --app-radius-md: 16px;
  --app-radius-lg: 24px;
  --app-shadow: 0 24px 80px rgba(0,0,0,.38);
  --app-topbar: 64px;
  --app-sidebar: 340px;
  --app-gap: 18px;
  --app-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body.insight-app-page {
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--app-font);
  overflow: hidden;
}
#insight-app-viewport {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100vh;
  background:
    radial-gradient(circle at 18% -10%, rgba(56, 189, 248, .16), transparent 32rem),
    radial-gradient(circle at 90% 12%, rgba(167, 139, 250, .14), transparent 28rem),
    var(--app-bg);
  color: var(--app-text);
}
#insight-app-anomaly-bar {
  min-height: var(--app-topbar);
  background: rgba(15, 22, 38, .92);
  border-bottom: 1px solid var(--app-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  backdrop-filter: blur(18px);
  z-index: 20;
}
#insight-app-anomaly-bar[data-alert="HIGH"],
#insight-app-anomaly-bar[data-alert="CRITICAL"] {
  background: linear-gradient(90deg, rgba(127,29,29,.92), rgba(15,22,38,.94));
  border-color: rgba(239, 68, 68, .38);
}
#insight-app-status-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
#status-label-pulse {
  width: 13px; height: 13px; border-radius: 50%; background: var(--app-success);
  box-shadow: 0 0 0 8px rgba(34,197,94,.12), 0 0 28px rgba(34,197,94,.58);
  flex: 0 0 auto;
}
#insight-app-anomaly-bar[data-alert="HIGH"] #status-label-pulse,
#insight-app-anomaly-bar[data-alert="CRITICAL"] #status-label-pulse {
  background: var(--app-danger);
  box-shadow: 0 0 0 8px rgba(239,68,68,.14), 0 0 30px rgba(239,68,68,.74);
  animation: insightPulse 1.1s infinite;
}
@keyframes insightPulse { 50% { transform: scale(1.28); opacity: .72; } }
#status-text-display { font-weight: 800; color: var(--app-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insight-app-status-meta { display:flex; gap:10px; align-items:center; flex-wrap: wrap; justify-content:flex-end; }
.insight-app-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 11px;
  border: 1px solid var(--app-border-soft); border-radius: 999px; background: rgba(255,255,255,.04);
  color: var(--app-soft); font-size: .86rem; font-weight: 750;
}
.insight-app-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--app-sidebar); flex: 1; min-height: 0; overflow: hidden; }
#insight-app-workspace { min-width: 0; overflow: auto; padding: 20px; background: rgba(13, 19, 33, .72); }
#insight-app-control-panel { overflow: auto; border-left: 1px solid var(--app-border); background: rgba(17, 26, 46, .94); padding: 20px; }
.insight-app-workspace-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--app-gap); align-items: start; }
.insight-app-card {
  background: linear-gradient(180deg, rgba(21,31,53,.92), rgba(15,22,38,.94));
  border: 1px solid var(--app-border-soft); border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow);
  padding: 18px; position: relative; overflow: hidden;
}
.insight-app-card::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 0%, rgba(56,189,248,.08), transparent 16rem); pointer-events:none; }
.insight-app-card > * { position: relative; }
.insight-app-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom: 16px; }
.insight-app-eyebrow { color: var(--app-info); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 900; }
.insight-app-title { margin: 4px 0 0; color: var(--app-heading); font-size: clamp(1.05rem, .9rem + .55vw, 1.45rem); line-height: 1.15; }
.insight-app-subtitle { margin: 6px 0 0; color: var(--app-muted); font-size: .92rem; }
#insight-app-chart-render-area { min-height: 360px; display:grid; gap: 14px; }
.insight-chart-bars { display:flex; align-items:end; gap:10px; min-height: 250px; padding: 16px; border-radius: 18px; background: rgba(9,13,22,.48); border: 1px solid rgba(148,163,184,.1); }
.insight-chart-bar { flex:1; min-width: 14px; border-radius: 999px 999px 6px 6px; background: linear-gradient(180deg, var(--app-info), #2563EB); height: var(--bar, 40%); box-shadow: 0 0 28px rgba(56,189,248,.18); }
.insight-chart-bar[data-risk="high"] { background: linear-gradient(180deg, var(--app-danger), #7F1D1D); box-shadow: 0 0 28px rgba(239,68,68,.26); }
.insight-metric-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.insight-metric { padding: 14px; border-radius: 18px; background: rgba(9,13,22,.48); border: 1px solid rgba(148,163,184,.1); }
.insight-metric span { display:block; color: var(--app-muted); font-size:.8rem; }
.insight-metric strong { display:block; margin-top:4px; color: var(--app-heading); font-size:1.45rem; letter-spacing:-.04em; }
.insight-keyword-cloud { display:flex; flex-wrap:wrap; gap:10px; }
.insight-keyword { padding: 9px 12px; border-radius: 999px; border:1px solid var(--app-border-soft); background:rgba(255,255,255,.04); color:var(--app-soft); font-weight:750; font-size:.88rem; }
.insight-keyword[data-risk="high"] { border-color: rgba(239,68,68,.45); color:#FCA5A5; background:rgba(239,68,68,.08); }
.insight-app-form { display:grid; gap: 14px; }
.insight-app-field { display:grid; gap:7px; }
.insight-app-field label { color: var(--app-soft); font-size:.86rem; font-weight:800; }
.insight-app-field select,
.insight-app-field input {
  width: 100%; min-height: 44px; border:1px solid var(--app-border); border-radius: 12px;
  background: rgba(9,13,22,.66); color: var(--app-text); padding: 0 12px; outline: none;
}
.insight-app-field input[type="range"] { padding:0; accent-color: var(--app-info); }
.insight-app-button { min-height: 46px; border:0; border-radius: 999px; color:#06111b; background:linear-gradient(135deg,var(--app-info),#60A5FA); font-weight:900; cursor:pointer; }
.insight-app-button.secondary { background:rgba(255,255,255,.05); color: var(--app-text); border:1px solid var(--app-border-soft); }
.insight-log-list { display:grid; gap:10px; }
.insight-log-item { display:grid; grid-template-columns: auto minmax(0,1fr) auto; gap:10px; align-items:center; padding: 12px; border-radius:16px; background:rgba(9,13,22,.44); border:1px solid rgba(148,163,184,.1); }
.insight-log-level { font-size:.72rem; font-weight:900; border-radius:999px; padding:5px 8px; background:rgba(34,197,94,.12); color:#86EFAC; }
.insight-log-level.high { background:rgba(239,68,68,.12); color:#FCA5A5; }
.insight-log-item strong { display:block; color:var(--app-heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.insight-log-item span { color:var(--app-muted); font-size:.8rem; }
@media (max-width: 1100px) { .insight-app-body { grid-template-columns: 1fr; } #insight-app-control-panel { border-left:0; border-top:1px solid var(--app-border); max-height: 42vh; } .insight-app-workspace-grid { grid-template-columns: 1fr; } body.insight-app-page { overflow:auto; } #insight-app-viewport { height:auto; min-height:100vh; } }
@media (max-width: 720px) { #insight-app-anomaly-bar { grid-template-columns: 1fr; } .insight-app-status-meta { justify-content:flex-start; } #insight-app-workspace, #insight-app-control-panel { padding:14px; } .insight-metric-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }