/* ======================================================================
   Peningkatan tampilan (UI polish) - lapisan di atas style.css.
   Hapus <link> ke file ini di index.html untuk kembali ke tampilan lama.
   ====================================================================== */
:root {
  --glow: rgba(243, 128, 32, 0.22);
  --card-grad: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 60%);
  --ring-soft: 0 0 0 1px rgba(255,255,255,.03) inset;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
:root[data-theme='light'] {
  --glow: rgba(212, 100, 10, 0.16);
  --card-grad: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  --ring-soft: 0 0 0 0 transparent;
}

/* latar halaman: cahaya aksen halus di sudut */
body {
  background:
    radial-gradient(900px 480px at 8% -8%, var(--glow), transparent 60%),
    radial-gradient(800px 460px at 100% 0%, color-mix(in srgb, var(--ok) 9%, transparent), transparent 60%),
    var(--ground);
  background-attachment: fixed;
}
::selection { background: var(--tunnel); color: #1a0f05; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ---- Login ---- */
.login::before {
  content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 65%);
  filter: blur(20px); pointer-events: none;
}
.login-card {
  max-width: 380px; padding: 38px 32px 32px; gap: 14px;
  background: var(--card-grad), color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow), var(--ring-soft), 0 0 60px -20px var(--glow);
  animation: rise .5s var(--ease) both;
}
.mark {
  width: 52px; height: 52px; border-radius: 15px;
  background: linear-gradient(145deg, #ff9a42, var(--tunnel));
  box-shadow: 0 8px 24px -6px var(--tunnel), 0 1px 0 rgba(255,255,255,.35) inset;
}
.login-card h1 { font-size: 26px; }
#passwordInput { padding: 13px 15px; transition: border-color .15s, box-shadow .15s; }
#passwordInput:focus { box-shadow: 0 0 0 4px var(--tunnel-bg); }
.btn-primary {
  background: linear-gradient(180deg, #ff9439, var(--tunnel));
  box-shadow: 0 8px 20px -8px var(--tunnel), 0 1px 0 rgba(255,255,255,.3) inset;
}
.btn-primary:hover { box-shadow: 0 12px 26px -8px var(--tunnel), 0 1px 0 rgba(255,255,255,.3) inset; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ---- Header ---- */
.bar {
  padding: 8px 10px 8px 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--line-soft); backdrop-filter: blur(10px);
}
.brand-mark { background: linear-gradient(145deg, #ff9a42, var(--tunnel)); box-shadow: 0 6px 16px -6px var(--tunnel); }
.palette-trigger { background: var(--sunken); }
.palette-trigger:hover { border-color: var(--tunnel); color: var(--ink-dim); box-shadow: 0 0 0 3px var(--tunnel-bg); }
.icon-btn { transition: color .15s, border-color .15s, background .15s, transform .15s var(--ease); }
.icon-btn:hover { background: var(--raised); transform: translateY(-1px); }
.clock { padding: 5px 10px; border-radius: 8px; background: var(--sunken); border: 1px solid var(--line-soft); }

/* ---- Kartu / panel / node ---- */
.health, .panel { background-image: var(--card-grad); box-shadow: var(--ring-soft), 0 10px 30px -22px rgba(0,0,0,.55); }
.topo {
  background-image: var(--card-grad), radial-gradient(var(--dots) 1px, transparent 1px);
  background-size: auto, 18px 18px; box-shadow: var(--ring-soft), 0 10px 30px -22px rgba(0,0,0,.55);
}
.node { transition: border-color .2s; }
.node:hover { border-color: var(--line); }
.node-tunnel { box-shadow: 0 0 40px -22px var(--tunnel); }
.panel-title {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim);
}
.panel-title::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--tunnel); box-shadow: 0 0 10px var(--tunnel); }
.domain-list a { transition: color .15s, background .15s, transform .15s var(--ease); }
.domain-list a:hover { background: var(--tunnel-bg); transform: translateX(2px); }

.gauge[data-level='ok'] .g-val { filter: drop-shadow(0 0 3px var(--ok)); }
.gauge[data-level='warn'] .g-val { filter: drop-shadow(0 0 3px var(--warn)); }
.gauge[data-level='bad'] .g-val { filter: drop-shadow(0 0 3px var(--bad)); }
.ring-seg.seg-ok { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ok) 70%, transparent)); }

/* ---- Toolbar ---- */
.chip { transition: all .18s var(--ease); }
.chip:hover { transform: translateY(-1px); }
.chip.active { box-shadow: 0 6px 16px -8px var(--ink); }
.select:hover { border-color: var(--line); }

