:root {
  --eagle-navy-950: #020814;
  --eagle-navy-900: #061426;
  --eagle-navy-850: #081a2e;
  --eagle-navy-800: #0b2037;
  --eagle-surface: rgba(8, 25, 45, .92);
  --eagle-surface-strong: rgba(5, 18, 34, .98);
  --eagle-line: rgba(50, 145, 213, .28);
  --eagle-line-strong: rgba(63, 171, 240, .5);
  --eagle-gold: #ffc107;
  --eagle-amber: #ffb020;
  --eagle-blue: #38b2f6;
  --eagle-green: #22c55e;
  --eagle-red: #ef4444;
  --eagle-steel: #94a3b8;
  --eagle-text: #eef5fb;
  --eagle-muted: #91a8bd;
  --eagle-dim: #5e7890;
  --cyan: #38b2f6;
  --cyan-dim: #1684be;
  --cyan-dark: #08253d;
  --green: #22c55e;
  --green-dim: #168447;
  --red: #ef4444;
  --amber: #ffb020;
  --bg-base: #020814;
  --bg-panel: #061426;
  --bg-card: #081a2e;
  --border: rgba(50, 145, 213, .28);
  --border-bright: rgba(63, 171, 240, .5);
  --text-primary: #eef5fb;
  --text-secondary: #91a8bd;
  --text-dim: #5e7890;
}

html { color-scheme: dark; background: var(--eagle-navy-950); }

body {
  cursor: default;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--eagle-text);
  background:
    radial-gradient(circle at 85% 2%, rgba(25, 115, 188, .16), transparent 31%),
    radial-gradient(circle at 8% 88%, rgba(255, 176, 32, .075), transparent 25%),
    var(--eagle-navy-950);
}

