/* 浙大人工智能学院 · 创作展示系统 · 共用样式
   视觉语言沿用「现代图钉墙」：暖白板面 + 玻璃图钉 + 瀑布流 */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --hand:"Caveat","Segoe Script",cursive;
  --ink:#1f2430;
  --dim:#7b8194;
  --acc:#5b6cff;
  --board:#eceae3;
  --line:#e2e0d6;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--board);-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ===== 板面背景 ===== */
.board{position:fixed;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% -10%,#f6f5f0,#ecebe4 55%,#e4e2da 100%)}
.board::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(120,110,90,.16) 1px,transparent 1.5px);background-size:22px 22px}

/* ===== 顶部 ===== */
header{position:sticky;top:0;z-index:30;backdrop-filter:blur(12px);
  background:linear-gradient(180deg,rgba(236,234,227,.92),rgba(236,234,227,.55) 70%,transparent);
  padding:22px clamp(20px,5vw,60px) 18px}
.hin{max-width:1320px;margin:0 auto}
.htop{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--acc),#9b6cff);position:relative;box-shadow:0 6px 16px rgba(91,108,255,.4)}
.mark::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff;opacity:.9}
h1{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.03em}
.act-sel{font-family:inherit;font-size:13px;font-weight:600;color:#48506a;background:#fff;border:1px solid var(--line);
  padding:8px 12px;border-radius:10px;cursor:pointer;max-width:240px}
.lead{color:var(--dim);font-size:14px;margin-left:auto;max-width:40ch;text-align:right}
@media(max-width:860px){.lead{display:none}}
.submit-btn{font-size:13px;font-weight:600;color:#fff;background:var(--ink);text-decoration:none;
  padding:9px 18px;border-radius:999px;transition:.16s;white-space:nowrap}
