/* ============================================================
   BlueTime 学习站 · 共享样式  —— 蓝白·雷姆娘风格
   换全站风格只改这一个文件
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap");

:root{
  --bg:#e7f1ff;
  --bg-2:#d4e6ff;
  --white:#ffffff;
  --ink:#1b3358;        /* 深蓝墨 */
  --muted:#5f78a0;
  --primary:#2e8fe0;    /* 雷姆蓝(更亮更饱和) */
  --primary-deep:#1a5fb4;
  --primary-bright:#5cc2f5;/* 雷姆发丝高光蓝 */
  --primary-soft:#a8cdf5;
  --accent:#ef9bc2;     /* 蝴蝶结粉 */
  --accent-deep:#d36e9b;
  --line:#cbdef7;
  --code-bg:#15223e;
  --code-fg:#e6eefc;
  --shadow:0 18px 42px -22px rgba(26,95,180,.6);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(130% 90% at 100% 0%, #cfe6ff 0%, rgba(207,230,255,0) 55%),
    radial-gradient(120% 80% at 0% 0%, #dcebff 0%, rgba(220,235,255,0) 52%),
    linear-gradient(180deg, #d9ebff 0%, rgba(231,241,255,0) 30%),
    radial-gradient(rgba(46,143,224,.07) 1px, transparent 1px);
  background-size:auto,auto,auto,18px 18px;
  background-attachment:fixed,fixed,scroll,scroll;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  line-height:1.85;font-size:16px;-webkit-font-smoothing:antialiased;
}
.display{font-family:"Baloo 2","PingFang SC","Microsoft YaHei",cursive;}

/* ---------- Nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(238,245,255,.82);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:1000px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;gap:26px;}
.brand{font-family:"Baloo 2",cursive;font-weight:800;font-size:21px;color:var(--primary-deep);text-decoration:none;display:flex;align-items:center;gap:9px;}
.brand .dot{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #8fc0ff, var(--primary));box-shadow:0 0 0 3px rgba(79,134,214,.18);display:inline-block;position:relative;}
.brand .dot::after{content:"";position:absolute;left:3px;top:2.5px;width:4px;height:4px;border-radius:50%;background:#fff;opacity:.9;}
.nav-links{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.nav-links a{font-size:14.5px;color:var(--muted);text-decoration:none;font-weight:600;padding:7px 14px;border-radius:999px;transition:.16s;display:inline-flex;align-items:center;gap:6px;}
.nav-links a:hover{color:var(--primary-deep);background:var(--bg-2);}
.nav-links a.active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-deep));box-shadow:0 6px 14px -6px rgba(47,93,168,.6);}
.nav-links a .ext{font-size:10px;opacity:.7;}
@media(max-width:600px){.nav-inner{gap:10px;padding:11px 16px;}.nav-links{gap:4px;}.nav-links a{padding:6px 10px;font-size:13px;}.brand{font-size:18px;}}

.wrap{max-width:1000px;margin:0 auto;padding:0 28px;}
.wrap-narrow{max-width:840px;margin:0 auto;padding:0 28px;}

/* ---------- Hero with 立绘 ---------- */
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:70px 0 50px;}
.hero-split .copy{min-width:0;}
.hero-art{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:380px;}
.hero-art .halo{position:absolute;inset:auto 0 0 0;top:6%;margin:auto;width:86%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(92,194,245,.5), rgba(46,143,224,.18) 45%, rgba(231,241,255,0) 70%);
  filter:blur(6px);z-index:0;}
