/* ============================================================
   NightVisual ClickGUI — web port of gui/clickgui/*.java
   All sizes are in the mod's own GUI units (640 × 392 window);
   the whole window is scaled by JS to fit the page.
   ============================================================ */

@property --gA { syntax: "<color>"; inherits: true; initial-value: #8a93f3; }
@property --gB { syntax: "<color>"; inherits: true; initial-value: #b4a5ff; }
@property --acc { syntax: "<color>"; inherits: true; initial-value: #8a93f3; }
@property --accB { syntax: "<color>"; inherits: true; initial-value: #c0c5ff; }
@property --accS { syntax: "<color>"; inherits: true; initial-value: #b0b6ff; }

.cg-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.cg-stage__inner { position: relative; transform-origin: 0 0; width: 640px; height: 392px; }

.cg {
  --text: #ececf1;
  --dim: #808089;
  --faint: #54545d;
  --track: #3c3c43;
  --knob: #92929b;
  --danger: #ec5860;
  --mid: color-mix(in srgb, var(--gA), var(--gB));
  transition: --gA .5s ease, --gB .5s ease, --acc .5s ease, --accB .5s ease, --accS .5s ease;
  position: absolute; inset: 0;
  width: 640px; height: 392px;
  font-family: "NVGui", "Inter", system-ui, sans-serif;
  font-weight: 500;
  color: var(--text);
  user-select: none;
  -webkit-font-smoothing: antialiased;
  border-radius: 14px;
  background: rgba(13, 13, 16, .86);
  box-shadow: 0 0 0 .7px rgba(255,255,255,.07) inset, 0 12px 48px rgba(0,0,0,.45);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px) scale(.95);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2,.8,.2,1), --gA .5s ease, --gB .5s ease, --acc .5s ease, --accB .5s ease, --accS .5s ease;
}
.cg.is-open { opacity: 1; transform: none; }
:where(.cg) button, :where(.cg) input { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; outline: none; }
:where(.cg) button { cursor: pointer; }
.cg * { box-sizing: border-box; }

.cg-ic {
  display: inline-block; flex: none;
  width: 8px; height: 8px;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

/* ---------- Window chrome ---------- */
.cg-side { position: absolute; left: 0; top: 0; width: 132px; height: 392px; background: rgba(0,0,0,.14); border-right: .6px solid rgba(255,255,255,.055); }
.cg-headline { position: absolute; left: 0; right: 0; top: 48px; height: .6px; background: rgba(255,255,255,.055); }
.cg-logo { position: absolute; left: 0; top: 0; width: 132px; height: 48px; display: grid; place-items: center; color: var(--text); }
.cg-logo .cg-ic { width: 18px; height: 18px; }
.cg-sec { position: absolute; left: 14px; font-size: 7px; color: var(--faint); line-height: 1; }

.cg-nav {
  position: absolute; left: 8px; width: 116px; height: 16px;
  display: flex; align-items: center;
  border-radius: 6px;
  color: var(--faint);
  font-size: 8px;
  transition: background-color .16s ease, color .16s ease;
}
.cg-nav:hover { background: rgba(255,255,255,.03); color: color-mix(in srgb, var(--faint), var(--dim)); }
.cg-nav.is-active { background: rgba(255,255,255,.035); color: var(--text); }
.cg-nav .cg-ic { position: absolute; left: 7px; top: 4px; opacity: .6; transition: opacity .16s ease; }
.cg-nav:hover .cg-ic, .cg-nav.is-active .cg-ic { opacity: 1; }
.cg-nav__label { position: absolute; left: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 76px; line-height: 16px; }
.cg-nav__line {
  position: absolute; left: 7px; bottom: 2.1px; height: .9px; border-radius: .45px;
  width: 0; opacity: .75;
  background: linear-gradient(90deg, var(--gA), var(--gB));
  transition: width .22s ease;
}
.cg-nav.is-active .cg-nav__line { width: var(--lw, 40px); }
.cg-nav__check { position: absolute; right: 6px; top: 3.5px; width: 9px !important; height: 9px !important; color: var(--text); opacity: 0 !important; transition: opacity .16s ease; }
.cg-nav.is-active .cg-nav__check { opacity: 1 !important; }

.cg-sideline { position: absolute; left: 0; top: 348px; width: 132px; height: .6px; background: rgba(255,255,255,.055); }
.cg-profile { position: absolute; left: 13px; top: 360px; display: flex; gap: 7px; align-items: flex-start; }
.cg-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(13,13,16,1), 0 0 0 2.3px color-mix(in srgb, var(--acc) 70%, transparent);
  background: color-mix(in srgb, var(--acc) 60%, transparent);
  display: grid; place-items: center; font-size: 8px; font-weight: 600; color: #fff;
}
.cg-profile__name { font-size: 7.5px; line-height: 1; margin-top: 1px; white-space: nowrap; }
.cg-profile__name em { font-style: normal; font-size: 6.5px; color: var(--accS); margin-left: 4px; }
.cg-profile__date { font-size: 6.5px; font-weight: 400; color: var(--faint); margin-top: 4px; }

/* ---------- Header ---------- */
.cg-menukey {
  position: absolute; left: 143px; top: 15px; height: 18px; padding: 0 5px;
  display: flex; align-items: center; gap: 7px;
  border-radius: 6px; font-size: 8px;
  color: color-mix(in srgb, var(--dim) 60%, var(--text));
  transition: background-color .16s, color .16s;
}
.cg-menukey:hover { background: rgba(255,255,255,.045); color: var(--text); }
.cg-menukey.is-listening { color: var(--accB); background: rgba(255,255,255,.045); }

.cg-globe {
  position: absolute; left: 609px; top: 14px; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; color: var(--dim);
  transition: background-color .16s, color .16s;
}
.cg-globe .cg-ic { width: 10px; height: 10px; }
.cg-globe:hover { background: rgba(255,255,255,.05); color: var(--text); }
.cg-globe.is-open { color: var(--accB); background: rgba(255,255,255,.05); }

.cg-search {
  position: absolute; right: 22px; top: 14px; height: 20px;
  display: flex; align-items: center; gap: 8px; flex-direction: row-reverse;
  padding: 0 7px 0 0;
  border-radius: 7px;
  color: var(--dim);
  transition: background-color .2s, box-shadow .2s, color .2s, padding .2s;
  cursor: text;
}
.cg-search:hover { color: color-mix(in srgb, var(--dim) 30%, var(--text)); }
.cg-search .cg-ic { width: 9px; height: 9px; }
.cg-search input {
  width: 26px; font-size: 8px; color: var(--text);
  transition: width .2s cubic-bezier(.2,.8,.2,1);
}
.cg-search input::placeholder { color: currentColor; opacity: 1; }
.cg-search.is-active { background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.07); padding-left: 8px; color: var(--text); }
.cg-search.is-active input { width: 150px; }
.cg-search.is-active input::placeholder { color: var(--faint); }
.cg-search.is-focused { box-shadow: inset 0 0 0 .6px color-mix(in srgb, var(--acc) 60%, transparent); }

.cg-lang {
  position: absolute; right: 10px; top: 42px; z-index: 30;
  width: 104px; padding: 4px;
  border-radius: 8px;
  background: rgba(19,19,23,.98);
  box-shadow: inset 0 0 0 .6px rgba(255,255,255,.08), 0 8px 28px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .16s, transform .16s;
}
.cg-lang.is-open { opacity: 1; transform: none; pointer-events: auto; }
.cg-lang button { display: flex; width: 100%; height: 16px; align-items: center; justify-content: space-between; padding: 0 7px; border-radius: 5px; font-size: 7.5px; color: var(--dim); }
.cg-lang button:hover { background: rgba(255,255,255,.05); color: var(--text); }
.cg-lang button.is-active { color: var(--text); }
.cg-lang button.is-active::after { content: ""; width: 8px; height: 8px; background: var(--accB); -webkit-mask: var(--ic-check) center/contain no-repeat; mask: var(--ic-check) center/contain no-repeat; }

/* ---------- Content ---------- */
.cg-content { position: absolute; left: 144px; top: 58px; width: 484px; height: 324px; overflow: hidden; }
.cg-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.cg-scroll::-webkit-scrollbar { display: none; }
.cg-thumb { position: absolute; left: 634px; top: 58px; width: 2px; border-radius: 1px; background: rgba(255,255,255,.12); opacity: 0; transition: opacity .2s; pointer-events: none; }
.cg-thumb.is-visible { opacity: 1; }

.cg-appear { animation: cgAppear .24s cubic-bezier(.33,1,.68,1) both; animation-delay: calc(var(--n, 0) * 18ms); }
@keyframes cgAppear { from { opacity: 0; transform: translateY(8px); } }

.cg-cols { display: grid; grid-template-columns: repeat(3, 156px); column-gap: 8px; align-items: start; }
.cg-col { display: flex; flex-direction: column; gap: 4px; }

.cg-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--dim); font-size: 8px; padding-bottom: 14px; }
.cg-empty .cg-ic { width: 18px; height: 18px; color: var(--faint); opacity: .8; }