.submit-btn:hover{background:var(--acc);transform:translateY(-1px)}
.auth-slot .auth-link{font-size:13px;font-weight:600;color:#48506a;text-decoration:none;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;transition:.16s;white-space:nowrap}
.auth-slot .auth-link:hover{border-color:#cfcdc2;color:var(--acc)}
@media(max-width:860px){.auth-slot{margin-left:auto}}
.filters{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:13px;font-weight:500;color:#48506a;cursor:pointer;background:#fff;border:1px solid var(--line);
  padding:7px 16px;border-radius:999px;transition:.16s;box-shadow:0 1px 2px rgba(30,30,40,.04)}
.chip:hover{transform:translateY(-1px);border-color:#cfcdc2}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ===== 瀑布流墙面 ===== */
.wall{max-width:1320px;margin:0 auto;padding:34px clamp(20px,5vw,60px) 60px;
  column-width:300px;column-gap:clamp(26px,3vw,44px)}
.item{break-inside:avoid;width:100%;margin:0 0 clamp(30px,3.5vw,50px);position:relative;display:inline-block;will-change:transform}
.rev{opacity:0;transform:translateY(34px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.25,1)}
.item.in .rev{opacity:1;transform:none}

/* 玻璃图钉 */
.pin{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;z-index:6;
  box-shadow:0 3px 7px rgba(20,20,30,.4),inset -1px -1px 2px rgba(0,0,0,.25),inset 1.5px 1.5px 2px rgba(255,255,255,.6)}
.pin::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.85),transparent 45%)}
.pin.red{background:#ff5a52}.pin.blu{background:#3b82f6}.pin.yel{background:#f5b62e}
.pin.grn{background:#2fbd6e}.pin.pur{background:#8b5cf6}

/* ===== 作品卡 ===== */
.card{display:block;background:#fff;border-radius:16px;text-decoration:none;color:inherit;overflow:hidden;
  box-shadow:0 12px 30px rgba(30,30,50,.10),0 2px 6px rgba(30,30,50,.06);
  transition:transform .26s cubic-bezier(.2,.8,.25,1),box-shadow .26s;border:1px solid rgba(0,0,0,.04)}
.card:hover{transform:translateY(-7px) rotate(0deg)!important;z-index:20;box-shadow:0 26px 54px rgba(30,30,50,.20)}
.thumb{height:clamp(170px,22vw,210px);position:relative;overflow:hidden;background-size:cover;background-position:center}
.thumb .em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:38px;font-weight:700;color:rgba(255,255,255,.92);text-shadow:0 3px 14px rgba(0,0,0,.2)}
.thumb .badge{position:absolute;left:12px;top:12px;font-size:11px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.28);backdrop-filter:blur(6px);padding:4px 10px;border-radius:999px}
.thumb .star{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;color:#3a2c00;
  background:#ffd24a;padding:4px 9px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.meta{padding:15px 16px 4px}
.meta .nm{font-weight:700;font-size:16px;letter-spacing:-.01em}
.meta .mj{font-size:12px;color:var(--dim);margin-top:3px}
.meta .wk{font-size:13.5px;color:#3d4356;margin-top:9px;line-height:1.5}
.tags{padding:11px 16px 16px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.tags span{font-size:11px;color:#5b6470;background:#f2f1ec;padding:3px 10px;border-radius:999px}
.go{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:12px;font-weight:600;color:var(--acc);
  opacity:0;transform:translateX(-4px);transition:.2s}
.card:hover .go{opacity:1;transform:none}

/* 缩略图渐变占位 */
.g1{background:linear-gradient(135deg,#ff9a6b,#ff5f8d,#a44bff)}
.g2{background:linear-gradient(135deg,#43e0c6,#1a9fcb,#2156a8)}
.g3{background:linear-gradient(135deg,#ffd76b,#ff9a4a,#ff5f7e)}
.g4{background:linear-gradient(135deg,#8b7cff,#5b6cff,#2a1d7a)}
.g5{background:linear-gradient(135deg,#b6e85f,#4fc46a,#1f9e6e)}
.g6{background:linear-gradient(135deg,#ffc7e0,#c79ad6,#7b6cff)}
.g7{background:linear-gradient(135deg,#34495e,#4ca1af,#9fd0c9)}
.g8{background:linear-gradient(135deg,#fcb1a6,#ff8fb1,#c2a0ff)}

/* ===== 便签 ===== */
.note{padding:20px 18px;border-radius:6px;position:relative;
  box-shadow:0 14px 30px rgba(40,40,40,.14);font-family:var(--hand);font-size:23px;line-height:1.28;color:#2c2f24;
  transition:transform .26s cubic-bezier(.2,.8,.25,1),box-shadow .26s}
.note:hover{transform:translateY(-5px) rotate(0deg)!important;box-shadow:0 24px 44px rgba(40,40,40,.22)}
.note .by{display:block;margin-top:12px;font-family:var(--sans);font-size:11px;font-weight:500;color:rgba(40,40,30,.5)}
.note.y{background:#fff4a8}.note.p{background:#ffc9dc}.note.b{background:#bfe1ff}
.note.g{background:#c6f0bd}.note.o{background:#ffd6a8}
.note textarea{width:100%;border:none;background:transparent;resize:none;font:inherit;color:inherit;outline:none;overflow:hidden}

/* ===== 浮动按钮 / 杂项 ===== */
.fab{position:fixed;right:26px;bottom:26px;z-index:45;font-size:14px;font-weight:600;color:#fff;
  background:var(--ink);cursor:pointer;padding:13px 22px;border-radius:999px;border:none;
  box-shadow:0 10px 26px rgba(20,20,40,.32);display:flex;align-items:center;gap:9px;transition:.16s}
.fab:hover{transform:translateY(-2px);background:var(--acc);box-shadow:0 14px 32px rgba(91,108,255,.45)}
.fab[hidden]{display:none}
.fab .pl{font-size:17px;line-height:0}
.loading{text-align:center;color:var(--dim);font-size:12px;letter-spacing:.28em;padding:0 0 70px}
.loading.done{opacity:.4}
.loading span{display:inline-block;animation:bob 1.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.empty{text-align:center;color:var(--dim);font-size:14px;padding:40px 0 90px}
.empty a{color:var(--acc);font-weight:600;text-decoration:none}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(18px);z-index:60;opacity:0;
  background:var(--ink);color:#fff;font-size:13px;padding:11px 20px;border-radius:999px;transition:.25s;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}