:root{
  --bg:#07111f;
  --panel:#0b1728;
  --panel2:#091522;
  --line:#1d3048;
  --line2:#28415d;
  --text:#dce8f7;
  --muted:#7890aa;
  --blue:#4ca8ff;
  --green:#31d18b;
  --red:#ff667d;
  --gold:#f4c84a;
}

*{
  box-sizing:border-box;
}

html{
  background:var(--bg);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;
}

button,
input,
select,
textarea{
  font:inherit;
}

.hidden{
  display:none!important;
}

.top{
  height:64px;
  background:
    linear-gradient(115deg,#07111f 0%,#0b1730 48%,#11102c 100%);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  position:sticky;
  top:0;
  z-index:20;
  isolation:isolate;
  overflow:hidden;
  box-shadow:0 0 24px rgba(61,116,255,.16);
}

.top::before{
  content:"";
  position:absolute;
  inset:-140%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 42%,rgba(47,155,255,.22),transparent 24%),
    radial-gradient(circle at 77% 58%,rgba(158,78,255,.2),transparent 21%),
    radial-gradient(circle at 48% 20%,rgba(54,225,207,.12),transparent 17%);
  filter:blur(12px);
  animation:v6Nebula 18s ease-in-out infinite alternate;
}

.top::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.46;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(95,185,255,.75) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(211,155,255,.7) 0 1px,transparent 1.5px);
  background-size:83px 67px,127px 91px,181px 113px;
  background-position:12px 5px,47px 22px,89px 3px;
  animation:v6Stars 28s linear infinite;
}

.top > *{
  position:relative;
  z-index:1;
}

.brand{
  font-weight:900;
  letter-spacing:.5px;
}