/* ---------- Module card (ModuleItem) ---------- */
.cg-mod {
  position: relative; border-radius: 7px;
  transition: background-color .16s ease, box-shadow .18s ease;
}
.cg-mod::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .18s ease; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gA) 12%, transparent), color-mix(in srgb, var(--gB) 12%, transparent));
  box-shadow: inset 0 0 0 .6px color-mix(in srgb, var(--mid) 28%, transparent);
}
.cg-mod:hover { background: rgba(255,255,255,.028); }
.cg-mod.is-expanded { background: rgba(255,255,255,.03); }
.cg-mod.is-expanded:hover { background: rgba(255,255,255,.058); }
.cg-mod.is-on::before { opacity: 1; }
.cg-mod__row { position: relative; height: 31px; cursor: pointer; }
.cg-mod__name {
  position: absolute; left: 8px; top: 6px; right: 40px;
  display: flex; align-items: center; gap: 4px;
  font-size: 8.5px; line-height: 10px;
  color: color-mix(in srgb, var(--dim) 55%, var(--text));
  transition: color .16s;
}
.cg-mod:hover .cg-mod__name { color: color-mix(in srgb, var(--dim) 22%, var(--text)); }
.cg-mod.is-on .cg-mod__name { color: var(--text); }
.cg-mod__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cg-mod.is-binding .cg-mod__title { color: var(--accB); }
.cg-key { flex: none; height: 9px; padding: 0 4px; border-radius: 3px; background: rgba(255,255,255,.06); font-size: 6px; line-height: 9px; color: var(--dim); }
.cg-help {
  flex: none; width: 9px; height: 9px; border-radius: 2.5px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.055); font-size: 6px; font-weight: 600; line-height: 1;
  color: color-mix(in srgb, var(--faint) 60%, var(--dim));
  transition: background-color .16s, color .16s;
}
.cg-help:hover { background: rgba(255,255,255,.1); color: var(--text); }
.cg-mod__desc {
  position: absolute; left: 8px; top: 18px; right: 40px;
  font-size: 6.5px; font-weight: 400; line-height: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: color-mix(in srgb, var(--faint) 75%, var(--dim));
  transition: color .16s;
}
.cg-mod:hover .cg-mod__desc { color: color-mix(in srgb, var(--faint) 40%, var(--dim)); }
.cg-mod.has-gear .cg-mod__name, .cg-mod.has-gear .cg-mod__desc { right: 46px; }
.cg-gear { position: absolute; right: 27px; top: 8.75px; width: 13.5px; height: 13.5px; display: grid; place-items: center; color: var(--faint); transition: color .16s; }
.cg-gear .cg-ic { width: 7.5px; height: 7.5px; transition: transform .3s ease; }
.cg-mod:hover .cg-gear { color: color-mix(in srgb, var(--faint) 75%, var(--text)); }
.cg-gear:hover { color: var(--text) !important; }
.cg-mod.is-expanded .cg-gear { color: var(--accS); }
.cg-mod.is-expanded .cg-gear .cg-ic { transform: rotate(90deg); }
.cg-mod__row > .cg-tg { position: absolute; right: 8px; top: 11.25px; }

