/* ============ 基础 ============ */
:root{
  --ink:#0a0d12;
  --cyan:#8de8dd;
  --pink:#ff9bb8;
  --paper:rgba(12,15,21,.66);
  --line:rgba(141,232,221,.28);
  --txt:#e8f0ee;
  --mono:"JetBrains Mono","Cascadia Code",Consolas,"Courier New",monospace;
  --serif:"Noto Serif SC","Source Han Serif SC","SimSun",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ink);color:var(--txt);overflow:hidden;
  font-family:"Noto Sans SC","Microsoft YaHei",sans-serif;
  letter-spacing:.02em;
}
.mono{font-family:var(--mono)}
.dim{opacity:.55;font-size:.78rem}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ============ 背景 ============ */
.bg{position:fixed;inset:-2%;background-size:cover;background-position:center;
  filter:saturate(.82) contrast(1.04);transition:opacity 1.1s ease;z-index:0}
.bg-a{opacity:0}.bg-b{opacity:0}
.bg.show{opacity:1}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 20% 10%, transparent 30%, rgba(6,8,12,.62) 100%),
    linear-gradient(180deg, rgba(8,10,15,.42), rgba(8,10,15,.28) 40%, rgba(6,8,12,.78));
}
.veil::before{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.09) 3px 4px)}
.veil::after{content:"";position:absolute;inset:0;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
#petals{position:fixed;inset:0;z-index:2;pointer-events:none}

/* ============ 视图切换 ============ */
.view{position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;
  transition:opacity .6s ease, transform .6s ease}
.view.off{opacity:0;transform:scale(1.035);pointer-events:none}

/* ============ 登录卡 ============ */
#viewLogin{align-items:center;justify-content:center}
.access{position:relative;width:min(400px,88vw);padding:2.6rem 2.4rem 2.2rem;
  background:var(--paper);border:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px)}
.c{position:absolute;width:14px;height:14px;border:1px solid var(--cyan)}
.c1{top:-1px;left:-1px;border-width:2px 0 0 2px}
.c2{top:-1px;right:-1px;border-width:2px 2px 0 0}
.c3{bottom:-1px;left:-1px;border-width:0 0 2px 2px}
.c4{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.sys{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--cyan);opacity:.85}
.cursor{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.glitch{position:relative;margin:.9rem 0 1.8rem;font-family:var(--serif);
  font-size:2.6rem;font-weight:700;letter-spacing:.35em;text-indent:.35em}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;letter-spacing:inherit;text-indent:inherit}
.glitch::before{color:var(--cyan);transform:translate(1.5px,-1px);clip-path:inset(0 0 55% 0);
  animation:gl 3.4s infinite steps(2)}
.glitch::after{color:var(--pink);transform:translate(-1.5px,1px);clip-path:inset(60% 0 0 0);
  animation:gl 2.7s infinite reverse steps(2)}
@keyframes gl{0%,92%{opacity:0}94%,100%{opacity:.8}}

.field{margin-bottom:1.25rem}
.field label{display:block;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.18em;color:rgba(232,240,238,.5);margin-bottom:.45rem}
.field input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(232,240,238,.22);
  padding:.5rem .1rem;color:var(--txt);font-family:var(--mono);font-size:.95rem;outline:none;
  transition:border-color .25s, box-shadow .25s}
.field input:focus{border-color:var(--cyan);box-shadow:0 8px 18px -14px var(--cyan)}
.err{min-height:1.1rem;font-size:.76rem;color:var(--pink);margin:.2rem 0 .8rem}
.access.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

.go{width:100%;padding:.8rem 0;border:1px solid var(--cyan);color:var(--cyan);
  font-family:var(--mono);letter-spacing:.4em;text-indent:.4em;font-size:.85rem;
  transition:.25s;position:relative;overflow:hidden}
.go i{font-style:normal;margin-left:.4rem;transition:transform .25s;display:inline-block}
.go:hover{background:var(--cyan);color:#0a1210;box-shadow:0 0 26px -6px var(--cyan)}
.go:hover i{transform:translateX(5px)}
.foot{position:absolute;bottom:1.4rem;font-size:.66rem;letter-spacing:.22em;opacity:.4}

/* ============ 主页 ============ */
.bar{display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 2rem;border-bottom:1px solid rgba(232,240,238,.08);z-index:3}
.tag{font-size:.68rem;letter-spacing:.2em;color:var(--cyan);opacity:.8}
.ghost{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  padding:.45rem .95rem;border:1px solid rgba(232,240,238,.2);margin-left:.6rem;
  transition:.25s;backdrop-filter:blur(6px)}
.ghost:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 18px -8px var(--cyan)}
.ghost.warn:hover{border-color:var(--pink);color:var(--pink);box-shadow:0 0 18px -8px var(--pink)}

.stage{flex:1;display:flex;align-items:center;gap:clamp(1.5rem,5vw,5rem);
  padding:2rem clamp(1.2rem,6vw,6rem);min-height:0}

.who{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1rem}
.v-name{writing-mode:vertical-rl;font-family:var(--serif);font-weight:700;
  font-size:clamp(3.4rem,8.5vh,5.6rem);letter-spacing:.28em;
  text-shadow:0 0 32px rgba(141,232,221,.35)}
.v-sub{writing-mode:vertical-rl;font-size:.66rem;letter-spacing:.34em;opacity:.5;
  border-left:1px solid rgba(232,240,238,.18);padding-left:.7rem}