.brand span.v6-live{
  color:transparent;
  background:linear-gradient(110deg,#75e9ff 10%,#d5b7ff 38%,#ffd56a 58%,#75e9ff 88%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 0 12px rgba(113,193,255,.52);
  animation:v6Shimmer 5s linear infinite;
}

@keyframes v6Nebula{
  0%{transform:translate3d(-5%,-3%,0) rotate(0deg) scale(1);}
  50%{transform:translate3d(4%,3%,0) rotate(7deg) scale(1.05);}
  100%{transform:translate3d(-2%,5%,0) rotate(-5deg) scale(1.1);}
}

@keyframes v6Stars{
  from{background-position:12px 5px,47px 22px,89px 3px;}
  to{background-position:95px 72px,-80px 113px,220px -74px;}
}

@keyframes v6Shimmer{
  from{background-position:200% 0;}
  to{background-position:-20% 0;}
}

@media(prefers-reduced-motion:reduce){
  .top::before,
  .top::after,
  .brand span.v6-live{
    animation:none;
  }
}

.topright{
  font-size:12px;
  color:#8fa6c0;
  display:flex;
  gap:10px;
  align-items:center;
}

.shell{
  display:grid;
  grid-template-columns:250px 1fr;
  min-height:calc(100vh - 64px);
}

.side{
  background:var(--panel2);
  border-right:1px solid var(--line);
  padding:12px;
}

.nav{
  padding:12px 13px;
  border-radius:8px;
  margin-bottom:5px;
  color:#9fb2c7;
  cursor:pointer;
  user-select:none;
}

.nav:hover,
.nav.active{
  background:#102238;
  color:#fff;
}

.main{
  padding:14px;
  max-width:1520px;
  width:100%;
  margin:0 auto;
}

.section{
  display:none;
}

.section.active{
  display:block;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}

.card + .card{
  margin-top:12px;
}

.topgap{
  margin-top:12px;
}

.hd{
  padding:13px 15px;
  border-bottom:1px solid var(--line);
  font-weight:800;
}

.hdrow{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.body{
  padding:14px;
}

.grid4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.metric{
  background:#081422;
  border:1px solid #17283d;
  border-radius:8px;
  padding:11px;
}

.metric .k{
  font-size:11px;
  color:var(--muted);
}

.metric .v{
  font-size:20px;
  font-weight:900;
  margin-top:5px;
}

.up{
  color:var(--green);
}

.down{
  color:var(--red);
}

.goldtxt{
  color:var(--gold);
}

.muted{
  color:var(--muted);
}

.small{
  font-size:12px;
}

.btn{
  background:#13263d;
  color:var(--text);
  border:1px solid var(--line2);
  border-radius:7px;
  padding:8px 11px;
  cursor:pointer;
}

.btn:hover{
  background:#19314d;
}

.btn.green{
  border-color:#237b5b;
}

.btn.red{
  border-color:#8d3c4b;
}

.btn.gold{
  border-color:#8d7229;
}

.btn.full{
  width:100%;
}

.toolbar{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.tablewrap{
  overflow:auto;
}

table{
  width:100%;
  border-collapse:collapse;
}

th,
td{
  padding:10px;
  border-bottom:1px solid #17283d;
  text-align:left;
  white-space:nowrap;
}

th{
  font-size:11px;
  color:#8299b3;
  font-weight:700;
}

tbody tr:hover{
  background:#0f2137;
}

.pill{
  display:inline-block;
  padding:3px 7px;
  border-radius:999px;
  background:#13263d;
  font-size:11px;
}

.notice{
  padding:10px 12px;
  background:#081422;
  border:1px solid #17283d;
  border-radius:8px;
  margin-top:8px;
}

.notice:first-child{
  margin-top:0;
}

.stockhead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.bigprice{
  font-size:30px;
  font-weight:900;
  margin-top:5px;
}

.chartbox{
  height:390px;
  padding:10px;
}

.chart{
  width:100%;
  height:100%;
  display:block;
}

.periods{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:10px;
}

.formgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:10px;
}

.field label{
  font-size:12px;
  color:#8da4bd;
}

.field input,
.field select,
.field textarea{
  width:100%;
  background:#081422;
  color:#e7f0fb;
  border:1px solid #29415d;
  border-radius:6px;
  padding:9px;
}

.field textarea{
  min-height:74px;
  resize:vertical;
}

.wide{
  grid-column:1/-1;
}

.pos{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:11px 0;
  border-bottom:1px solid #17283d;
}

.pos > span:last-child{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.pos:last-child{
  border-bottom:0;
}

.log{
  max-height:310px;
  overflow:auto;
}

.loginwrap{
  max-width:440px;
  margin:55px auto;
  padding:0 12px;
}

.loginbrand{
  text-align:center;
  margin-bottom:16px;
}

.loginbrand h1{
  margin:0 0 8px;
}

.loginbrand p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.tabs{
  display:flex;
  gap:7px;
  margin-bottom:12px;
}

.tabs .btn{
  flex:1;
}

.hint{
  color:var(--muted);
  font-size:12px;
  margin-bottom:0;
}

.footer{
  padding:16px;
  text-align:center;
  color:#657c96;
  font-size:12px;
  border-top:1px solid var(--line);
  background:#081522;
}

.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  background:#17324d;
  border:1px solid #315271;
  padding:10px 14px;
  border-radius:8px;
  z-index:50;
}

.usercard{
  background:#081422;
  border:1px solid #17283d;
  border-radius:9px;
  padding:12px;
  margin-top:9px;
}

.split{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

@media(max-width:920px){

  .shell{
    grid-template-columns:1fr;
  }

  .side{
    border-right:0;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:5px;
    overflow:auto;
    padding:8px;
  }

  .nav{
    min-width:max-content;
    margin:0;
  }

  .grid4{
    grid-template-columns:1fr 1fr;
  }

  .formgrid{
    grid-template-columns:1fr;
  }

  .wide{
    grid-column:auto;
  }

  .chartbox{
    height:320px;
  }
}

@media(max-width:560px){

  .top{
    padding:0 10px;
  }

  .brand{
    font-size:14px;
  }

  .topright{
    font-size:11px;
  }

  .main{
    padding:9px;
  }

  .body{
    padding:11px;
  }

  .grid4{
    gap:7px;
  }

  .metric{
    padding:9px;
  }

  .metric .v{
    font-size:17px;
  }

  .stockhead,
  .split{
    flex-direction:column;
  }

  .bigprice{
    font-size:26px;
  }

  .chartbox{
    height:280px;
  }

  th,
  td{
    padding:8px;
  }

  .btn{
    padding:8px 9px;
  }

  .footer{
    font-size:11px;
  }
}

/* V6 surface system: glass panels, restrained glow and tactile controls. */
:root{
  --shadow-deep:0 18px 45px rgba(0,0,0,.28);
  --shadow-blue:0 0 0 1px rgba(76,168,255,.08),0 12px 30px rgba(9,34,72,.32);
  --surface-glow:rgba(76,168,255,.18);
}

html{
  scroll-behavior:smooth;
}

body{
  background:
    radial-gradient(circle at 8% -10%,rgba(62,132,255,.18),transparent 34%),
    radial-gradient(circle at 95% 12%,rgba(131,65,226,.14),transparent 31%),
    radial-gradient(circle at 50% 100%,rgba(20,159,180,.08),transparent 38%),
    var(--bg);
  background-attachment:fixed;
}

.shell{
  background:linear-gradient(180deg,rgba(4,12,25,.32),rgba(7,17,31,.02));
}

.side{
  background:linear-gradient(180deg,rgba(10,24,43,.92),rgba(6,17,31,.88));
  box-shadow:inset -1px 0 rgba(113,184,255,.08),12px 0 34px rgba(0,0,0,.12);
}

.nav{
  border:1px solid transparent;
  transition:background .24s ease,border-color .24s ease,color .24s ease,transform .24s ease;
}

.nav:hover{
  transform:translateX(3px);
  border-color:rgba(76,168,255,.24);
}

.nav.active{
  background:linear-gradient(110deg,rgba(35,86,145,.72),rgba(37,44,103,.72));
  border-color:rgba(105,190,255,.34);
  box-shadow:0 0 20px rgba(54,131,229,.18),inset 0 1px rgba(255,255,255,.08);
}

.main{
  padding:20px;
}

.section.active{
  animation:v6SurfaceIn .36s cubic-bezier(.2,.8,.2,1) both;
}

.card{
  background:
    linear-gradient(145deg,rgba(15,34,58,.94),rgba(7,20,35,.96));
  border-color:rgba(86,139,190,.22);
  box-shadow:var(--shadow-blue),var(--shadow-deep);
  backdrop-filter:blur(12px);
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease;
}

.card:hover{
  border-color:rgba(91,177,255,.34);
  box-shadow:0 0 0 1px rgba(76,168,255,.08),0 18px 42px rgba(0,0,0,.32),0 0 26px rgba(44,112,211,.1);
}

.hd{
  background:linear-gradient(90deg,rgba(36,83,137,.22),transparent 72%);
  letter-spacing:.2px;
}

.metric,
.notice,
.usercard{
  background:linear-gradient(145deg,rgba(15,35,59,.8),rgba(6,18,32,.78));
  border-color:rgba(79,137,194,.22);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}

.btn{
  position:relative;
  overflow:hidden;
  border-color:rgba(102,158,211,.34);
  background:linear-gradient(135deg,rgba(27,58,91,.96),rgba(15,35,59,.96));
  box-shadow:0 5px 14px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.06);
  transition:transform .18s ease,background .24s ease,border-color .24s ease,box-shadow .24s ease,filter .24s ease;
}

.btn:hover{
  background:linear-gradient(135deg,rgba(38,84,128,.98),rgba(19,47,78,.98));
  border-color:rgba(110,193,255,.58);
  box-shadow:0 8px 20px rgba(0,0,0,.24),0 0 17px rgba(72,157,255,.16),inset 0 1px rgba(255,255,255,.09);
  filter:saturate(1.12);
  transform:translateY(-1px);
}

.btn:active,
.btn.is-pressed{
  transform:translateY(1px) scale(.975);
  filter:brightness(1.2);
}

.btn.gold{
  border-color:rgba(244,200,74,.66);
  box-shadow:0 0 17px rgba(244,200,74,.1),inset 0 1px rgba(255,255,255,.07);
}

.btn.red{
  border-color:rgba(255,102,125,.58);
  box-shadow:0 0 17px rgba(255,102,125,.08),inset 0 1px rgba(255,255,255,.06);
}

.btn:focus-visible,
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:2px solid rgba(92,191,255,.7);
  outline-offset:2px;
}

.field input,
.field select,
.field textarea{
  background:rgba(4,15,29,.72);
  border-color:rgba(83,139,190,.34);
  transition:border-color .24s ease,box-shadow .24s ease,background .24s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  background:rgba(7,23,42,.9);
  border-color:rgba(91,188,255,.7);
  box-shadow:0 0 0 4px rgba(76,168,255,.1),0 0 22px rgba(76,168,255,.12);
}

.button-ripple{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  pointer-events:none;
  background:rgba(204,239,255,.58);
  transform:translate(-50%,-50%) scale(0);
  animation:v6ButtonRipple .62s ease-out forwards;
}

.toast{
  background:linear-gradient(135deg,rgba(26,67,105,.96),rgba(19,34,78,.96));
  border-color:rgba(111,202,255,.44);
  box-shadow:0 12px 34px rgba(0,0,0,.32),0 0 20px rgba(75,157,255,.18);
  animation:v6ToastIn .28s ease-out both;
}

@keyframes v6SurfaceIn{
  from{opacity:0;transform:translateY(8px) scale(.995);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes v6ButtonRipple{
  to{opacity:0;transform:translate(-50%,-50%) scale(18);}
}

@keyframes v6ToastIn{
  from{opacity:0;transform:translateY(10px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}

@media(max-width:560px){
  .main{
    padding:12px;
  }

  .card{
    box-shadow:0 8px 24px rgba(0,0,0,.24);
  }

  .btn:hover{
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .section.active,
  .button-ripple,
  .toast{
    animation:none;
  }

  .nav,
  .card,
  .btn,
  .field input,
  .field select,
  .field textarea{
    transition:none;
  }
}