/* Toggle (GuiStyle.toggle) */
.cg-tg { position: relative; display: inline-block; flex: none; width: 15px; height: 8.5px; border-radius: 4.25px; background: rgba(60,60,67,.85); transition: background-color .18s, box-shadow .18s; }
.cg-tg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .18s; background: linear-gradient(90deg, var(--gA), var(--gB)); box-shadow: 0 0 6px color-mix(in srgb, var(--mid) 35%, transparent); }
.cg-tg::after { content: ""; position: absolute; left: 1.53px; top: 1.53px; width: 5.44px; height: 5.44px; border-radius: 50%; background: var(--knob); transition: transform .18s cubic-bezier(.3,.7,.3,1), background-color .18s; }
.cg-hov:hover .cg-tg:not(.on), .cg-mod__row:hover .cg-tg:not(.on) { background: rgba(78,78,86,.85); }
.cg-tg.on::before { opacity: 1; }
.cg-tg.on::after { transform: translateX(6.5px); background: #fff; }

/* Settings panel */
.cg-set { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s cubic-bezier(.3,.7,.3,1); }
.cg-mod.is-expanded .cg-set { grid-template-rows: 1fr; }
.cg-set__clip { overflow: hidden; min-height: 0; }
.cg-set__panel {
  margin: 0 4px 4px; padding: 7px 3px;
  border-radius: 6px; background: rgba(0,0,0,.2);
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0; transition: opacity .2s ease;
}
.cg-mod.is-expanded .cg-set__panel { opacity: 1; transition-delay: .05s; }

.cg-el { position: relative; font-size: 7px; }
.cg-el__label { color: color-mix(in srgb, var(--dim) 65%, var(--text)); transition: color .16s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cg-el:hover .cg-el__label { color: color-mix(in srgb, var(--dim) 25%, var(--text)); }
.cg-el--row { height: 15px; display: flex; align-items: center; justify-content: space-between; gap: 6px; cursor: pointer; }
.cg-el--sec { height: 13px; display: flex; align-items: flex-end; font-size: 6.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
.cg-el--sec:first-child { height: 9px; }

.cg-chip { flex: none; height: 11px; display: inline-flex; align-items: center; gap: 4px; padding: 0 5px; border-radius: 4px; background: rgba(255,255,255,.05); font-size: 6.5px; color: rgba(236,236,241,.9); transition: background-color .16s, box-shadow .16s; }
.cg-el:hover .cg-chip { background: rgba(255,255,255,.09); }
.cg-chip.is-listening { box-shadow: inset 0 0 0 .7px var(--acc); color: var(--accB); }
.cg-chip--color { padding-left: 2px; }
.cg-chip__sw { width: 7px; height: 7px; border-radius: 2.5px; }

/* Slider */
.cg-el--slider { height: 21px; cursor: ew-resize; }
.cg-el--slider .cg-el__top { height: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cg-el__val { flex: none; color: rgba(236,236,241,.78); transition: color .16s; }
.cg-el--slider:hover .cg-el__val { color: var(--text); }
.cg-bar { position: absolute; left: 0; right: 0; top: 15px; height: 2.5px; border-radius: 1.25px; background: rgba(60,60,67,.8); }
.cg-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--gA), color-mix(in srgb, var(--gA), var(--gB) var(--p, 50%))); }
.cg-bar__knob { position: absolute; top: 50%; width: 6.5px; height: 6.5px; margin: -3.25px 0 0 -3.25px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.2px color-mix(in srgb, var(--gA), var(--gB) var(--p, 50%)); transition: transform .15s; }
.cg-el--slider:hover .cg-bar__knob, .cg-el--slider.is-drag .cg-bar__knob { transform: scale(1.18); }

/* Chips (ChipFlow) */
.cg-el--chips .cg-el__top { height: 13px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cg-el__count { flex: none; font-size: 6.5px; color: var(--faint); }
.cg-flow { display: flex; flex-wrap: wrap; gap: 3px; padding-bottom: 3px; }
.cg-ch {
  position: relative; height: 12px; padding: 0 6px 0 11px;
  border-radius: 6px; background: rgba(255,255,255,.04);
  font-size: 6.5px; line-height: 12px; color: var(--dim);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .16s, color .16s;
}
.cg-ch::before { content: ""; position: absolute; left: 4.5px; top: 4.5px; width: 3px; height: 3px; border-radius: 50%; box-shadow: inset 0 0 0 .6px var(--faint); transition: background-color .16s, box-shadow .16s; }
.cg-ch:hover { background: rgba(255,255,255,.065); color: color-mix(in srgb, var(--dim) 45%, var(--text)); }
.cg-ch.on { background: color-mix(in srgb, var(--acc) 22%, rgba(255,255,255,.04)); color: var(--text); }
.cg-ch.on:hover { background: color-mix(in srgb, var(--acc) 30%, rgba(255,255,255,.065)); }
.cg-ch.on::before { background: var(--accB); box-shadow: none; }

/* Color popover */
.cg-hsb { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; }
.cg-el.is-open .cg-hsb { grid-template-rows: 1fr; }
.cg-hsb__clip { overflow: hidden; min-height: 0; }
.cg-hsb__in { display: flex; flex-direction: column; gap: 5px; padding: 3px 0 5px; }
.cg-hsb__bar { position: relative; height: 6px; border-radius: 3px; cursor: ew-resize; }
.cg-hsb__bar i { position: absolute; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; box-shadow: 0 0 0 1.2px #fff, 0 1px 3px rgba(0,0,0,.5); pointer-events: none; }

/* Text field / buttons (GuiStyle.field, GuiStyle.button) */
.cg-field { height: 20px; border-radius: 6px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.07); padding: 0 8px; font-size: 7.5px; transition: background-color .16s, box-shadow .16s; }
.cg-field:focus { background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 .6px color-mix(in srgb, var(--acc) 70%, transparent); }
.cg-field::placeholder { color: var(--faint); }
.cg-el--text .cg-field { height: 15px; width: 100%; font-size: 6.5px; padding: 0 6px; }
.cg-btn {
  height: 20px; padding: 0 8px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 7.5px; color: #fff; white-space: nowrap;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.06);
  transition: background-color .16s, opacity .16s, filter .16s;
}
.cg-btn .cg-ic { width: 7.5px; height: 7.5px; }
.cg-btn:hover { background: rgba(255,255,255,.085); }
.cg-btn--primary { background: linear-gradient(90deg, var(--gA), var(--gB)); box-shadow: none; opacity: .78; }
.cg-btn--primary:hover { opacity: .95; background: linear-gradient(90deg, var(--gA), var(--gB)); }
.cg-btn--sm { height: 16px; }
.cg-btn--sq { width: 16px; padding: 0; }
.cg-btn--danger { background: color-mix(in srgb, var(--danger) 70%, transparent); box-shadow: none; }
.cg-btn--danger:hover { background: color-mix(in srgb, var(--danger) 90%, transparent); }
.cg-el--button .cg-btn { width: 100%; height: 15px; font-size: 6.5px; }

/* Tooltip (ModuleItem.renderTooltip) */
.cg-tip {
  position: absolute; z-index: 20; padding: 8px; border-radius: 7px;
  background: rgba(19,19,23,.98);
  box-shadow: inset 0 0 0 .6px rgba(255,255,255,.08), 0 6px 28px rgba(0,0,0,.45);
  pointer-events: none; opacity: 0; transform: translateY(3px);
  transition: opacity .14s, transform .14s;
}
.cg-tip.is-visible { opacity: 1; transform: none; }
.cg-tip b { display: block; font-weight: 500; font-size: 7.5px; margin-bottom: 4px; }
.cg-tip p { margin: 0; font-weight: 400; font-size: 6.5px; line-height: 9px; color: var(--dim); }

/* ---------- Pages: configs / friends toolbars ---------- */
.cg-toolbar { display: flex; gap: 6px; }
.cg-toolbar .cg-field { flex: 1; }
.cg-subbar { height: 16px; margin: 6px 0 8px; display: flex; align-items: center; gap: 5px; font-size: 7.5px; color: var(--dim); }
.cg-subbar .cg-grow { flex: 1; }
.cg-autosave { display: flex; align-items: center; gap: 6px; cursor: pointer; color: color-mix(in srgb, var(--dim) 80%, var(--text)); padding-left: 2px; }
.cg-autosave:hover { color: color-mix(in srgb, var(--dim) 40%, var(--text)); }

.cg-list { display: flex; flex-direction: column; gap: 4px; }
.cg-cfg { height: 26px; border-radius: 7px; display: flex; align-items: center; gap: 7px; padding: 0 6px 0 10px; background: rgba(255,255,255,.025); font-size: 8px; transition: background-color .16s; }
.cg-cfg:hover { background: rgba(255,255,255,.05); }
.cg-cfg.is-active { background: color-mix(in srgb, var(--acc) 12%, rgba(255,255,255,.025)); }
.cg-cfg > .cg-ic { color: var(--dim); }
.cg-cfg.is-active > .cg-ic { color: var(--accB); }
.cg-cfg__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.cg-badge { height: 10px; padding: 0 4px; border-radius: 3px; font-size: 6px; line-height: 10px; color: var(--accB); background: color-mix(in srgb, var(--acc) 30%, transparent); }
.cg-cfg .cg-grow { flex: 1; }
.cg-cfg .cg-btn { height: 16px; }

.cg-grid3 { display: grid; grid-template-columns: repeat(3, 156px); gap: 8px; }
.cg-grid3--tight { row-gap: 4px; }
.cg-grid2 { display: grid; grid-template-columns: repeat(2, 238px); gap: 8px; }

.cg-theme {
  position: relative; height: 44px; border-radius: 8px; text-align: left;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 .7px rgba(255,255,255,.06);
  transition: background-color .16s, box-shadow .2s;
}
.cg-theme:hover { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 .7px rgba(255,255,255,.1); }
.cg-theme.is-active { box-shadow: inset 0 0 0 .7px color-mix(in srgb, var(--t1) 85%, transparent); }
.cg-theme__name { position: absolute; left: 10px; top: 9px; right: 24px; font-size: 8px; line-height: 10px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .16s; }
.cg-theme:hover .cg-theme__name, .cg-theme.is-active .cg-theme__name { color: var(--text); }
.cg-theme__bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 5px; border-radius: 2.5px; background: linear-gradient(90deg, var(--t1), var(--t2)); }
.cg-theme__check { position: absolute; right: 10px; top: 8px; width: 9px !important; height: 9px !important; color: color-mix(in srgb, var(--t1) 60%, #fff); opacity: 0; transition: opacity .16s; }
.cg-theme.is-active .cg-theme__check { opacity: 1; }
.cg-theme__hint { position: absolute; right: 10px; top: 10px; font-size: 5.5px; font-weight: 400; color: var(--faint); opacity: 0; transition: opacity .16s; }
.cg-theme.is-custom:not(.is-active):hover .cg-theme__hint { opacity: 1; }
.cg-theme--add { display: flex; align-items: center; gap: 7px; padding-left: 12px; font-size: 8px; color: var(--dim); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.07); }
.cg-theme--add .cg-ic { width: 9px; height: 9px; transition: color .16s; }
.cg-theme--add:hover { color: var(--text); box-shadow: inset 0 0 0 .6px color-mix(in srgb, var(--acc) 80%, transparent); }
.cg-theme--add:hover .cg-ic { color: var(--accB); }

.cg-menu {
  height: 46px; border-radius: 8px; display: flex; align-items: center; gap: 9px; padding: 0 10px; text-align: left;
  background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.06);
  transition: background-color .16s, box-shadow .16s;
}
.cg-menu:hover { background: rgba(255,255,255,.055); box-shadow: inset 0 0 0 .6px color-mix(in srgb, var(--acc) 80%, transparent); }
.cg-menu__box { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--accB); transition: background-color .16s, color .16s; }
.cg-menu:hover .cg-menu__box { background: color-mix(in srgb, var(--acc) 24%, transparent); color: color-mix(in srgb, var(--accB) 60%, #fff); }
.cg-menu__box .cg-ic { width: 12px; height: 12px; }
.cg-menu b { display: block; font-weight: 500; font-size: 8.5px; color: color-mix(in srgb, var(--dim) 40%, var(--text)); }
.cg-menu:hover b { color: var(--text); }
.cg-menu small { display: block; margin-top: 4px; font-weight: 400; font-size: 6.5px; color: var(--faint); transition: color .16s; }
.cg-menu:hover small { color: var(--dim); }

.cg-friend { height: 24px; border-radius: 7px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 6px; background: rgba(255,255,255,.025); font-size: 7.5px; transition: background-color .16s; }
.cg-friend:hover { background: rgba(255,255,255,.05); }
.cg-friend__av { flex: none; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--acc) 35%, transparent); color: var(--accB); font-weight: 600; font-size: 7px; }
.cg-friend__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-friend__x { width: 15px; height: 15px; display: grid; place-items: center; color: var(--faint); transition: color .16s; }
.cg-friend__x .cg-ic { width: 7px; height: 7px; }
.cg-friend:hover .cg-friend__x { color: var(--dim); }
.cg-friend__x:hover { color: var(--danger) !important; }

