:root { --bg:#040d1f; --card:#0c1d3d; --line:rgba(120,170,255,.24); --text:#e8f1ff; --dim:#93a8cc; --cyan:#22d3ee; --blue:#0a6cff; }
* { box-sizing:border-box; } body { margin:0; color:var(--text); background:var(--bg); font:16px/1.7 "Microsoft YaHei","PingFang SC",sans-serif; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(rgba(47,139,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(47,139,255,.07) 1px,transparent 1px); background-size:48px 48px; }
.wrap { width:min(1180px,calc(100% - 40px)); margin:0 auto; } .wide { width:min(1280px,calc(100% - 24px)); margin:0 auto; } nav, .top { display:flex; justify-content:space-between; align-items:center; height:74px; }
.logo { display:flex; align-items:center; } .logo img { height:42px; width:auto; }
a.admin { color:var(--cyan); text-decoration:none; } .hero { display:grid; grid-template-columns:1fr 230px; gap:40px; align-items:center; }
h1 { font-size:clamp(34px,5vw,58px); line-height:1.18; margin:12px 0; } h1 em { font-style:normal; color:#7ee7ff; }
.lede,.muted { color:var(--dim); } .badge { display:inline-flex; border:1px solid var(--line); color:var(--cyan); border-radius:999px; padding:4px 12px; letter-spacing:.12em; font-size:13px; }
.qrbox { width:280px; margin:0 auto; padding:18px; border-radius:22px; border:1px solid transparent; background:linear-gradient(#071428,#071428) padding-box,linear-gradient(140deg,#6fe7ff,#0a6cff) border-box; text-align:center; display:flex; flex-direction:column; align-items:stretch; gap:12px; }
.qrbox img,.qrbox canvas { width:180px; height:180px; margin:0 auto; background:#fff; border-radius:8px; display:block; } .qrbox form { text-align:left; } .qrbox button { width:100%; margin-top:10px; } label { display:block; margin-top:10px; color:var(--dim); font-size:13px; }
input,textarea,select { width:100%; margin-top:4px; color:var(--text); background:#071428; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font:inherit; }
button,.btn { border:0; border-radius:8px; color:#fff; background:linear-gradient(135deg,#0a6cff,#2f8bff); padding:9px 14px; font:inherit; cursor:pointer; text-decoration:none; }
.sec { text-align:center; margin:48px 0 18px; } .rail { position:relative; } .rail .arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:2; display:grid; place-items:center; line-height:1; padding:0; } #prev { left:0; } #next { right:0; } .scroller { margin:0 58px; }
.arrow { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#081426; color:#fff; font-size:24px; }
.scroller { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:12px; } .scroller::-webkit-scrollbar { display:none; }
.pcard { position:relative; flex:0 0 360px; height:460px; scroll-snap-align:start; display:grid; grid-template-rows:36px 28px 58px 72px 28px 1fr; gap:8px; padding:22px 22px 72px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(155deg,#10274d,#08162c 85%); overflow:hidden; }
.pcard h3 { margin:0; font-size:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .head { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.code { color:#7f9abb; font-size:12px; letter-spacing:.08em; } .sub { margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#c5d7f5; }
.field p { margin:2px 0 0; color:#c2d1e8; font-size:13px; line-height:21px; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; } .field p.one { -webkit-line-clamp:1; } .field p.two { -webkit-line-clamp:2; }
.link { border:0; background:transparent; color:#6ccaff; padding:0; text-align:left; cursor:pointer; } .lock { margin:0; color:var(--dim); font-size:13px; }
.actions { position:absolute; left:22px; right:22px; bottom:18px; display:flex; justify-content:space-between; }
.foot { display:flex; justify-content:center; gap:28px; text-align:center; border-top:1px solid var(--line); margin-top:34px; padding:24px 0 40px; } .foot img { width:108px; height:108px; background:#fff; border-radius:8px; }
.shell { width:min(1100px,calc(100% - 28px)); margin:24px auto; display:grid; grid-template-columns:180px minmax(0,1fr); gap:16px; }
.side,.main,.dialog { background:rgba(10,30,66,.86); border:1px solid var(--line); border-radius:18px; padding:18px; } .side { min-height:540px; display:flex; flex-direction:column; }
.side button { display:block; width:100%; text-align:left; margin-top:8px; background:transparent; color:var(--dim); border:1px solid transparent; } .side button.on { color:#fff; background:rgba(10,108,255,.25); border-color:var(--line); }
.top h1 { margin:0; font-size:30px; letter-spacing:.04em; } .panel { margin-top:16px; } .row { display:grid; grid-template-columns:minmax(180px,1.4fr) 90px 90px auto; gap:14px; align-items:center; padding:14px 16px; margin-top:10px; border:1px solid rgba(120,170,255,.18); border-radius:14px; background:rgba(5,18,42,.72); white-space:pre-line; } .row button { background:transparent; color:var(--text); border:1px solid var(--line); } .row .primary { background:linear-gradient(135deg,#0a6cff,#2f8bff); border:0; } .filters { padding:14px 0; border-bottom:1px solid rgba(120,170,255,.16); } .filters button,.pager button { min-width:74px; } .token { padding:12px; border-radius:10px; background:#071428; word-break:break-all; } .doc { margin-top:16px; padding:18px; border:1px solid rgba(120,170,255,.18); border-radius:16px; background:rgba(5,18,42,.72); } .doc h2 { margin:0 0 8px; font-size:18px; } .doc pre { overflow:auto; padding:12px; border-radius:10px; background:#071428; color:#d7f6ff; } .doc + h2 { margin-top:22px; }
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:end; } .filters label { flex:1 1 140px; font-size:12px; } .pager { display:flex; gap:8px; justify-content:flex-end; align-items:center; color:var(--dim); margin-top:14px; }
dialog { border:0; background:transparent; color:inherit; } dialog::backdrop { background:rgba(2,8,20,.72); } .dialog { width:min(760px,calc(100vw - 32px)); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; } .full { grid-column:1 / -1; } .error { color:#ffb4b4; } [hidden] { display:none !important; }
@media (max-width:800px) { .hero,.shell,.rail { grid-template-columns:1fr; } .pcard { flex-basis:calc(100vw - 78px); } .arrow { display:none; } .grid { grid-template-columns:1fr; } }