/* Garis neon tipis yang berputar di tepi kartu. Murni CSS; mati otomatis bila pengguna memilih "kurangi gerakan". */
@property --neon-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --neon-1: #14b8a6; --neon-2: #38bdf8; --neon-w: 1.5px; --neon-speed: 7s; }
@media (prefers-color-scheme: dark) { :root { --neon-1: #2dd4bf; --neon-2: #a78bfa; } }

#main > .card, #main > section.card, .narrow, #login.card, .portal-welcome {
  position: relative;
  isolation: isolate;
}
#main > .card::before, #main > section.card::before, .narrow::before, #login.card::before, dialog::before, .portal-welcome::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: var(--neon-w);
  background: conic-gradient(from var(--neon-angle), transparent 0 62%, var(--neon-1) 80%, var(--neon-2) 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  animation: neon-spin var(--neon-speed) linear infinite;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--neon-1) 70%, transparent));
}
/* cahaya tipis di sekitar kartu mengikuti warna neon */
#main > .card, .narrow, #login.card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon-1) 12%, transparent), 0 8px 30px -18px color-mix(in srgb, var(--neon-1) 55%, transparent); }
/* kartu di dalam kartu cukup tampil tenang */
.card .card { border-color: color-mix(in srgb, var(--neon-1) 22%, var(--line)); }
button:not(.ghost):not(.danger):not(.bb):not(.tile):hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon-1) 35%, transparent), 0 0 14px color-mix(in srgb, var(--neon-1) 45%, transparent); }
.tabs button.on { box-shadow: inset 2px 0 0 var(--neon-1), 0 0 12px -4px var(--neon-1); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--neon-1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon-1) 30%, transparent); }
@keyframes neon-spin { to { --neon-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  #main > .card::before, #main > section.card::before, .narrow::before, #login.card::before, dialog::before, .portal-welcome::before { animation: none; background: linear-gradient(135deg, var(--neon-1), var(--neon-2)); opacity: .5; }
}
@media print { .card::before, .narrow::before, dialog::before { display: none !important; } }
.card.narrow { max-width: 380px; margin-left: auto; margin-right: auto; }
a { color: var(--accent); }
.pre { white-space: pre-wrap; }
.w80 { width: 90px; }
.stat-lg { font-size: 20px; }
dialog.modal-box { width: min(560px, 94vw); max-height: 90vh; overflow: auto; }
dialog.wide-dlg { width: min(900px, 96vw); }
body.exam-mode .sidebar, body.exam-mode .appbar, body.exam-mode .bottombar { display: none !important; }
body.exam-mode { user-select: none; -webkit-user-select: none; }
body.exam-mode textarea, body.exam-mode input { user-select: text; -webkit-user-select: text; }

tr.edit-row input, tr.edit-row select { width: 100%; min-width: 90px; }
tr.total-row td { font-weight: 600; background: rgba(127, 127, 127, .08); }
iframe.print-frame { position: fixed; right: 0; bottom: 0; width: 0; height: 0; border: 0; }
.print-bar { margin: 6px 0 14px; display: flex; justify-content: flex-end; }
.ta-badge { display: inline-block; margin-top: 4px; font-size: 11px; }
.inline-table .cell-actions { flex-wrap: nowrap; }
.inline-table td:last-child, .inline-table th:last-child { white-space: nowrap; }
.file-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0; }
.term-note { margin: 0 0 8px; font-size: 13px; color: var(--muted, #667); }
.inline-table td:last-child, .inline-table th:last-child { position: sticky; right: 0; background: var(--card, #fff); box-shadow: -6px 0 8px -8px rgba(0, 0, 0, .25); }

.back-warn { position: sticky; top: 8px; z-index: 5; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bad, #ff5470); background: rgba(255,84,112,.15); font-weight: 600; }
.back-warn[hidden] { display: none; }

.chat { display: grid; gap: 10px; max-height: 55vh; overflow-y: auto; padding: 10px; border: 1px solid var(--line, #2a3a38); border-radius: 14px; margin: 10px 0; }
.bubble { max-width: min(560px, 92%); padding: 10px 12px; border-radius: 14px; display: grid; gap: 4px; background: rgba(127, 127, 127, .12); }
.bubble.me { justify-self: end; background: rgba(20, 184, 166, .2); }
.bubble.ai { background: rgba(56, 189, 248, .14); }
.bubble .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .sources { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.chat-form textarea { width: 100%; }

/* lonceng notifikasi + kotak masuk */
.bellbox { display: inline-flex; margin-left: auto; }
.bell { position: relative; width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 18px; line-height: 1; }
.bell .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: #d92d20; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.bell .badge[hidden] { display: none; }
dialog.inbox { width: min(520px, 94vw); }
dialog.inbox .row { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 6px 0; }
.inbox-list { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; margin: 10px 0; }
.inbox-item { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--text); cursor: pointer; font: inherit; }
.inbox-item.unread { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.inbox-item span { font-size: 14px; opacity: .85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.inbox-item small, .inbox-devs small { opacity: .7; }
.inbox-devs h4 { margin: 12px 0 4px; }
.brand .bellbox { margin-left: auto; }
.appbar .bellbox { margin-left: auto; margin-right: 8px; }