:root{
  --bg:#05070B; --text:#E9F2FF; --muted:#A6B0C2;
  --ghost:#7AF5FF; --uv:#A96BFF; --lime:#A6FF4D; --crimson:#FF477E;
  --hairline: rgba(255,255,255,.12);
}

html,body{height:100%;background:var(--bg);color:var(--text);}

/* Stage background */
.ghost-stage{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  /* Expanded multi-layer glow that covers the full viewport and feels present across the page */
  background:
    radial-gradient(1300px 900px at 10% 0%, rgba(122,245,255,.10), transparent 55%),
    radial-gradient(1300px 900px at 90% 100%, rgba(169,107,255,.09), transparent 55%),
    radial-gradient(900px 900px at 50% 30%, rgba(166,255,77,.05), transparent 60%),
    radial-gradient(900px 900px at 50% 70%, rgba(122,245,255,.06), transparent 60%),
    radial-gradient(1200px 1000px at -10% 100%, rgba(122,245,255,.06), transparent 60%),
    radial-gradient(1200px 1000px at 110% 0%, rgba(169,107,255,.06), transparent 60%),
    #05070B;
}
.ghost-sweep{
  position:absolute; inset:-30%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(122,245,255,.08) 90deg, transparent 180deg);
  filter: blur(60px) saturate(110%);
  animation: sweep 18s linear infinite;
  opacity:.85;
}
/* Soft drifting mist over the whole page to avoid the effect feeling limited to a section */
.ghost-stage::after{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(800px 600px at 25% 80%, rgba(255,255,255,.04), transparent 60%),
    radial-gradient(800px 600px at 75% 20%, rgba(255,255,255,.035), transparent 60%);
  filter: blur(60px);
  animation: sweep 32s linear infinite reverse;
}
@keyframes sweep{to{transform:rotate(360deg)}}

/* Nav */
.nav-neo{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02) 60%, transparent);
  backdrop-filter: blur(8px);
}
.nav-neo .group{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.nav-neo a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px;}
.nav-neo a.active, .nav-neo a:hover{color:var(--text); background:rgba(255,255,255,.06); box-shadow: 0 0 40px rgba(169,107,255,.35);} /* ultra glow */
.chip-user{font-size:.85rem; color:var(--muted);}

/* Cards */
.card-ghost{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:18px; box-shadow: 0 10px 40px rgba(0,0,0,.4);
  backdrop-filter: blur(12px) saturate(130%);
  position:relative; overflow:hidden;
}
.card-ghost:before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,.15), transparent 30% 70%, rgba(255,255,255,.08));
  opacity:.25; mix-blend-mode:screen;
}
.holo-line{height:1px; background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0)); margin:12px 0;}

/* Layout */
.page-main{padding:18px;}
.page-container{max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:16px;}

/* Inputs */
.input-neo{
  width:100%; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12); color:var(--text);
  padding:10px 12px; border-radius:12px; outline:none;
  transition: border .2s, box-shadow .2s, transform .05s;
}
.input-neo:focus{
  border-color: rgba(122,245,255,.6);
  box-shadow: 0 0 0 4px rgba(122,245,255,.12), 0 0 40px rgba(169,107,255,.35);
}
.label-ghost{font-size:.9rem; color:var(--muted); margin-bottom:6px; display:block;}

/* Buttons */
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, rgba(122,245,255,.18), rgba(122,245,255,.08));
  color:#001014; border:1px solid rgba(122,245,255,.6);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  box-shadow: 0 0 24px rgba(122,245,255,.45), 0 0 2px rgba(122,245,255,.9);
  transition: transform .05s ease, filter .2s ease;
}
.btn-ghost:hover{filter:brightness(1.08)}
.btn-ghost:active{transform:translateY(1px)}
.btn-uv{
  background:linear-gradient(180deg, rgba(169,107,255,.22), rgba(169,107,255,.10));
  border:1px solid rgba(169,107,255,.6); color:#0D0718; box-shadow: 0 0 40px rgba(169,107,255,.35);
}

/* Chips */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); font-size:.85rem; color:var(--muted);
}
.chip.buy{border-color: rgba(166,255,77,.45); box-shadow:0 0 16px rgba(166,255,77,.25);} 
.chip.sell{border-color: rgba(255,71,126,.45); box-shadow:0 0 16px rgba(255,71,126,.25);} 
.chip.hold{border-color: rgba(122,245,255,.35); box-shadow:0 0 16px rgba(122,245,255,.2);} 