.hero-art .halo::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(46,143,224,.32);animation:spin 36s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.hero-art img.rem{position:relative;z-index:1;max-width:100%;max-height:560px;filter:drop-shadow(0 24px 30px rgba(26,95,180,.4));animation:float 6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
.hero-art .flake{position:absolute;color:var(--primary-bright);opacity:.8;z-index:2;font-size:18px;animation:float 5s ease-in-out infinite;}
.hero-art .flake.f1{top:8%;left:8%;font-size:22px;animation-delay:.4s;}
.hero-art .flake.f2{top:24%;right:6%;font-size:15px;animation-delay:1.1s;}
.hero-art .flake.f3{bottom:26%;left:2%;font-size:16px;animation-delay:1.8s;}
@media(max-width:760px){.hero-split{grid-template-columns:1fr;gap:6px;}.hero-art{min-height:auto;order:-1;}.hero-art img.rem{max-height:340px;}}

/* 叠层 hero：文字在左，立绘在右，标题右端悬浮在立绘左侧（不过度遮挡） */
.hero-overlap{position:relative;padding:64px 0 46px;min-height:540px;display:flex;align-items:center;}
.hero-overlap .copy{position:relative;z-index:2;max-width:66%;}
.hero-overlap .copy h1{font-family:"Baloo 2",cursive;font-weight:800;color:var(--primary-deep);
  font-size:clamp(34px,5.6vw,64px);line-height:1.12;margin:16px 0 18px;letter-spacing:.5px;white-space:nowrap;
  text-shadow:0 2px 0 rgba(255,255,255,.92),0 6px 22px rgba(231,241,255,.95);}
.hero-overlap .copy .sub{font-size:17px;color:var(--muted);max-width:42ch;padding-right:6px;
  background:linear-gradient(90deg, rgba(231,241,255,.94) 70%, rgba(231,241,255,0));border-radius:8px;}
.hero-overlap .art{position:absolute;right:-20px;top:50%;transform:translateY(-50%);
  width:46%;max-width:420px;display:flex;justify-content:flex-end;align-items:center;z-index:1;}
.hero-overlap .art .halo{position:absolute;inset:auto 0 0 0;top:50%;transform:translateY(-50%);margin:auto;
  width:92%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(92,194,245,.55), rgba(46,143,224,.2) 46%, rgba(231,241,255,0) 70%);
  filter:blur(8px);z-index:0;}
.hero-overlap .art .halo::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px dashed rgba(46,143,224,.3);animation:spin 40s linear infinite;}
.hero-overlap .art img.rem{position:relative;z-index:1;max-width:100%;max-height:520px;
  filter:drop-shadow(0 24px 30px rgba(26,95,180,.42));animation:float 6s ease-in-out infinite;}