/* Events */
.cg-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.cg-tab { height: 18px; padding: 0 9px; border-radius: 6px; font-size: 7.5px; color: var(--dim); background: rgba(255,255,255,.03); transition: background-color .16s, color .16s; }
.cg-tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.cg-tab.is-active { color: var(--text); background: color-mix(in srgb, var(--acc) 22%, rgba(255,255,255,.04)); }
.cg-tabs .cg-grow { flex: 1; }
.cg-tabs .cg-upd { align-self: center; font-size: 6.5px; font-weight: 400; color: var(--faint); }
.cg-event { border-radius: 8px; padding: 9px 10px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.06); transition: background-color .16s; }
.cg-event:hover { background: rgba(255,255,255,.045); }
.cg-event__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 8px; }
.cg-event__top span { font-size: 6px; height: 10px; line-height: 10px; padding: 0 4px; border-radius: 3px; background: rgba(255,255,255,.06); color: var(--dim); }
.cg-event__top span.live { color: var(--accB); background: color-mix(in srgb, var(--acc) 30%, transparent); }
.cg-event__meta { margin-top: 5px; font-size: 6.5px; font-weight: 400; color: var(--faint); }
.cg-event__time { margin-top: 7px; display: flex; justify-content: space-between; align-items: baseline; font-size: 6.5px; color: var(--dim); }
.cg-event__time b { font-weight: 600; font-size: 10px; color: var(--text); font-variant-numeric: tabular-nums; }
.cg-event__prog { margin-top: 5px; height: 2.5px; border-radius: 1.25px; background: rgba(60,60,67,.8); overflow: hidden; }
.cg-event__prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--gA), var(--gB)); }

/* Modal: theme editor */
.cg-modal { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s; border-radius: 14px; }
.cg-modal.is-open { opacity: 1; pointer-events: auto; }
.cg-modal__card { width: 220px; padding: 12px; border-radius: 10px; background: rgba(19,19,23,.98); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.08), 0 10px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 8px; transform: scale(.96); transition: transform .2s; }
.cg-modal.is-open .cg-modal__card { transform: none; }
.cg-modal__card h4 { margin: 0; font-weight: 500; font-size: 9px; }
.cg-modal__preview { height: 6px; border-radius: 3px; }
.cg-modal__row { display: flex; gap: 6px; }
.cg-modal__row .cg-btn { flex: 1; }
.cg-colorpick { display: flex; align-items: center; justify-content: space-between; font-size: 7.5px; color: var(--dim); height: 16px; }
.cg-colorpick label { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 14px; padding: 0 6px 0 3px; border-radius: 4px; background: rgba(255,255,255,.05); color: var(--text); font-size: 6.5px; cursor: pointer; }
.cg-colorpick label i { width: 9px; height: 9px; border-radius: 3px; }
.cg-colorpick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.cg-toast { position: absolute; left: 50%; bottom: 14px; z-index: 50; transform: translate(-50%, 6px); padding: 0 10px; height: 20px; line-height: 20px; border-radius: 7px; font-size: 7.5px; background: rgba(19,19,23,.98); box-shadow: inset 0 0 0 .6px rgba(255,255,255,.08), 0 6px 24px rgba(0,0,0,.45); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; white-space: nowrap; }
.cg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .cg, .cg * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; }
}

/* ---------- Embedding on nightvisual.fun ---------- */
.cg, .cg * { font-family: "NVGui", "SF Pro Display", system-ui, sans-serif; letter-spacing: normal; }
.cg { text-align: left; line-height: normal; }
.cg p { font-size: inherit; line-height: inherit; max-width: none; margin: 0; color: inherit; }
.cg-tip p { font-size: 6.5px; line-height: 9px; color: var(--dim); }

.nv-gui-wrap {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.nv-gui-frame {
  position: relative;
  padding: 10px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(120% 90% at 50% 0%, #15151b, #050507 75%);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 35px color-mix(in srgb, var(--nv-gui-accent, #6f8aff) 18%, transparent);
  transition: box-shadow .5s ease;
}
.nv-gui-frame .cg-stage { border-radius: 16px; }
.nv-gui-hint {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.4);
}
.nv-gui-hint kbd {
  font: 500 11px "SF Pro Display", sans-serif; color: rgba(255,255,255,.7);
  padding: 2px 7px; border-radius: 6px; margin-right: 4px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.animate-on-scroll .nv-gui-wrap { opacity: 0; transform: translateY(30px) scale(.97); transition: opacity .7s cubic-bezier(.45,1.45,.49,1.15), transform .7s cubic-bezier(.45,1.45,.49,1.15); }
.is-visible .nv-gui-wrap { opacity: 1; transform: none; transition-delay: .2s; }
@media (max-width: 560px) { .nv-gui-frame { padding: 5px; border-radius: 16px; } .nv-gui-frame .cg-stage { border-radius: 12px; } }