.v-en{font-size:.64rem;letter-spacing:.24em;opacity:.4;transform:rotate(90deg);white-space:nowrap}

.grid{flex:1;display:grid;gap:1.1rem;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:min-content;max-width:880px}
.card{position:relative;padding:1.3rem 1.4rem;background:var(--paper);
  border:1px solid rgba(232,240,238,.12);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);overflow:hidden;transition:.3s}
.card:hover{transform:translateY(-4px);border-color:var(--line);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.8), 0 0 24px -14px var(--cyan)}
.card .idx{position:absolute;top:-.4rem;right:.2rem;font-family:var(--mono);
  font-size:2.6rem;font-weight:700;color:rgba(141,232,221,.1)}
.card h3{font-family:var(--serif);font-size:1rem;letter-spacing:.3em;
  color:var(--cyan);margin-bottom:.6rem}
.card p{font-size:.86rem;line-height:1.85;opacity:.88}
.card.a{grid-column:span 7}
.card.b{grid-column:span 5}
.card.c{grid-column:span 5}
.card.d{grid-column:span 7}
.clock{font-family:var(--mono);font-size:2.1rem;color:var(--txt);
  text-shadow:0 0 18px rgba(141,232,221,.3);line-height:1.3}
.link{cursor:pointer;transition:.2s;border-bottom:1px dashed rgba(232,240,238,.3);display:inline-block}
.link:hover{color:var(--cyan);border-color:var(--cyan)}

.ticker{border-top:1px solid rgba(232,240,238,.08);padding:.55rem 0;overflow:hidden;
  font-size:.64rem;letter-spacing:.26em;opacity:.45;white-space:nowrap}
.ticker-in{display:inline-block;animation:tick 26s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ toast ============ */
.toast{position:fixed;left:50%;bottom:4.2rem;transform:translate(-50%,14px);z-index:9;
  font-size:.72rem;letter-spacing:.14em;padding:.55rem 1.2rem;color:var(--cyan);
  background:rgba(10,13,18,.85);border:1px solid var(--line);opacity:0;
  pointer-events:none;transition:.35s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ============ 响应式 ============ */
/* ============ 主页补充 ============ */
.card p.pre{white-space:pre-line}
.admin-link{position:fixed;right:1.1rem;bottom:1rem;z-index:5;font-size:.62rem;
  letter-spacing:.2em;opacity:.28;transition:.25s;text-decoration:none;color:var(--txt)}
.admin-link:hover{opacity:.85;color:var(--cyan)}

/* ============ 管理后台 ============ */
body.scrollable{overflow:auto}
#viewDash{overflow-y:auto}
#viewLogin{align-items:center;justify-content:center}
.admin-dash{max-width:920px;width:100%;margin:0 auto;padding:1.6rem 1.2rem 3rem}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.4rem 0}
.stat{padding:1rem 1.2rem;background:var(--paper);border:1px solid rgba(232,240,238,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.stat b{display:block;font-family:var(--mono);font-size:1.7rem;color:var(--cyan);
  text-shadow:0 0 16px rgba(141,232,221,.3)}
.stat span{font-size:.72rem;opacity:.55;letter-spacing:.14em}
.panel{padding:1.4rem;background:var(--paper);border:1px solid rgba(232,240,238,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin-bottom:1.2rem}
.panel h3{font-family:var(--serif);letter-spacing:.3em;color:var(--cyan);font-size:.95rem;margin-bottom:1rem}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1.2rem}
.fgrid .full{grid-column:1/-1}
.panel label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  color:rgba(232,240,238,.5);margin:.55rem 0 .3rem}
.panel input,.panel textarea{width:100%;background:rgba(8,10,15,.5);
  border:1px solid rgba(232,240,238,.16);color:var(--txt);padding:.55rem .7rem;
  font:inherit;font-size:.86rem;outline:none;transition:.2s}
.panel input:focus,.panel textarea:focus{border-color:var(--cyan);box-shadow:0 0 14px -8px var(--cyan)}
.panel textarea{resize:vertical;min-height:74px;line-height:1.7}
.save{margin-top:1.1rem;padding:.7rem 1.8rem;border:1px solid var(--cyan);color:var(--cyan);
  font-family:var(--mono);letter-spacing:.3em;text-indent:.3em;font-size:.8rem;transition:.25s}
.save:hover{background:var(--cyan);color:#0a1210;box-shadow:0 0 22px -6px var(--cyan)}
table.visits{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.72rem}
.visits th,.visits td{padding:.45rem .5rem;text-align:left;
  border-bottom:1px solid rgba(232,240,238,.08)}
.visits th{color:rgba(141,232,221,.7);letter-spacing:.1em;font-weight:400}
.visits td{color:rgba(232,240,238,.75);max-width:0;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
@media (max-width:760px){
  body{overflow:auto}
  .stage{flex-direction:column;align-items:stretch;padding:1.6rem 1.2rem}
  .who{flex-direction:row;justify-content:center;gap:1.4rem}
  .v-name{writing-mode:horizontal-tb;font-size:2.6rem;letter-spacing:.2em}
  .v-sub{writing-mode:horizontal-tb;border-left:0;border-top:1px solid rgba(232,240,238,.18);
    padding:.5rem 0 0}
  .v-en{transform:none}
  .card.a,.card.b,.card.c,.card.d{grid-column:span 12}
  .bar{padding:.9rem 1.2rem}
}