.hero-overlap .art .flake{position:absolute;color:var(--primary-bright);opacity:.85;z-index:2;animation:float 5s ease-in-out infinite;}
.hero-overlap .art .flake.f1{top:6%;left:6%;font-size:22px;animation-delay:.4s;}
.hero-overlap .art .flake.f2{top:30%;right:2%;font-size:15px;animation-delay:1.1s;}
.hero-overlap .art .flake.f3{bottom:18%;left:0;font-size:17px;animation-delay:1.8s;}
.hero-overlap .cta{margin-top:30px;display:flex;gap:13px;flex-wrap:wrap;position:relative;z-index:2;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@media(max-width:720px){
  .hero-overlap{flex-direction:column;align-items:stretch;min-height:auto;padding:30px 0 36px;}
  .hero-overlap .copy{max-width:100%;}
  .hero-overlap .copy .sub{max-width:100%;background:none;}
  .hero-overlap .art{position:relative;right:auto;top:auto;transform:none;width:100%;max-width:300px;margin:8px auto 0;justify-content:center;order:-1;}
  .hero-overlap .art img.rem{max-height:330px;}
}

.hero{padding:84px 0 56px;}
.kicker{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;}
.hero h1{font-family:"Baloo 2",cursive;font-weight:800;font-size:clamp(38px,7vw,66px);line-height:1.08;margin:18px 0 16px;color:var(--primary-deep);letter-spacing:.5px;}
.hero .sub{font-size:18px;color:var(--muted);max-width:56ch;}
.hero .cta{margin-top:32px;display:flex;gap:13px;flex-wrap:wrap;}
.btn{font-size:14.5px;font-weight:700;text-decoration:none;padding:12px 24px;border-radius:999px;transition:.16s;display:inline-flex;align-items:center;gap:8px;}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#fff;box-shadow:0 10px 22px -10px rgba(47,93,168,.7);}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(47,93,168,.8);}
.btn.ghost{border:1.5px solid var(--primary-soft);color:var(--primary-deep);background:rgba(255,255,255,.6);}
.btn.ghost:hover{border-color:var(--primary);background:#fff;}

/* ---------- Section heads ---------- */
section.block{padding:56px 0;}
.sec-head{display:flex;align-items:baseline;gap:13px;margin-bottom:26px;}
.sec-head h2{font-family:"Baloo 2",cursive;font-weight:700;font-size:28px;margin:0;color:var(--primary-deep);}
.sec-head .en{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;}
.snow{color:var(--primary);}

/* ---------- Cards grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:18px;}
.card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:16px;padding:24px;background:var(--white);transition:.18s;position:relative;overflow:hidden;box-shadow:0 10px 26px -22px rgba(47,93,168,.5);}
.card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent));transform:scaleX(0);transform-origin:left;transition:.2s;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card:hover::before{transform:scaleX(1);}
.card .tag{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;}
.card h3{font-family:"Baloo 2",cursive;font-weight:700;font-size:20px;margin:9px 0 8px;line-height:1.3;color:var(--primary-deep);}
.card p{font-size:14px;color:var(--muted);margin:0;}
.card .meta{margin-top:15px;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--muted);display:flex;gap:13px;flex-wrap:wrap;}
.card.ghost{background:var(--bg-2);border-style:dashed;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--muted);min-height:150px;}
.card.ghost h3{color:var(--muted);}
.card.app{border-color:var(--primary-soft);}
.card.app .tag{color:var(--primary);}
.pill{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.05em;background:var(--bg-2);color:var(--primary-deep);padding:3px 10px;border-radius:999px;border:1px solid var(--line);}

/* ---------- Learn list ---------- */
.entry{display:flex;gap:22px;text-decoration:none;color:inherit;padding:26px 24px;border:1px solid var(--line);border-radius:16px;background:var(--white);margin-bottom:16px;transition:.18s;position:relative;overflow:hidden;box-shadow:0 10px 26px -22px rgba(47,93,168,.5);}
.entry::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--primary),var(--accent));transform:scaleY(0);transform-origin:top;transition:.2s;}
.entry:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.entry:hover::before{transform:scaleY(1);}
.entry .idx{font-family:"Baloo 2",cursive;font-weight:800;font-size:30px;color:var(--primary-soft);min-width:48px;line-height:1;}
.entry .body{flex:1;}
.entry .tag{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;}
.entry h3{font-family:"Baloo 2",cursive;font-weight:700;font-size:21px;margin:8px 0;line-height:1.3;color:var(--primary-deep);}
.entry p{font-size:14.5px;color:var(--muted);margin:0;}
.entry .meta{margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--muted);display:flex;gap:15px;flex-wrap:wrap;}
.entry .arrow{align-self:center;color:var(--primary-soft);font-size:22px;transition:.18s;}
.entry:hover .arrow{color:var(--primary);transform:translateX(4px);}
@media(max-width:560px){.entry .arrow{display:none;}.entry .idx{font-size:24px;min-width:34px;}}

/* ---------- Doc article (note page) ---------- */
.backlink{font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:7px;margin-bottom:24px;transition:.15s;}
.backlink:hover{color:var(--primary-deep);}
header.doc{border-bottom:3px solid var(--primary-soft);padding-bottom:26px;margin-bottom:14px;}
header.doc h1{font-family:"Baloo 2",cursive;font-weight:800;font-size:clamp(32px,6vw,54px);line-height:1.08;margin:16px 0 14px;color:var(--primary-deep);}
header.doc .sub{font-size:17px;color:var(--muted);max-width:60ch;}
.meta{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);margin-top:16px;display:flex;gap:18px;flex-wrap:wrap;}
.meta span::before{content:"❄";color:var(--primary);margin-right:7px;font-size:11px;vertical-align:middle;}
article section{margin-top:52px;}
article h2{font-family:"Baloo 2",cursive;font-weight:700;font-size:26px;margin:0 0 18px;display:flex;align-items:baseline;gap:13px;line-height:1.25;color:var(--primary-deep);}
article h2 .num{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-deep));width:30px;height:30px;min-width:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transform:translateY(-2px);}
article h3{font-family:"Baloo 2",cursive;font-weight:700;font-size:19px;margin:28px 0 10px;color:var(--ink);}
article p{margin:12px 0;}
strong,b{font-weight:700;}
.accent{color:var(--primary-deep);font-weight:700;}
.accent2{color:var(--accent-deep);font-weight:700;}
article ul,article ol{margin:12px 0;padding-left:24px;}
article li{margin:8px 0;}