/* Table */
.table-ghost{ width:100%; border-collapse:separate; border-spacing:0 10px; }
.table-ghost thead th{
  text-align:left; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  padding:0 12px;
}
.table-ghost tbody tr{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 40px rgba(0,0,0,.4); backdrop-filter:blur(8px);
}
.table-ghost td{ padding:12px; }
.table-ghost tbody tr:hover{outline:1px solid rgba(122,245,255,.35);} 

/* KPI */
.kpi{
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  padding:8px 10px; border-radius:10px; display:inline-flex; gap:8px; align-items:baseline;
}
.kpi .v{font-size:1.05rem;}
.kpi.up{box-shadow:0 0 18px rgba(166,255,77,.25);} 
.kpi.down{box-shadow:0 0 18px rgba(255,71,126,.25);} 

/* Flash messages themed */
.flash{ padding:.6rem .8rem; border-radius:12px; margin:.4rem 0; color:#001014; font-weight:600; }
.flash.success{ background:rgba(166,255,77,.25); border:1px solid rgba(166,255,77,.45); }
.flash.error{ background:rgba(255,71,126,.25); border:1px solid rgba(255,71,126,.45); }
.flash.info{ background:rgba(122,245,255,.25); border:1px solid rgba(122,245,255,.45); }

/* Scope default element styles so existing pages auto-upgrade */
.neo-scope input[type="text"],
.neo-scope input[type="email"],
.neo-scope input[type="password"],
.neo-scope input[type="number"],
.neo-scope input[type="search"],
.neo-scope input[type="url"],
.neo-scope input[type="tel"],
.neo-scope select,
.neo-scope textarea{ /* apply input style */
  width:100%; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12); color:var(--text);
  padding:10px 12px; border-radius:12px; outline:none;
  transition: border .2s, box-shadow .2s, transform .05s;
}
.neo-scope input:focus,
.neo-scope select:focus,
.neo-scope textarea:focus{
  border-color: rgba(122,245,255,.6);
  box-shadow: 0 0 0 4px rgba(122,245,255,.12), 0 0 40px rgba(169,107,255,.35);
}

.neo-scope button,
.neo-scope input[type="submit"],
.neo-scope .btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, rgba(122,245,255,.18), rgba(122,245,255,.08));
  color:#001014; border:1px solid rgba(122,245,255,.6);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
  box-shadow: 0 0 24px rgba(122,245,255,.45), 0 0 2px rgba(122,245,255,.9);
  transition: transform .05s ease, filter .2s ease;
}
.neo-scope button:hover, .neo-scope .btn:hover{filter:brightness(1.08)}
.neo-scope button:active, .neo-scope .btn:active{transform:translateY(1px)}

/* Spinner overlay theme */
#spinner-overlay { position: fixed; inset: 0; background: rgba(5,7,11,0.65); display: none; align-items: center; justify-content: center; z-index: 1000; }
#spinner-box { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color: var(--text); padding: 18px 22px; border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.45); display: flex; flex-direction: column; align-items: center; backdrop-filter: blur(12px); }
.spinner { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,.18); border-top-color: var(--ghost); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 10px; }
#spinner-msg { color: var(--muted); font-size: 14px; text-align: center; max-width: 260px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Utility */
.muted{ color:var(--muted); }
.grid-cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:14px; }

/* Control center layouts */
.control-grid{ display:grid; grid-template-columns: 2fr 1fr; gap:16px; align-items:start; }
@media (max-width: 980px){ .control-grid{ grid-template-columns: 1fr; } }
.stack{ display:flex; flex-direction:column; gap:12px; }

/* Form grid: tidy inputs into columns */
.control-form{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
@media (max-width: 820px){ .control-form{ grid-template-columns: 1fr; } }
.control-form > label{ display:flex; flex-direction:column; gap:6px; }
.control-form > .full, .control-form > fieldset, .control-form > details, .control-form > .row, .control-form > .actions{ grid-column: 1 / -1; }
.control-form h3{ grid-column: 1 / -1; margin: 0 0 6px; font-weight: 600; }

/* Button bars and small variants */
.btn-bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.btn-sm{ padding:6px 10px !important; border-radius:10px !important; font-size:.9rem !important; }
.btn-plain{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.2) !important; color:var(--text) !important; box-shadow:none !important; }
.muted-kv{ color:var(--muted); font-size:.9rem; }

/* Details/summary polish */
details.card-ghost{ padding:16px; }
details.card-ghost summary{ cursor:pointer; font-weight:600; color:var(--text); outline:none; }
details.card-ghost[open]{ box-shadow: 0 0 0 1px rgba(122,245,255,.25) inset; }