/* ---- Grup + tile aplikasi ---- */
.group-head { align-items: center; }
.group-head h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-dim); }
.group-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-soft), transparent); order: 2; }
.group-head span { order: 1; padding: 1px 8px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11.5px; }

.tile {
  background-image: var(--card-grad); box-shadow: var(--ring-soft), 0 8px 24px -20px rgba(0,0,0,.6);
  transition: border-color .2s, transform .25s var(--ease), box-shadow .25s;
  animation: rise .45s var(--ease) both;
}
.tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tunnel) 45%, var(--line)); box-shadow: 0 16px 34px -18px rgba(0,0,0,.7), 0 0 0 1px var(--tunnel-bg); }
.tile.s-bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--line-soft)); background-image: linear-gradient(90deg, var(--bad-bg), transparent 45%), var(--card-grad); }
.tile.s-warn { border-color: color-mix(in srgb, var(--warn) 30%, var(--line-soft)); }
.apps .tile:nth-child(2) { animation-delay: .04s; }
.apps .tile:nth-child(3) { animation-delay: .08s; }
.apps .tile:nth-child(4) { animation-delay: .12s; }
.apps .tile:nth-child(5) { animation-delay: .16s; }
.apps .tile:nth-child(n+6) { animation-delay: .2s; }

.t-name { font-size: 16px; }
.t-cat { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.pill { transition: color .15s, border-color .15s, background .15s; }
.pill:hover { background: var(--tunnel-bg); }
.bar-mini b { background: linear-gradient(90deg, var(--tunnel), #ffb061); box-shadow: 0 0 8px -1px var(--tunnel); }
.act { transition: all .18s var(--ease); }
.act:hover:not(:disabled) { transform: translateY(-1px); }

/* ---- Panel samping ---- */
.spark path.line { filter: drop-shadow(0 0 3px var(--tunnel)); }
.spark path.line.tx { filter: drop-shadow(0 0 3px var(--ok)); }
.spark path.area { fill: color-mix(in srgb, var(--tunnel) 16%, transparent); }
.net-rate b { font-size: 27px; }
.st-grid div { transition: border-color .15s; }
.st-grid div:hover { border-color: var(--line); }
.events li { transition: background .15s; }
.events li:hover { background: color-mix(in srgb, var(--raised) 70%, transparent); }

/* ---- Modal, palet, toast ---- */
.modal, .palette, .confirm { background-image: var(--card-grad); animation: rise .28s var(--ease) both; }
.tab { transition: color .15s, border-color .15s; }
.tab:hover { color: var(--ink-dim); }
.palette-list li { transition: background .12s; }
.palette-list li.sel { box-shadow: inset 2px 0 0 var(--tunnel); }
.toast { backdrop-filter: blur(10px); }

:focus-visible { outline-offset: 3px; border-radius: 8px; }

/* ======================================================================
   Latar modern: mesh gradient bergerak + grid memudar + grain halus
   ====================================================================== */
:root {
  --bg-a: rgba(243, 128, 32, 0.20);
  --bg-b: rgba(61, 220, 151, 0.12);
  --bg-c: rgba(80, 140, 255, 0.14);
  --grid-line: rgba(147, 168, 182, 0.09);
}
:root[data-theme='light'] {
  --bg-a: rgba(243, 128, 32, 0.20);
  --bg-b: rgba(15, 157, 107, 0.13);
  --bg-c: rgba(70, 120, 240, 0.13);
  --grid-line: rgba(18, 35, 45, 0.06);
}
html { background: var(--ground); }
body { background: transparent; }

/* lapisan 1: blob warna yang melayang pelan */
body::before {
  content: ''; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 22%, var(--bg-a), transparent 70%),
    radial-gradient(34% 40% at 85% 15%, var(--bg-c), transparent 70%),
    radial-gradient(40% 44% at 70% 90%, var(--bg-b), transparent 70%),
    radial-gradient(30% 34% at 8% 85%, var(--bg-c), transparent 70%);
  filter: blur(30px) saturate(1.15);
  animation: aurora 28s ease-in-out infinite alternate;
  will-change: transform;
}
/* lapisan 2: grid tipis yang memudar ke tepi + grain */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 160px 160px, 44px 44px, 44px 44px;
  opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, #000 25%, transparent 100%);
}
:root[data-theme='light'] body::after { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 44px 44px; }

@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(3%, -2%, 0) scale(1.08) rotate(2deg); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.04) rotate(-2deg); }
}
/* halaman login: blob lebih pekat di tengah */
.login { background: radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--bg-a) 55%, transparent), transparent 75%); }
@media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } }