:root {
  --themeColor1: rgb(96, 62, 207);
  --themeColor2: rgb(80, 51, 173);
  --customFont: 'Quicksand', monospace;
  --backgroundImage: url('https://i.vgy.me/nRrqd7.jpg');
  --homeImage: url('https://i.vgy.me/EHVyhc.jpg');
  --homeImageSize: cover;
  --backgroundColor: rgba(0, 0, 0, 0.6);
  --backgroundPosition: center;
  --backgroundSize: cover;
  --backgroundRepeat: no-repeat;
  --backgroundBlur: 0px;
  --backgroundOpacity: .5;
  --backgroundCode: rgba(0,0,0,.5);
  --backgroundName: rgba(0,0,0,.5);
  --textMain: #f5f2ff;
  --textMute: #c8c2e6;
  --surface: rgba(17, 13, 30, 0.84);
  --surfaceStrong: rgba(11, 8, 22, 0.92);
  --surfaceLine: rgba(150, 127, 230, 0.2);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--customFont); color: var(--textMain); background: #fff; }
button, input { font: inherit; }
.hidden { display: none !important; }

/* Public error screen */
.public-view {
  min-height: 100vh;
  background: #fff;
  color: #202124;
  display: grid;
  place-items: center;
  padding: 32px 20px;
}
.chrome-error-shell {
  width: min(100%, 680px);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
}
.chrome-error-icon { margin-bottom: 16px; }
.chrome-error-shell h1 {
  margin: 0 0 12px;
  font-size: clamp(1.85rem, 3.4vw, 2.15rem);
  font-weight: 500;
  color: #202124;
}
.chrome-error-shell p,
.chrome-error-shell li { font-size: 0.95rem; color: #5f6368; }
.chrome-error-shell .lead { margin-top: 0; margin-bottom: 18px; }
.chrome-error-shell ul { margin: 10px 0 16px 18px; padding: 0; }
.error-code { margin-top: 22px; color: #5f6368; font-size: 0.9rem; }
.chrome-actions { display: flex; gap: 12px; align-items: center; margin-top: 26px; }
.chrome-reload-btn, .chrome-secondary-btn {
  border: 1px solid #d2d2d2;
  border-radius: 999px;
  min-height: 36px;
  padding: 0 20px;
  background: #fff;
  color: #1a73e8;
  cursor: pointer;
}
.chrome-reload-btn { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.chrome-secondary-btn[disabled] { color: #9aa0a6; background: #f8f9fa; cursor: default; }

/* Concealed login */
.login-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 20;
  overflow: hidden;
}
.login-photo-layer {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(180, 96, 255, 0.2), transparent 20%),
    radial-gradient(circle at 80% 35%, rgba(116, 69, 247, 0.15), transparent 24%),
    linear-gradient(120deg, rgba(255,255,255,0.85), rgba(248,248,255,0.94));
}
.motion-strip {
  position: absolute;
  height: 120px;
  width: 42vw;
  min-width: 260px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(160,92,255,0), rgba(160,92,255,0.22), rgba(160,92,255,0));
  filter: blur(10px);
  opacity: 0.75;
  animation: sweep 11s linear infinite;
}
.strip-a { top: 20%; left: -10%; }
.strip-b { top: 45%; right: -12%; animation-duration: 9s; animation-direction: reverse; }
.strip-c { bottom: 14%; left: 8%; animation-duration: 13s; }
.login-modal-card {
  position: relative;
  z-index: 2;
  width: min(92vw, 380px);
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  padding: 26px 28px 24px;
  box-shadow: 0 16px 55px rgba(38, 16, 74, 0.25);
  border: 1px solid rgba(120, 94, 205, 0.14);
}
.login-logo {
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 2.1rem;
  color: #47206f;
  margin-bottom: 16px;
}
.login-modal-card h2 {
  margin: 0 0 20px;
  text-align: center;
  font-size: 2rem;
  color: #191622;
}
.login-form label { display: block; margin-bottom: 16px; color: #4f4a5c; }
.login-form label span { display: block; font-size: 0.93rem; margin-bottom: 8px; }
.login-form input[type="text"],
.login-form input[type="password"] {
  width: 100%;
  border: 1px solid rgba(155, 99, 226, 0.5);
  min-height: 46px;
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(255,255,255,0.94);
  color: #2a2531;
  outline: none;
}
.login-form input:focus { box-shadow: 0 0 0 3px rgba(159, 89, 255, 0.15); }
.password-field { position: relative; }
.password-field input { padding-right: 46px; }
.icon-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #7b649e;
  cursor: pointer;
}
.remember-row { display: flex !important; align-items: center; gap: 10px; margin-top: 2px; }
.remember-row span { margin: 0 !important; }
.login-submit {
  width: 100%;
  border: 0;
  border-radius: 999px;
  min-height: 48px;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  margin-top: 8px;
  background: linear-gradient(90deg, #b31eff, #55168a);
  transition: transform 180ms var(--ease-standard), box-shadow 180ms var(--ease-standard);
}
.login-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(107, 38, 179, 0.28); }
.login-message { min-height: 20px; margin: 12px 0 0; color: #b0286a; font-size: 0.93rem; }

/* VIONEX 2 — Neutron Nova private interface */
.private-root { min-height: 100vh; background: #080518; }
.app-shell { --nav-width: 248px; position: relative; isolation: isolate; display: grid; grid-template-columns: var(--nav-width) minmax(0,1fr); min-height: 100vh; height: 100vh; overflow: hidden; color: #f7f5ff; }
.app-background { position: fixed; inset: 0; z-index: -3; background-image: var(--backgroundImage); background-position: center; background-size: cover; background-repeat: no-repeat; }
.app-background::after { content: ''; position: absolute; inset: 0; background: linear-gradient(114deg,rgba(6,4,23,.89),rgba(10,6,27,.78) 47%,rgba(10,5,29,.82)); }
.app-background::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 40%,rgba(95,49,177,.14)); }
.starfield { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; opacity: .94; transition: opacity 250ms ease; }
.star-layer { position: absolute; inset: -9% -9%; will-change: transform; transform: translate3d(0,0,0); }
.star-layer-back { animation: star-drift-back 75s linear infinite alternate; }
.star-layer-mid { animation: star-drift-mid 51s linear infinite alternate; }
.star-layer-front { animation: star-drift-front 37s linear infinite alternate; }
.star { position: absolute; display: block; border-radius: 50%; background: #e2dcff; box-shadow: 0 0 7px rgba(200,183,255,.6); animation: star-twinkle var(--twinkle-duration) ease-in-out var(--twinkle-delay) infinite alternate; }
.star.star-violet { background: #ae7bff; box-shadow: 0 0 8px 1px rgba(152,88,255,.8); }
.shooting-star { position: absolute; top: 20%; left: -30%; width: 170px; height: 1px; transform: rotate(-15deg); opacity: 0; background: linear-gradient(90deg,transparent,#e8deff 80%,#fff); filter: drop-shadow(0 0 5px #9777ff); animation: shooting 16s linear infinite; }
.shooting-star-two { top: 66%; animation-delay: 8s; animation-duration: 22s; width: 110px; }
@keyframes star-drift-back { from { transform: translate3d(-1%,.8%,0); } to { transform: translate3d(1.2%,-.7%,0); } }
@keyframes star-drift-mid { from { transform: translate3d(1.5%,-.6%,0); } to { transform: translate3d(-1.6%,.6%,0); } }
@keyframes star-drift-front { from { transform: translate3d(-2%,1%,0); } to { transform: translate3d(2%,-1%,0); } }
@keyframes star-twinkle { from { opacity: .18; filter: brightness(.8); } to { opacity: 1; filter: brightness(1.25); } }
@keyframes shooting { 0%,75% { transform: translate3d(-20vw,0,0) rotate(-15deg); opacity: 0; } 79% { opacity: .8; } 88% { transform: translate3d(135vw,-35vh,0) rotate(-15deg); opacity: 0; } 100% { opacity: 0; } }

.sidebar { height: 100vh; min-height: 0; padding: 25px 15px 19px; border-right: 1px solid rgba(176,141,246,.12); background: rgba(6,4,17,.69); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.brand-block { display: flex; align-items: center; gap: 11px; padding: 7px 11px 27px; }
.brand-glyph { display: grid; place-items: center; font-size: 26px; color: #d9bfff; width: 41px; height: 41px; border-radius: 12px; background: linear-gradient(140deg,#5e3ecf,#2e1e68); box-shadow: 0 0 28px rgba(91,54,193,.4); }
.brand-title { letter-spacing: .15em; font-size: 20px; font-weight: 800; line-height: 1.2; }
.brand-subtitle { color: #aaa2d0; font-size: 9px; font-weight: 700; letter-spacing: .16em; padding-top: 4px; }
.sidebar-label { color: #796d9f; font-size: 10px; letter-spacing: .16em; font-weight: 800; padding: 0 12px; margin: 8px 0 10px; }
.nav-list { display: flex; flex-direction: column; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 0 14px; height: 45px; border: 1px solid transparent; border-radius: 11px; text-align: left; background: transparent; color: #aea5cd; cursor: pointer; font-size: 13px; font-weight: 700; transition: transform 220ms var(--ease-standard),background 180ms ease,color 180ms ease; }
.nav-item svg { flex-shrink: 0; opacity: .9; }
.nav-item:hover { transform: translateX(3px); color: #fff; background: rgba(125,88,222,.1); }
.nav-item.active { background: linear-gradient(90deg,rgba(96,62,207,.29),rgba(96,62,207,.08)); border-color: rgba(149,110,239,.16); color: #f6f1ff; box-shadow: inset 3px 0 0 #8e6af5; }
.nav-divider { height: 1px; background: rgba(170,140,230,.12); margin: 13px 12px 15px; }
.sidebar-bottom { display: grid; gap: 20px; }
.sidebar-state { border: 1px solid rgba(151,117,230,.15); border-radius: 13px; background: rgba(40,26,79,.24); padding: 13px; display: flex; gap: 11px; align-items: center; }
.sidebar-state i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #81d9b0; box-shadow: 0 0 13px #81d9b066; }
.sidebar-state strong { display: block; font-size: 11px; }
.sidebar-state span { display: block; padding-top: 4px; font-size: 10px; color: #a29aba; }
.sidebar-foot { padding: 0 5px; display: flex; justify-content: space-between; color: #8881a7; font-size: 10px; }
.sidebar-foot span { color: #a18ecb; }

.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { z-index: 3; display: flex; align-items: center; justify-content: space-between; min-height: 76px; flex: none; padding: 0 31px; border-bottom: 1px solid rgba(176,141,246,.12); background: rgba(10,7,27,.4); }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 18px; }
.breadcrumb { color: #9f92c5; font-size: 12px; letter-spacing: .02em; }
.breadcrumb span { margin: 0 11px; color: #665486; }
.breadcrumb strong { color: #f7f4ff; font-weight: 700; }
.topbar-date { color: #9f94c3; font-size: 12px; }
.head-sep { width: 1px; height: 24px; background: rgba(187,159,236,.2); }
.private-chip { display: inline-flex; align-items: center; gap: 7px; color: #b4a2e5; font-size: 11px; border: 1px solid rgba(148,113,239,.19); padding: 8px 12px; border-radius: 99px; background: rgba(74,45,147,.12); }
.account-pill { width: 35px; height: 35px; padding: 0 8px; border: 1px solid rgba(176,141,246,.3); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg,#6f4ada,#3f267d); color: white; font-weight: 800; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.content-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 29px 31px 50px; scrollbar-color: rgba(151,116,224,.4) transparent; }
.content-section { display: none; max-width: 1540px; margin: 0 auto; }
.content-section.active { display: block; animation: section-enter 170ms var(--ease-standard); }
@keyframes section-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.eyebrow { color: #b298f7; letter-spacing: .16em; font-weight: 800; font-size: 10px; }
.page-intro { margin-bottom: 25px; }
.page-intro h1, .section-head h1 { font-size: clamp(22px,2.5vw,29px); margin: 8px 0 8px; line-height: 1.25; font-weight: 800; }
.page-intro p, .section-head p { color: #aea5ca; font-size: 12px; margin: 0; line-height: 1.7; }
.title-period { color: #9d71ff; }
.surface { border-radius: 17px; border: 1px solid rgba(165,131,233,.2); background: rgba(14,10,32,.83); box-shadow: 0 8px 28px rgba(0,0,0,.13); }
.overview-hero { position: relative; min-height: 242px; overflow: hidden; display: flex; align-items: center; padding: 30px 37px; background: linear-gradient(103deg,rgba(27,17,61,.95),rgba(27,16,69,.81) 58%,rgba(47,24,93,.7)); }
.overview-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 76% 53%,rgba(119,68,218,.21),transparent 50%); pointer-events: none; }
.hero-content { z-index: 1; max-width: 590px; }
.hero-eyebrow { letter-spacing: .13em; font-size: 10px; font-weight: 800; color: #d3bafa; }
.hero-content h2 { margin: 12px 0 12px; font-size: clamp(25px,2.7vw,36px); font-weight: 800; line-height: 1.16; }
.hero-content h2 em { color: #c4a5ff; font-style: normal; }
.hero-content p { font-size: 12px; color: #bbb0d8; line-height: 1.65; max-width: 440px; margin: 0 0 22px; }
.hero-graphic { position: absolute; inset: 0 0 0 auto; width: 42%; display: grid; place-items: center; pointer-events: none; }
.hero-v { position: relative; z-index: 2; font-size: clamp(90px,13vw,160px); letter-spacing: -.14em; padding-right: .16em; font-weight: 800; color: #d5c0ff; text-shadow: 0 0 65px rgba(128,87,233,.72); transform: rotate(-9deg); }
.hero-ring { position: absolute; width: min(20vw,230px); height: min(20vw,230px); min-width: 130px; min-height: 130px; border: 1px solid rgba(185,146,255,.23); border-radius: 50%; box-shadow: 0 0 0 20px rgba(149,91,253,.06),0 0 0 42px rgba(149,91,253,.04); animation: ring-pulse 10s ease-in-out infinite; }
.orb { position: absolute; width: 20px; height: 20px; border-radius: 50%; filter: blur(11px); background: #8654db; }
.orb-one { left: 17%; top: 13%; }.orb-two { right: 18%; bottom: 13%; }
@keyframes ring-pulse { 50% { transform: scale(1.07); opacity: .67; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 0 17px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; color: #fff; font-weight: 800; font-size: 12px; transition: transform 190ms var(--ease-standard), background-color 190ms ease, box-shadow 190ms ease; text-decoration: none; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: linear-gradient(100deg,#6946d5,#8759e3); box-shadow: 0 6px 21px rgba(93,57,205,.24); }
.btn.primary:hover { box-shadow: 0 9px 24px rgba(93,57,205,.36); }
.btn.subtle { background: rgba(123,90,197,.12); border-color: rgba(165,134,231,.18); color: #dbcefd; }
.btn.outline { background: transparent; border-color: rgba(166,123,240,.29); }
.overview-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin: 18px 0; }
.metric { padding: 18px 18px 16px; min-width: 0; }
.metric-top { color: #b0a4c8; display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 11px; }
.metric-top svg { color: #997ee0; }
.metric-value { font-weight: 800; font-size: 30px; line-height: 1.6; }
.metric-value-text { font-size: 17px; min-height: 48px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metric-foot { color: #857ca5; font-size: 10px; }
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.panel { padding: 22px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 19px; }
.panel-head h2 { margin: 0; font-size: 15px; }
.panel-head p { margin: 6px 0 0; font-size: 11px; color: #a399c2; line-height: 1.5; }
.ghost-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; white-space: nowrap; border: 0; color: #b9a0ff; cursor: pointer; background: transparent; font-size: 11px; font-weight: 700; }
.ghost-link:hover { color: white; }
.compact-list { display: grid; gap: 10px; }
.compact-row { background: rgba(117,88,197,.065); border: 1px solid rgba(153,120,224,.12); padding: 11px 12px; display: flex; gap: 11px; align-items: center; border-radius: 11px; }
.icon-chip { width: 34px; height: 34px; display: grid; place-items: center; color: #c3acff; flex-shrink: 0; border-radius: 10px; background: rgba(125,84,216,.14); }
.compact-row-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.compact-row-body strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-row-body span { color: #a99dca; font-size: 10px; }
.mini-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #9687bf; }
.status-progress.mini-dot { background: #82d8a8; }.status-planned.mini-dot { background: #a47bf7; }.status-done.mini-dot { background: #71ccad; }.status-research.mini-dot { background: #d8b472; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 0 0 25px; }
.updates-layout { grid-template-columns: 1.18fr .82fr; }
.recent-panel { margin-top: 17px; }
.latest-version { font-weight: 800; color: #d4b7ff; font-size: 35px; }
#latest-release-card h3 { font-size: 16px; margin: 5px 0 8px; }
#latest-release-card p { font-size: 12px; white-space: pre-wrap; color: #b9add5; max-height: 160px; overflow: auto; margin: 0 0 16px; }
.latest-actions { display: flex; align-items: center; gap: 10px; }
.empty-state { color: #aba0ca; padding: 20px 15px; text-align: center; border: 1px dashed rgba(146,112,211,.18); background: rgba(125,85,216,.035); border-radius: 12px; font-size: 12px; line-height: 1.55; }
.empty-state strong { display: block; color: #e3d9ff; margin-bottom: 6px; font-size: 13px; }
.empty-state p { margin: 0; }
.status-rows { display: grid; gap: 0; }
.status-rows>div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(165,131,233,.1); font-size: 11px; }
.status-rows>div:last-child { border: none; }
.status-rows span { color: #aaa0c8; }
.status-rows strong { font-weight: 700; text-align: right; }
.status-available { color: #9ae0b4; }.status-pending { color: #e4c38e; }
.release-list { display: grid; gap: 10px; }
.release-row { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid rgba(152,115,215,.14); background: rgba(112,71,200,.06); border-radius: 12px; }
.release-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(130deg, #7350d9,#372469); font-weight: 800; font-size: 19px; }
.release-info { min-width: 0; flex: 1; }
.release-header { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 10px; }
.release-header strong { color: #dec7ff; }
.release-info h3 { margin: 6px 0 3px; font-size: 13px; }
.release-info p { margin: 0; font-size: 11px; color: #ad9fcf; white-space: pre-wrap; line-height: 1.5; overflow-wrap: anywhere; }
.release-actions { display: flex; align-items: center; gap: 4px; }
.muted { color: #988cad; }
.tag { display: inline-flex; border: 1px solid rgba(169,126,238,.17); padding: 5px 9px; border-radius: 99px; font-size: 10px; color: #cbb4ff; background: rgba(106,66,200,.13); font-weight: 800; }
.tag-beta { background: rgba(223,172,84,.1); color: #e6c48e; border-color: rgba(223,172,84,.17); }
.icon-action { border: 1px solid rgba(176,139,243,.15); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #e0d3ff; background: rgba(164,121,225,.075); cursor: pointer; transition: background 180ms ease,transform 180ms ease; }
.icon-action:hover { transform: translateY(-1px); background: rgba(164,121,225,.2); }
.icon-action.danger { color: #efaabf; }
.inline-search { display: flex; align-items: center; gap: 8px; padding: 0 11px; min-height: 35px; border: 1px solid rgba(159,123,222,.2); background: rgba(7,4,21,.25); border-radius: 10px; }
.inline-search svg { color: #afa0d3; }
.inline-search input { border: none; outline: none; background: transparent; color: #f4f1ff; font-size: 11px; min-width: 145px; }
.inline-search input::placeholder { color: #887daa; }
.modules-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.roadmap-notice { color: #aca1c8; background: rgba(141,102,225,.08); border: 1px solid rgba(169,124,239,.19); border-radius: 12px; padding: 14px 16px; font-size: 11px; margin-bottom: 20px; }
.roadmap-notice strong { color: #e2d4ff; }
.module-card { display: flex; flex-direction: column; min-height: 225px; padding: 21px; }
.module-card-top { display: flex; justify-content: space-between; align-items: center; }
.module-icon-large { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 12px; font-size: 23px; color: #c6acff; background: rgba(108,68,208,.19); }
.module-card h3 { margin: 17px 0 7px; font-size: 15px; }
.module-card p { margin: 0; font-size: 11px; line-height: 1.65; color: #a99ec7; flex: 1; }
.module-footer { margin-top: 18px; display: flex; align-items: end; justify-content: space-between; gap: 9px; }
.module-status-select { display: grid; gap: 4px; }
.module-status-select span { font-size: 10px; color: #a399c2; }
.module-status-select select { background: rgba(26,19,56,.93); color: #e2d6ff; border: 1px solid rgba(153,112,219,.22); padding: 8px 11px; border-radius: 8px; font-size: 11px; }
.tag.status-progress { color: #9bdfb8; background: rgba(91,190,150,.1); }.tag.status-research { color: #e2c68b; }.tag.status-done { color: #9adfbd; }
.files-empty { padding: 55px 28px; display: flex; align-items: center; flex-direction: column; text-align: center; }
.files-glyph { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: 16px; border-radius: 20px; background: linear-gradient(130deg, rgba(127,84,219,.29),rgba(84,55,151,.12)); color: #d3b9ff; }
.files-empty h2 { font-size: 17px; margin: 0 0 9px; }
.files-empty p { max-width: 500px; margin: 0 0 24px; color: #b1a3ce; font-size: 12px; line-height: 1.7; }
.security-note { display: flex; align-items: start; gap: 14px; background: rgba(93,161,133,.065); border: 1px solid rgba(93,161,133,.15); padding: 16px; border-radius: 12px; }
.security-note-icon { color: #9addb9; }
.security-note strong { font-size: 13px; }
.security-note p { font-size: 11px; color: #b4a9ce; margin: 6px 0 0; line-height: 1.7; }
.hint { font-size: 11px; line-height: 1.65; color: #9185b3; margin: 16px 0 0; }
.logout-btn { margin-top: 24px; }
.settings-list { display: grid; gap: 8px; }
.toggle-row, .setting-slider { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid rgba(158,126,220,.11); border-radius: 12px; background: rgba(145,93,224,.045); padding: 15px; }
.toggle-row strong, .setting-slider strong { font-size: 12px; }
.toggle-row p, .setting-slider p { margin: 5px 0 0; color: #a99bc9; font-size: 11px; }
.toggle { position: relative; flex-shrink: 0; width: 50px; height: 28px; border-radius: 99px; background: rgba(130,119,158,.25); border: 0; cursor: pointer; transition: background 250ms ease; }
.toggle span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.24); transition: transform 260ms var(--ease-standard); }
.toggle.on { background: linear-gradient(100deg,#5f3ccf,#9667f5); }
.toggle.on span { transform: translateX(22px); }
.range-control { display: flex; align-items: center; gap: 9px; color: #d7c9fc; font-size: 11px; }
.range-control input { accent-color: #a37af0; width: 104px; cursor: pointer; }
.modal-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(3,2,13,.72); backdrop-filter: blur(3px); }
.modal-dialog { width: min(100%,540px); max-height: min(90vh,740px); overflow-y: auto; border-radius: 18px; border: 1px solid rgba(185,144,244,.26); padding: 25px; background: linear-gradient(145deg,rgba(24,16,55,.99),rgba(11,7,26,.99)); box-shadow: 0 25px 90px rgba(0,0,0,.56); animation: modal-enter 250ms ease-out; }
@keyframes modal-enter { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
.modal-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.modal-top h2 { margin: 7px 0 0; font-size: 19px; }
.modal-form { display: grid; gap: 14px; }
.modal-form label { display: flex; flex-direction: column; gap: 7px; font-size: 11px; color: #d0c1f0; font-weight: 700; }
.modal-form input, .modal-form textarea, .modal-form select { background: #110b29; color: #fff; border: 1px solid rgba(161,125,231,.28); border-radius: 9px; outline: none; padding: 12px; width: 100%; resize: vertical; font-size: 12px; }
.modal-form input:focus, .modal-form textarea:focus, .modal-form select:focus { border-color: #a58af1; box-shadow: 0 0 0 3px rgba(151,98,247,.1); }
.modal-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; }
.form-info { margin: 0; font-size: 10px; line-height: 1.5; color: #a89bc9; }
.modal-error { min-height: 18px; color: #f4a9bd; margin: 0; font-size: 11px; }
.toast-stack { position: fixed; bottom: 20px; right: 20px; z-index: 40; display: grid; gap: 8px; }
.toast { padding: 13px 18px; min-width: 200px; background: rgba(30,18,68,.96); border: 1px solid #7755c4; border-radius: 11px; font-size: 12px; box-shadow: 0 15px 30px rgba(0,0,0,.35); animation: toast-enter 240ms ease-out; }
.toast-error { border-color: #c45874; }.toast-success { border-color: #64a589; }
@keyframes toast-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.motion-disabled *, .motion-disabled *::before, .motion-disabled *::after, .stars-paused .starfield *, .stars-paused .starfield *::before { animation: none !important; transition-duration: 0s !important; }
#mobile-menu { display: none; }
@media (max-width: 1180px) {
  .app-shell { --nav-width: 222px; }
  .sidebar { padding-inline: 10px; }.brand-block { padding-left: 7px; }
  .content-scroll { padding: 23px 20px 35px; }
  .topbar { padding-inline: 20px; }
  .overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modules-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; z-index: 10; width: 245px; left: 0; top: 0; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 10px 0 60px rgba(0,0,0,.5); }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .workspace { height: 100vh; }
  .topbar { min-height: 65px; }.topbar-date,.private-chip,.head-sep { display: none; }
  #mobile-menu { display: grid; }.content-scroll { padding: 20px 14px 33px; }
  .overview-hero { padding: 24px; }.hero-graphic { opacity: .24; width: 55%; }
  .two-col-grid,.updates-layout,.modules-grid { grid-template-columns: 1fr; }
  .overview-metrics { gap: 9px; }.metric { padding: 14px; }
  .section-head { align-items: start; flex-direction: column; }
  .panel { padding: 17px; }
}
@media (max-width: 480px) {
  .page-intro h1 { font-size: 23px; }
  .overview-hero h2 { font-size: 26px; }
  .overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-value { font-size: 24px; }.panel-head { flex-wrap: wrap; }
  .release-row { flex-wrap: wrap; }.release-actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Graceful font fallback when Google Fonts is blocked; original Neutron token stays untouched. */
body { font-family: 'Quicksand','Segoe UI',Arial,sans-serif; }
.app-background { background-image: var(--backgroundImage), radial-gradient(ellipse at 74% 8%,#4c2488 0%,transparent 48%), radial-gradient(ellipse at 12% 84%,#291367 0%,#09051b 62%); }
.app-background::after { background: linear-gradient(114deg,rgba(7,4,22,.81),rgba(9,5,25,.72) 47%,rgba(8,5,25,.74)); }

/* VIONEX 3.0 · Nova motion port, adapted from the supplied motion reference */
.vionex-cosmos { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.starfield.canvas-ready .star-layer,
.starfield.canvas-ready .shooting-star { display:none; }
.app-background { animation: vionex-cosmic-drift 70s ease-in-out infinite alternate; transform: scale(1.035); transform-origin:center; }
@keyframes vionex-cosmic-drift { from { transform:scale(1.035) translate3d(-.25%,0,0); } to { transform:scale(1.065) translate3d(.35%,-.35%,0); } }
.brand-glyph { animation: vionex-orbit-breathe 5s ease-in-out infinite; }
@keyframes vionex-orbit-breathe { 0%,100% { opacity:.75; transform:scale(.96); } 50% { opacity:1; transform:scale(1.1); } }
.nav-item { transition:transform 250ms var(--ease-standard),background-color 200ms ease,border-color 200ms ease; }
.nav-item:hover { transform:translateX(3px); }
.content-section.active { animation:vionex-section-enter 170ms ease-out both; }
@keyframes vionex-section-enter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
.surface { transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; }
.surface:hover { border-color:rgba(154,125,255,.29); }
.metric:hover, .module-card:hover { transform:translateY(-2px); }
.btn, .icon-action { transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease; }
.btn:not(:disabled):hover, .icon-action:not(:disabled):hover { transform:translateY(-2px); }
.modal-dialog { animation:vionex-modal-enter 250ms var(--ease-standard) both; }
@keyframes vionex-modal-enter { from { opacity:0; transform:translateY(-6px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
.login-modal-card { animation:vionex-modal-enter 250ms var(--ease-standard) both; }
.toast { animation:vionex-toast-enter 250ms var(--ease-standard) both; }
@keyframes vionex-toast-enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.star-tools { display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:2px 3px 4px; }
.star-tools small { color:#b7abdb; font-size:11px; }
.btn.mini { padding:6px 10px; min-height:31px; font-size:11px; white-space:nowrap; }
.download-link { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.release-asset-line { margin-top:8px!important; font-size:11px!important; color:#bda8f4!important; overflow-wrap:anywhere; }
.checksum { font-size:10px; overflow-wrap:anywhere; color:#aaa0d1; }
.file-release-row .release-actions { gap:7px; align-items:center; }
.remove-asset { color:#f3adc8; }
@media (prefers-reduced-motion: reduce) {
  .app-background { animation:none!important; transform:none!important; }
  .brand-glyph { animation:none!important; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
.motion-disabled .app-background,.motion-disabled .brand-glyph { animation:none!important; }
.motion-disabled *, .motion-disabled *::before, .motion-disabled *::after { animation:none!important; transition:none!important; }