body::before {
  background-image:
    linear-gradient(rgba(62, 139, 198, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 139, 198, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: none;
}

body::after { animation: none; opacity: .45; }

.demo-ribbon { display: none; }

.topbar {
  height: 72px;
  padding: 0 24px;
  gap: 22px;
  background: rgba(2, 8, 20, .96);
  border-bottom: 1px solid rgba(255, 193, 7, .28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.topbar::after {
  background: linear-gradient(90deg, transparent, var(--eagle-gold), var(--eagle-blue), transparent);
  animation: none;
}

.logo {
  min-width: 278px;
  margin-right: 12px;
  gap: 14px;
}

.logo-mark {
  width: 112px;
  height: 52px;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(56, 178, 246, .26)) drop-shadow(0 5px 8px rgba(0, 0, 0, .7));
}

.logo-mark img {
  content: url('/assets/eagle-eye-logo.png');
  position: absolute;
  width: 142px;
  max-width: none;
  height: auto;
  left: -22px;
  top: -23px;
  object-fit: initial;
}
.logo-mark::after { display: none; }

.logo-text {
  font-family: Orbitron, Inter, sans-serif;
  font-size: 18px;
  line-height: 1;
  letter-spacing: .15em;
  background: linear-gradient(180deg, #fff8cf 0%, #ffc107 48%, #d57a00 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 18px rgba(255, 176, 32, .24);
}

.logo-text::after { display: none; }

.eagle-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.eagle-brand-kicker {
  display: block;
  margin-top: 5px;
  color: #ffdc6b;
  font-family: Orbitron, Inter, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.nav-tabs { gap: 4px; min-width: 0; }

.nav-tab {
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--eagle-muted);
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: none;
}

.nav-tab[data-workspace] { background: transparent; border-color: transparent; }
.nav-tab[data-workspace="license"],
.nav-tab[data-workspace="users"],
.nav-tab[data-workspace="profile"] { display: none !important; }
.nav-tab:hover { color: var(--eagle-text); background: rgba(56, 178, 246, .06); }

.nav-tab.active {
  color: #ffe28b;
  background: rgba(255, 193, 7, .08);
  border-color: rgba(255, 193, 7, .3);
}

.nav-tab.active::before { display: none; }
.nav-tab.active::after { background: var(--eagle-gold); box-shadow: 0 0 10px rgba(255, 193, 7, .5); }

.topbar-right { gap: 10px; color: var(--eagle-muted); }
.topbar-right > span[style] { display: none; }
.status-indicator { min-height: 32px; padding: 0 10px; border: 1px solid rgba(34, 197, 94, .38); border-radius: 999px; color: #63e592; }
.topbar-user-chip { min-width: 148px; height: 38px; border-radius: 8px; border-color: var(--eagle-line); background: rgba(8, 25, 45, .86); }
.topbar-user-photo { border-color: rgba(255, 193, 7, .45); color: #ffdc6b; background: rgba(255, 193, 7, .08); }
.topbar-user-name { color: var(--eagle-text); }
.topbar-user-role { color: var(--eagle-muted); }
.topbar-logout { min-height: 38px; border-radius: 7px; border-color: rgba(239, 68, 68, .34); color: #ff9999; background: rgba(239, 68, 68, .07); }
.topbar-logout:hover { border-color: rgba(239, 68, 68, .66); background: rgba(239, 68, 68, .13); }

.main {
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}

.sidebar {
  top: 72px;
  height: calc(100vh - 72px);
  padding: 20px 12px;
  gap: 5px;
  background: linear-gradient(180deg, rgba(6, 20, 38, .98), rgba(3, 12, 25, .96));
  border-right: 1px solid var(--eagle-line);
}

.sidebar-section {
  padding: 16px 12px 7px;
  color: var(--eagle-dim);
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.sidebar-item {
  min-height: 64px;
  height: auto;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 12px;
  overflow: visible;
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 8px;
  color: var(--eagle-muted);
}

.sidebar-item:hover { color: var(--eagle-text); background: rgba(56, 178, 246, .05); border-left-color: rgba(56, 178, 246, .38); }
.sidebar-item.active { color: #ffdc6b; background: linear-gradient(90deg, rgba(255, 193, 7, .13), rgba(255, 193, 7, .025)); border-color: rgba(255, 193, 7, .16); border-left-color: var(--eagle-gold); }
.sidebar-item.active::before { display: none; }
.sidebar-icon { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 2px; color: currentColor; }
.sidebar-item .sidebar-text { min-width: 0; flex: 1 1 auto; overflow: visible; }
.sidebar-item .sidebar-label {
  display: block;
  font-size: 12px;
  line-height: 1.28;
  letter-spacing: .01em;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sidebar-item .sidebar-desc {
  display: block;
  margin-top: 4px;
  color: var(--eagle-dim);
  font-size: 9px;
  line-height: 1.42;
  white-space: normal;
  overflow-wrap: anywhere;
}

.content { padding: 22px; gap: 18px; min-width: 0; }

.panel,
.native-box,
.service-limit-card,
.kpi-card,
.data-card,
.workspace-panel,
.result-panel,
.feature-section {
  border-color: var(--eagle-line);
  background: linear-gradient(180deg, rgba(9, 27, 48, .94), rgba(5, 17, 32, .95));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .2);
}

.panel::before,
.native-box::before { background: linear-gradient(90deg, var(--eagle-gold), var(--eagle-blue)); }
.panel-header { min-height: 50px; padding: 13px 17px; background: rgba(2, 10, 21, .4); border-color: var(--eagle-line); }
.panel-title { color: #ffdb68; font-family: Inter, sans-serif; font-size: 11px; letter-spacing: .11em; }
.panel-title::before { background: var(--eagle-gold); box-shadow: 0 0 8px rgba(255, 193, 7, .55); }
.panel-body { padding: 18px; }

.feat-btn,
button,
input,
select,
textarea { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }

.feat-btn { min-height: 40px; padding: 9px 14px; border-radius: 7px; clip-path: none; }
.feat-btn.is-primary,
button.primary,
.primary-btn,
.signin {
  color: #201600;
  background: linear-gradient(135deg, #ffe17a, #ffb000 62%, #d47a00);
  border-color: #ffd458;
  font-weight: 800;
}
.feat-btn.is-primary:hover,
button.primary:hover,
.primary-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

.tactical-input,
.tactical-select,
.tactical-textarea,
input,
select,
textarea { border-radius: 7px; border-color: rgba(112, 160, 199, .34); background: rgba(1, 9, 20, .82); color: var(--eagle-text); }
.tactical-input:focus,
.tactical-select:focus,
input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible { outline: 2px solid #ffd65b; outline-offset: 2px; border-color: var(--eagle-gold); }

.status-pill.active,
.status-pill.success,
.status-ok,
.tag-green { border-color: rgba(34, 197, 94, .5); color: #62e493; }
.status-pill.waiting,
.status-warning { border-color: rgba(255, 176, 32, .52); color: #ffd166; }
.status-pill.failed,
.status-error { border-color: rgba(239, 68, 68, .52); color: #ff8b8b; }

body[data-eagle-workspace="dashboard"] .parallax-stack,
body[data-eagle-workspace="dashboard"] .scanner-bar { display: none; }

.workspace-grid.is-eagle-dashboard { display: block; }
.workspace-grid.is-eagle-dashboard .eagle-dashboard-panel { min-height: 0; }
.workspace-grid.is-eagle-dashboard .eagle-dashboard-panel > .panel-header { display: none; }
.workspace-grid.is-eagle-dashboard .eagle-dashboard-panel > .panel-body { min-height: 0; padding: 0; }

.eagle-dashboard { display: grid; gap: 20px; }
.eagle-dashboard-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 24px; border: 1px solid var(--eagle-line); border-radius: 12px; background: radial-gradient(circle at 85% 5%, rgba(56, 178, 246, .16), transparent 34%), linear-gradient(135deg, rgba(10, 33, 58, .96), rgba(4, 16, 31, .98)); }
.eagle-dashboard-heading h2 { margin: 5px 0 7px; color: var(--eagle-text); font-size: clamp(21px, 2.2vw, 30px); line-height: 1.2; }
.eagle-dashboard-heading p { margin: 0; color: var(--eagle-muted); font-size: 13px; line-height: 1.55; }
.eagle-eyebrow { color: #ffca32; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eagle-live-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid rgba(34, 197, 94, .42); border-radius: 999px; color: #62e493; background: rgba(34, 197, 94, .07); font-size: 11px; font-weight: 700; white-space: nowrap; }
.eagle-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--eagle-green); box-shadow: 0 0 10px rgba(34, 197, 94, .8); }

.eagle-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.eagle-status-card { min-height: 110px; display: grid; align-content: center; gap: 7px; padding: 16px; border: 1px solid var(--eagle-line); border-radius: 10px; background: linear-gradient(180deg, rgba(9, 30, 53, .94), rgba(5, 18, 34, .96)); }
.eagle-status-card span { color: var(--eagle-muted); font-size: 11px; }
.eagle-status-card strong { color: var(--eagle-text); font-size: 20px; }
.eagle-status-card small { color: var(--eagle-dim); font-size: 10px; line-height: 1.4; }
.eagle-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eagle-section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 3px 2px 0; }
.eagle-section-head h3,
.eagle-block-head h3 { margin: 3px 0 0; color: var(--eagle-text); font-size: 17px; }
.eagle-section-head > span { color: var(--eagle-muted); font-size: 11px; }

.eagle-quota-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.eagle-quota-card { min-height: 174px; display: grid; gap: 17px; padding: 17px; border: 1px solid var(--eagle-line); border-radius: 11px; background: linear-gradient(155deg, rgba(10, 34, 59, .98), rgba(5, 17, 32, .98)); }
.eagle-quota-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.eagle-quota-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255, 193, 7, .4); border-radius: 9px; color: #ffcf3e; background: rgba(255, 193, 7, .07); font-size: 22px; }
.eagle-quota-title div { min-width: 0; display: grid; gap: 4px; }
.eagle-quota-title strong { color: var(--eagle-text); font-size: 13px; }
.eagle-quota-title small { color: var(--eagle-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eagle-quota-numbers { display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.eagle-quota-numbers strong { color: var(--eagle-text); font-size: 20px; }
.eagle-quota-numbers span { color: #64e897; font-size: 10px; text-align: right; }
.eagle-progress { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(116, 151, 180, .17); }
.eagle-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--eagle-green), #79e39d); box-shadow: 0 0 12px rgba(34, 197, 94, .45); transition: width .25s ease; }
.eagle-quota-card[data-quota-state="warning"] { border-color: rgba(255, 176, 32, .5); }
.eagle-quota-card[data-quota-state="warning"] .eagle-quota-numbers span { color: #ffd166; }
.eagle-quota-card[data-quota-state="warning"] .eagle-progress span { background: linear-gradient(90deg, #ffcf45, var(--eagle-amber)); }
.eagle-quota-card[data-quota-state="blocked"] { border-color: rgba(239, 68, 68, .5); }
.eagle-quota-card[data-quota-state="blocked"] .eagle-quota-numbers span { color: #ff9292; }
.eagle-quota-card[data-quota-state="blocked"] .eagle-progress span { background: linear-gradient(90deg, #ff7d7d, var(--eagle-red)); }

.eagle-dashboard-columns { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); gap: 12px; }
.eagle-dashboard-block { min-height: 260px; padding: 17px; border: 1px solid var(--eagle-line); border-radius: 11px; background: linear-gradient(180deg, rgba(8, 27, 48, .96), rgba(4, 16, 30, .98)); }
.eagle-block-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid rgba(50, 145, 213, .18); }
.eagle-text-action { min-height: 34px; padding: 0 11px; border: 1px solid rgba(255, 193, 7, .34); border-radius: 7px; color: #ffdb68; background: rgba(255, 193, 7, .05); cursor: pointer; }
.eagle-activity-list { display: grid; }
.eagle-activity-list .data-row { min-height: 48px; border-color: rgba(50, 145, 213, .14); }
.eagle-activity-list .data-row strong { color: var(--eagle-text); }
.eagle-activity-list .data-row span { color: var(--eagle-muted); }
.eagle-operational-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding-top: 14px; }
.eagle-operational-list > div { min-height: 72px; display: grid; align-content: center; gap: 6px; padding: 11px; border: 1px solid rgba(50, 145, 213, .18); border-radius: 8px; background: rgba(2, 12, 25, .46); }
.eagle-operational-list span { color: var(--eagle-muted); font-size: 10px; }
.eagle-operational-list strong { color: var(--eagle-text); font-size: 18px; }

.eagle-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.eagle-quick-actions button { min-height: 82px; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px; align-content: center; padding: 13px; border: 1px solid rgba(255, 193, 7, .3); border-radius: 10px; color: var(--eagle-text); background: linear-gradient(150deg, rgba(255, 193, 7, .08), rgba(7, 24, 43, .9)); text-align: left; cursor: pointer; }
.eagle-quick-actions button > span { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; color: #ffcf3f; border: 1px solid rgba(255, 193, 7, .32); border-radius: 8px; }
.eagle-quick-actions button strong { font-size: 12px; }
.eagle-quick-actions button small { color: var(--eagle-muted); font-size: 10px; }
.eagle-quick-actions button:hover { border-color: rgba(255, 193, 7, .62); transform: translateY(-1px); }

.eagle-service-summary { display: grid; gap: 11px; }
.eagle-service-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 12px; border: 1px solid var(--eagle-line); border-radius: 8px; }

.native-table { border-collapse: separate; border-spacing: 0; }
.native-table th { color: #ffcf42; background: rgba(255, 193, 7, .045); border-color: var(--eagle-line); }
.native-table td { border-color: rgba(50, 145, 213, .16); }

.shell-toast { border-radius: 9px; border-color: var(--eagle-line-strong); background: rgba(4, 16, 30, .97); }

.profiling-process-brand img,
.cp-result-logo {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.profiling-process-brand img {
  width: 82px;
  height: 50px;
  transform: scale(1.28);
  transform-origin: center;
}

.cp-result-logo {
  transform: scale(1.2);
  transform-origin: center;
}

@media (max-width: 1260px) {
  .topbar { gap: 10px; padding-inline: 16px; }
  .logo { min-width: 240px; }
  .nav-tab { padding-inline: 9px; }
  .status-indicator, #clock { display: none; }
  .main { grid-template-columns: 220px minmax(0, 1fr); }
  .eagle-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .topbar { height: 62px; padding-inline: 13px; backdrop-filter: none; }
  .logo { min-width: 0; margin-right: auto; }
  .logo-mark { width: 82px; height: 38px; }
  .logo-mark img { width: 104px; left: -16px; top: -17px; }
  .logo-text { font-size: 15px; }
  .eagle-brand-kicker { font-size: 8px; }
  .topbar-user-chip { min-width: 0; max-width: 140px; }
  .topbar-user-meta { display: none; }
  .topbar-logout { padding-inline: 8px; font-size: 0; }
  .topbar-logout::after { content: 'Keluar'; font-size: 9px; }
  .topbar .nav-tabs {
    position: fixed;
    z-index: 250;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    height: 66px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    overflow-x: auto;
    background: rgba(3, 14, 28, .98);
    border-top: 1px solid var(--eagle-line);
    box-shadow: 0 -12px 28px rgba(0, 0, 0, .32);
  }
  .topbar .nav-tab { min-width: 82px; height: 48px; flex: 1 0 auto; padding: 0 8px; font-size: 10px; }
  .main { grid-template-columns: 1fr; min-height: calc(100vh - 62px); }
  .sidebar { display: none; }
  .content { padding: 14px 14px 88px; }
  .eagle-dashboard-heading { padding: 18px; }
  .eagle-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eagle-quota-grid { grid-template-columns: 1fr; }
  .eagle-dashboard-columns { grid-template-columns: 1fr; }
  .eagle-quick-actions { grid-template-columns: 1fr; }
  .workspace-grid { grid-template-columns: 1fr; }
  .parallax-stack { height: auto; }
  .parallax-viewport { position: static; height: auto; perspective: none; display: block; }
  .parallax-cards { display: flex; flex-direction: column; gap: 14px; }
  .parallax-cards .feature-section { grid-area: auto; transform: none !important; opacity: 1 !important; filter: none !important; width: 100%; }
  .stack-progress, .stack-counter, .scroll-hint { display: none; }
}

@media (max-width: 560px) {
  .topbar-user-expiry { display: none !important; }
  .eagle-dashboard { gap: 14px; }
  .eagle-dashboard-heading { display: grid; }
  .eagle-live-badge { justify-self: start; }
  .eagle-status-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .eagle-status-card { min-height: 96px; padding: 12px; }
  .eagle-status-card strong { font-size: 17px; }
  .eagle-section-head { display: grid; align-items: start; }
  .eagle-quota-card { min-height: 155px; padding: 14px; }
  .eagle-quota-numbers strong { font-size: 18px; }
  .eagle-operational-list { grid-template-columns: 1fr 1fr; }
  .native-request-grid, .native-form-grid, .service-limit-grid, .feature-status-grid { grid-template-columns: 1fr; }
  .native-table-wrap { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}