.tldr{margin:34px 0 8px;padding:24px 26px;background:linear-gradient(135deg,var(--primary-deep),#243a5e);color:#eef5ff;border-radius:14px;box-shadow:var(--shadow);}
.tldr .tag{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.2em;color:#a9cdfa;text-transform:uppercase;}
.tldr p{margin:10px 0 0;font-size:18px;line-height:1.7;}
.tldr b{color:#fff;border-bottom:2px solid var(--accent);}

.note{border-left:4px solid var(--accent);background:var(--white);padding:16px 20px;margin:20px 0;border-radius:0 12px 12px 0;font-size:15px;box-shadow:0 8px 22px -20px rgba(47,93,168,.5);}
.note.warn{border-left-color:var(--accent-deep);}
.note.key{border-left-color:var(--primary);}
.note .lbl{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;}

table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px;background:var(--white);border-radius:12px;overflow:hidden;box-shadow:0 8px 22px -20px rgba(47,93,168,.5);}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-deep));}
tbody tr:hover{background:var(--bg-2);}
td b{color:var(--primary-deep);}

.modes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0;}
@media(max-width:640px){.modes{grid-template-columns:1fr;}}
.mcard{border:1px solid var(--line);border-top:4px solid var(--primary);border-radius:14px;padding:20px;background:var(--white);box-shadow:0 8px 22px -20px rgba(47,93,168,.5);}
.mcard.m2{border-top-color:var(--accent);}
.mcard .ph{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary);font-weight:600;}
.mcard.m2 .ph{color:var(--accent-deep);}
.mcard h4{font-family:"Baloo 2",cursive;font-weight:700;font-size:17px;margin:6px 0 12px;color:var(--primary-deep);}
.flow{font-size:14px;line-height:1.9;color:var(--ink);}
.flow .step{display:block;}
.flow .arrow{color:var(--muted);}

pre{background:var(--code-bg);color:var(--code-fg);font-family:"JetBrains Mono",monospace;font-size:12.5px;line-height:1.6;padding:22px;border-radius:12px;overflow-x:auto;margin:20px 0;}
code{font-family:"JetBrains Mono",monospace;font-size:.9em;background:var(--bg-2);padding:1px 6px;border-radius:5px;color:var(--primary-deep);}
pre code{background:none;padding:0;color:inherit;}

.ladder{counter-reset:rung;list-style:none;padding:0;margin:18px 0;}
.ladder li{counter-increment:rung;position:relative;padding:14px 16px 14px 58px;border:1px solid var(--line);border-radius:12px;margin:10px 0;background:var(--white);box-shadow:0 8px 22px -20px rgba(47,93,168,.5);}
.ladder li::before{content:counter(rung);position:absolute;left:14px;top:13px;font-family:"Baloo 2",cursive;font-weight:800;font-size:22px;color:var(--primary);width:30px;text-align:center;}

.todo{list-style:none;padding:0;margin:18px 0;}
.todo li{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);cursor:pointer;user-select:none;}
.box{width:19px;height:19px;min-width:19px;border:2px solid var(--primary);border-radius:6px;margin-top:4px;position:relative;transition:.15s;}
.todo li.done .box{background:var(--primary);border-color:var(--primary);}
.todo li.done .box::after{content:"❄";color:#fff;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.todo li.done .txt{color:var(--muted);text-decoration:line-through;}

/* ---------- shared misc ---------- */
.about-text{max-width:62ch;color:var(--muted);}
.about-text b{color:var(--ink);}
footer{border-top:1px solid var(--line);padding:28px 0 60px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);margin-top:30px;}
article footer{margin-top:70px;}
.reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes rise{to{opacity:1;transform:none;}}

/* ============================================================
   阅读体验增强（针对文章页）
   ============================================================ */
/* 顶部阅读进度条 */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--primary-bright),var(--primary),var(--accent));
  box-shadow:0 0 8px rgba(46,143,224,.6);transition:width .08s linear;}

/* 字号调节悬浮控件 */
.reader-tools{position:fixed;right:16px;bottom:18px;z-index:55;display:flex;flex-direction:column;gap:8px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid var(--line);
  border-radius:999px;padding:8px 7px;box-shadow:var(--shadow);}
.reader-tools button{width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;
  font-family:"Baloo 2",cursive;font-weight:700;color:var(--primary-deep);background:var(--bg-2);
  font-size:15px;line-height:1;transition:.15s;display:flex;align-items:center;justify-content:center;}
.reader-tools button:hover{background:var(--primary);color:#fff;}
.reader-tools button:active{transform:scale(.92);}
.reader-tools .lbl{font-size:11px;}
@media(max-width:560px){.reader-tools{right:10px;bottom:12px;}}

/* 文章正文：可调字号 + 最佳阅读宽度/行距 */
.reading{--fs:18px;--lh:1.95;font-size:var(--fs);line-height:var(--lh);}
.reading.fs-s{--fs:16px;}
.reading.fs-m{--fs:18px;}
.reading.fs-l{--fs:20.5px;}
.reading.fs-xl{--fs:23px;}
/* 强制所有可读正文元素跟随 --fs（否则写死 px 的元素不会缩放，按钮像没用） */
.reading article p,
.reading article li,
.reading article td,
.reading article th,
.reading .note,
.reading .tldr p:first-of-type,
.reading .mcard h4,
.reading .ladder li{font-size:var(--fs)!important;line-height:var(--lh);}
.reading article p{margin:16px 0;letter-spacing:.1px;}
.reading article li{margin:10px 0;line-height:calc(var(--lh) - .05);}
.reading article h2{margin-top:60px;}
.reading article h3{margin-top:34px;}
.reading article strong,.reading article b{color:var(--primary-deep);}
/* 段落首字稍微透气，提升中文长文可读性 */
.reading article ul,.reading article ol{padding-left:22px;}
/* ASCII 流程图：手机上不溢出，自动横向滚动 + 缩放提示 */
.diagram-scroll{position:relative;margin:20px -6px;}
.diagram-scroll pre{margin:0;font-size:clamp(9.5px,2.6vw,12.5px);}
.diagram-scroll::after{content:"← 可左右滑动 →";position:absolute;right:14px;bottom:8px;
  font-family:"JetBrains Mono",monospace;font-size:10px;color:rgba(255,255,255,.45);pointer-events:none;}
@media(min-width:680px){.diagram-scroll::after{display:none;}}

/* 文章页表格在手机上更易读 */
@media(max-width:560px){
  .reading article table{font-size:13.5px;}
  .reading article th,.reading article td{padding:9px 10px;}
  .reading article h1,header.doc h1{font-size:30px;}
}

/* ============================================================
   留言互动区  ——  90后·非主流·炫酷霓虹风
   ============================================================ */
.board{margin-top:70px;position:relative;border-radius:22px;padding:30px 26px 34px;overflow:hidden;
  background:linear-gradient(160deg,#11091f 0%,#1a0f3a 45%,#0c1b3a 100%);
  box-shadow:0 24px 60px -28px rgba(123,46,224,.7),0 0 0 1px rgba(124,196,255,.12) inset;}
/* 旋转霓虹外环 */
.board::before{content:"";position:absolute;inset:-40%;z-index:0;
  background:conic-gradient(from 0deg,#ff2fd0,#7b5cff,#2ee6ff,#39ff88,#ffe14d,#ff2fd0);
  filter:blur(46px);opacity:.32;animation:spin 14s linear infinite;}
/* 星点底纹 */
.board::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 70% 60%,#bdf,transparent),
    radial-gradient(1px 1px at 40% 80%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 85% 20%,#ffd1f5,transparent),
    radial-gradient(1px 1px at 55% 15%,#fff,transparent);}
.board > *{position:relative;z-index:1;}
.board h2{font-family:"Baloo 2",cursive;font-weight:800;font-size:29px;margin:0 0 4px;letter-spacing:1px;
  background:linear-gradient(90deg,#2ee6ff,#ff2fd0,#ffe14d);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(124,92,255,.6));
  display:flex;align-items:center;gap:10px;}
.board .desc{color:#b9a9e8;font-size:15px;margin:0 0 22px;text-shadow:0 0 8px rgba(123,92,255,.4);}

.board-form{background:rgba(255,255,255,.06);backdrop-filter:blur(8px);
  border:1px solid rgba(124,196,255,.28);border-radius:18px;padding:20px;
  box-shadow:0 0 24px rgba(46,230,255,.12) inset;}
.board-form .row{display:flex;gap:12px;margin-bottom:13px;}
.board-form input,.board-form textarea{width:100%;font:inherit;font-size:16px;color:#eaf6ff;
  background:rgba(12,8,28,.55);border:1.5px solid rgba(124,196,255,.3);border-radius:13px;padding:13px 15px;
  transition:.18s;-webkit-appearance:none;}
.board-form input::placeholder,.board-form textarea::placeholder{color:#7e74a8;}
.board-form input:focus,.board-form textarea:focus{outline:none;border-color:#2ee6ff;
  background:rgba(12,8,28,.8);box-shadow:0 0 0 3px rgba(46,230,255,.22),0 0 18px rgba(255,47,208,.3);}
.board-form input.name{max-width:220px;}
.board-form textarea{min-height:104px;resize:vertical;line-height:1.7;}
.board-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.board-form .actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.board-form .btn-neon{font-family:"Baloo 2",cursive;font-weight:800;font-size:16px;letter-spacing:.5px;cursor:pointer;
  color:#fff;border:none;padding:13px 30px;border-radius:999px;
  background:linear-gradient(90deg,#ff2fd0,#7b5cff,#2ee6ff);background-size:200% 100%;
  box-shadow:0 8px 22px -6px rgba(255,47,208,.6),0 0 18px rgba(46,230,255,.45);
  transition:.2s;animation:hue 6s linear infinite;}
.board-form .btn-neon:hover{transform:translateY(-2px) scale(1.03);background-position:100% 0;}
.board-form .btn-neon:active{transform:scale(.96);}
.board-form .btn-neon:disabled{opacity:.6;cursor:wait;}
@keyframes hue{to{filter:hue-rotate(360deg);}}
.board-form .count{font-family:"JetBrains Mono",monospace;font-size:13px;color:#8fb6e6;margin-left:auto;}
.board-form .hint{font-size:14px;min-height:20px;font-weight:600;}
.board-form .hint.ok{color:#39ff88;text-shadow:0 0 8px rgba(57,255,136,.6);}
.board-form .hint.err{color:#ff6ba6;text-shadow:0 0 8px rgba(255,107,166,.5);}
@media(max-width:560px){.board-form .row{flex-direction:column;}.board-form input.name{max-width:none;}}

.board-list{margin-top:24px;display:flex;flex-direction:column;gap:14px;}
.msg{background:rgba(255,255,255,.07);border:1px solid rgba(124,196,255,.22);
  border-radius:16px;padding:16px 18px;backdrop-filter:blur(6px);animation:rise .5s ease forwards;
  box-shadow:0 0 18px rgba(123,92,255,.16);}
.msg .top{display:flex;align-items:center;gap:11px;margin-bottom:8px;}
.msg .who{font-family:"Baloo 2",cursive;font-weight:700;color:#eaf6ff;font-size:16px;
  text-shadow:0 0 8px rgba(46,230,255,.45);}
.msg .when{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:#9c8fc8;margin-left:auto;}
.msg .body{font-size:16px;line-height:1.8;color:#dfeeff;white-space:pre-wrap;word-break:break-word;}
.board-empty{text-align:center;color:#9c8fc8;padding:28px;font-size:15px;}
.board-avatar{width:34px;height:34px;border-radius:50%;flex:none;color:#fff;font-family:"Baloo 2",cursive;
  font-weight:800;font-size:15px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ff2fd0,#7b5cff,#2ee6ff);box-shadow:0 0 14px rgba(255,47,208,.55);}
@media(max-width:560px){
  .board{padding:26px 16px 30px;border-radius:18px;margin-top:54px;}
  .board h2{font-size:25px;}
  .board-form{padding:16px;}
  .msg .body{font-size:16.5px;}
}