:root{
  --bg:#F5F5F7; --card:#fff; --line:#D2D2D7; --ink:#1D1D1F; --mid:#6E6E73;
  --accent:#6F5FA8; --accent-bg:#EFEBF8; --red:#D70015; --band:#E5E5EA;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
}
*{box-sizing:border-box}
html{background:#E9E6F6}
body{margin:0;min-height:100vh;color:var(--ink);font:14px/1.5 var(--sans);
  background:linear-gradient(135deg,#E9E6F6 0%,#E3ECF8 100%) fixed}
[hidden]{display:none!important}
.muted{color:var(--mid)} .small{font-size:12px} .req{color:var(--accent)}
.invalid{display:flex;align-items:center;justify-content:center;min-height:100vh;font-size:18px;color:var(--mid)}

.app{display:flex;min-height:100vh}
.topbar{display:none}
.sidebar{width:240px;flex:none;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-right:1px solid var(--line);padding:20px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.side-head{display:flex;justify-content:space-between;align-items:flex-start;padding:0 8px 16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:700;white-space:nowrap}
.brand img{flex:none;display:block}
.icon-btn{border:0;background:none;color:var(--mid);cursor:pointer;font:inherit;padding:2px 4px}
.nav{flex:1}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;margin-bottom:4px}
.nav-item.active{color:var(--accent);font-weight:600}
.nav-ico{width:20px;text-align:center;font-size:13px;color:var(--mid)} .nav-item.active .nav-ico{color:var(--accent)}
.session{margin:4px 0 14px;padding:8px 4px 0;border-top:1px solid var(--line)}
.session-title{font-weight:600;padding:6px 8px}
.session ul{list-style:none;margin:0;padding:0}
.session li{padding:8px 10px;border-radius:10px;cursor:pointer;font-size:12px;display:flex;gap:6px}
.session li:hover,.session li.active{background:var(--card)}
.session li::before{content:"";width:6px;height:6px;border-radius:50%;background:#aeaeb2;margin-top:6px;flex:none}
.session li div{min-width:0}.session li .s1{color:var(--ink)}
.session li .s2{color:var(--mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.session #sessionEmpty{padding:4px 10px}
.side-foot{padding:12px 8px 0}

.main{flex:1;min-width:0;padding:30px 32px 48px;max-width:1500px}
.card{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:18px}
.textcard.card{background:rgba(255,255,255,.96)}   /* 正文区接近不透明,长文好读 */

.inputbar{display:flex;flex-wrap:wrap;gap:16px 18px;padding:20px 22px;align-items:flex-start;margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:13px;margin-bottom:8px}
.field{min-width:0}
.f-level{flex:none}.f-words{flex:1 1 240px}.f-type{flex:0 1 220px}.f-genre{flex:0 1 130px}.f-len{flex:0 1 250px}.f-theme{flex:0 1 170px}
.f-btn{display:flex;gap:10px;align-self:flex-end;margin-bottom:22px;margin-left:auto}
.radios{display:flex;gap:12px;height:42px;align-items:center}
.radios label{font-weight:400;display:flex;gap:4px;align-items:center;margin:0;cursor:pointer}
.radios input{accent-color:var(--accent)}
input[type=text],input[type=number],select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:#fff;color:var(--ink);outline:none}
textarea{resize:none;overflow:hidden;min-height:42px;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.len-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.len-row input{width:76px}
.chips{display:inline-flex;gap:6px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;cursor:pointer;font:inherit;font-size:12px}
.chip:hover{border-color:var(--accent)}
.btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:10px 16px;font:inherit;cursor:pointer;white-space:nowrap}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn:disabled{background:#ececf0;border-color:#ececf0;color:#a1a1a6;cursor:not-allowed}
.btn.emph{box-shadow:0 0 0 3px var(--accent-bg)}

.cols{display:flex;gap:18px;align-items:flex-start}
.textcard{flex:1;min-width:0;padding:0 24px 22px}
.panel{flex:none;width:320px;padding:22px 22px 18px}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);position:relative}
.tab{border:0;background:none;font:inherit;padding:18px 4px 12px;cursor:pointer;color:var(--mid);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.active{color:var(--ink);font-weight:600}
.notice{padding:14px 0 0;min-height:22px}
.textarea-wrap{min-height:180px;padding:14px 0 8px}
.prose{font-family:var(--serif);font-size:19px;line-height:1.9;word-break:break-all}
.prose p{margin:0 0 .6em}.prose p:last-child{margin-bottom:0}
.tw{background:var(--accent-bg);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9aedf}
.ow{color:var(--red);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:4px}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.center-msg{padding:60px 0;text-align:center;color:var(--mid)}
.spin{width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;margin:0 auto 14px;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.back{color:var(--accent);cursor:pointer;font-size:13px;margin-bottom:10px;display:inline-block}

.hitcard{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0;cursor:pointer}
.hitcard:hover{border-color:var(--accent)}
.hitcard .snip{font-family:var(--serif);font-size:15px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.twords{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.twords .tl{font-size:12px;color:var(--mid);margin-right:2px}
.tchip{font-size:12px;padding:1px 9px;border-radius:999px;background:var(--accent-bg);color:#4d4080}
.tchip.mine{background:#D6CAF0;color:#3b2f70;font-weight:600}
.tchip.other{background:#F7F5FC;color:#5b4f90;box-shadow:inset 0 0 0 1px #DDD5F0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:13px}
.kv dt{color:var(--mid)}.kv dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.twords.full{margin:4px 0 14px}
.meta{display:flex;gap:10px;align-items:center;margin-top:8px;font-size:12px;color:var(--mid)}
.gtag{color:var(--ink);font-weight:500}
.tag{border-radius:999px;padding:1px 10px;font-size:12px}
.tag.rev{background:#E5E5EA;color:#3a3a3c}
.tag.unrev{border:1px solid #aeaeb2;color:var(--mid)}

.panel h2{font-size:20px;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.panel h3{font-size:15px;margin:0 0 8px}
.psec{padding:14px 0;border-bottom:1px solid var(--line)}
.psec:last-child{border-bottom:0}
.red{color:var(--red)}
.band-wrap{position:relative;height:56px;margin:8px 0 2px}
.band-title{text-align:center;font-size:12px;color:var(--mid);margin-top:12px}
.band-line{position:absolute;left:0;right:0;top:30px;height:1px;background:var(--line)}
.band-rng{position:absolute;top:24px;height:14px;background:var(--band);border-radius:3px}
.band-tgt{position:absolute;top:20px;width:1px;height:22px;background:var(--ink)}
.band-dot{position:absolute;top:26px;width:9px;height:9px;border-radius:50%;background:var(--ink);transform:translateX(-4px)}
.band-dot.red{background:var(--red)}
.band-lab{position:absolute;top:44px;font-size:12px;color:var(--mid);transform:translateX(-50%)}
.band-lab.pt{color:var(--ink)}

.libbar{display:flex;gap:16px;padding:16px 22px;margin-bottom:18px;flex-wrap:wrap}
.libbar .field{flex:0 1 220px}
.libcols{display:flex;gap:18px;align-items:flex-start}
.liblist{flex:none;width:320px}
.liblist .hitcard{background:#fff;margin-top:0}
.liblist .hitcard.sel{border-color:var(--accent)}
#page-lib .textcard{padding:12px 24px 22px}

@media (max-width:1279px){
  .cols,.libcols{flex-wrap:wrap}
  .panel{width:100%}
  .liblist{width:100%}
}
@media (max-width:767px){
  .app{flex-direction:column}
  .topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}
  .topbar-title{font-weight:700}
  .sidebar{position:fixed;z-index:6;left:0;top:0;width:240px;transform:translateX(-100%);transition:transform .2s;background:rgba(255,255,255,.96)}
  .sidebar.open{transform:none}
  .main{padding:16px}
  .f-btn{margin-left:0;width:100%;margin-bottom:0}.f-btn .btn{flex:1}
  .f-words,.f-type,.f-genre,.f-len,.f-theme{flex:1 1 100%}
  .textcard{padding:0 16px 18px}
  .prose{font-size:18px}
}

.inline-detail{padding:4px 22px 18px;margin:-4px 0 12px;border-top:0}
.inline-detail .panel-inline{border-top:1px solid var(--line);margin-top:14px;padding-top:6px}
.inline-detail .panel-inline h2{font-size:18px}
.libcols.narrow>.textcard,.libcols.narrow>.panel{display:none}


/* ===== 动效(苹果式:缓动曲线、轻微上浮、柔和光晕) ===== */
:root{--ease:cubic-bezier(.22,.8,.2,1);--spring:cubic-bezier(.34,1.4,.5,1)}
.nav{position:relative}
.nav-item{position:relative;z-index:1;transition:color .25s var(--ease),background .25s var(--ease)}
.nav-item:not(.active):hover{background:rgba(0,0,0,.045)}
.nav-pill{position:absolute;left:0;right:0;top:0;border-radius:10px;background:var(--accent-bg);opacity:0;z-index:0;pointer-events:none}
.nav-pill.ready{opacity:1;transition:transform .45s var(--spring),height .3s var(--ease)}
.tab{position:relative;transition:color .25s var(--ease)}
.tab:hover{color:var(--ink)}
.tab-ink{position:absolute;bottom:-1px;height:2px;background:var(--accent);border-radius:2px;left:0;width:0}
.tab-ink.ready{transition:left .4s var(--spring),width .4s var(--spring)}

.hitcard,.session li,.chip,.btn{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.hitcard{position:relative;overflow:hidden}
.hitcard>*{position:relative;z-index:1}
.hitcard::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(111,95,168,.10),transparent 65%)}
.hitcard:hover{transform:translateY(-2px);border-color:#b9aedf;box-shadow:0 10px 28px rgba(60,50,100,.10)}
.hitcard:hover::before{opacity:1}
.hitcard:active{transform:translateY(0) scale(.992);transition-duration:.12s}
.hitcard.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.session li:hover{transform:translateX(2px)}
.chip:hover{transform:translateY(-1px)}
.chip:active{transform:scale(.94)}

.btn:not(:disabled):hover{border-color:#b9aedf;transform:translateY(-1px)}
.btn.primary:not(:disabled):hover{background:#5f509a;box-shadow:0 8px 20px rgba(111,95,168,.30)}
.btn:not(:disabled):active{transform:scale(.96);transition-duration:.1s}
.btn.emph{animation:glow 2s var(--ease) infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 3px var(--accent-bg)}50%{box-shadow:0 0 0 8px rgba(239,235,248,0)}}

input[type=text],input[type=number],select,textarea{transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 4px var(--accent-bg)}
.radios label{transition:color .2s}.radios label:hover{color:var(--accent)}

@keyframes rise{from{opacity:0;transform:translateY(10px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.enter{animation:rise .55s var(--ease) both}
.page-enter{animation:pagein .35s var(--ease) both}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel.enter>*{animation:rise .6s var(--ease) both}
.panel.enter>:nth-child(1){animation-delay:.02s}.panel.enter>:nth-child(2){animation-delay:.09s}
.panel.enter>:nth-child(3){animation-delay:.16s}.panel.enter>:nth-child(4){animation-delay:.23s}
.panel.enter>:nth-child(5){animation-delay:.30s}
.session li.new{animation:rise .5s var(--ease) both}
.hitcard.stag{animation:rise .5s var(--ease) both}

.band-rng{transform-origin:left center;animation:grow .7s var(--ease) .15s both}
.band-dot{animation:pop .6s var(--spring) .55s both}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pop{from{transform:translateX(-4px) scale(0)}to{transform:translateX(-4px) scale(1)}}

.tw,.ow{transition:background .2s var(--ease)}
.tw.in{background:#D6CAF0;font-weight:600;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.tw:hover{background:#dcd3f0}.tw.in:hover{background:#c9bbea}.ow:hover{background:rgba(215,0,21,.08)}

.center-msg.loading{animation:breathe 1.8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}

.notice-box{margin:-6px 4px 16px;padding:0 4px;line-height:1.7}

/* 长列表:屏幕外的卡片不参与渲染 */
.liblist .hitcard{content-visibility:auto;contain-intrinsic-size:auto 118px}
.liblist .more{width:100%;margin:6px 0 14px}

.menu-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--ink);transition:background .2s var(--ease),transform .15s var(--ease)}
.menu-btn:hover{background:rgba(0,0,0,.05)}
.menu-btn:active{transform:scale(.92)}

/* 老师反馈:两个图标按钮(没问题 / 有问题) */
.meta-flag{margin-left:auto}
.votes{display:inline-flex;gap:2px;align-items:center}
.vote-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;
  background:none;color:var(--mid);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}
.vote-btn svg{fill:none;stroke:currentColor;transition:fill .2s var(--ease),transform .25s var(--spring)}
.vote-btn:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.vote-btn:active{transform:scale(.88)}
.vote-btn.on{color:var(--accent);background:var(--accent-bg)}
.vote-btn.on svg{fill:var(--accent);stroke:var(--accent);animation:votepop .4s var(--spring)}
@keyframes votepop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.flag-slot{margin-right:auto}
.actions .vote-btn{width:40px;height:40px;border:1px solid var(--line);background:#fff}
.actions .vote-btn.on{background:var(--accent-bg);border-color:#cfc5ea}
.actions .votes{gap:8px}
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(29,29,31,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:pagein .2s var(--ease) both}
.dialog{width:min(420px,92vw);padding:22px 22px 16px;background:rgba(255,255,255,.98)}
.dialog h3{margin:0 0 12px;font-size:17px}
.dialog .reasons{display:grid;gap:8px;margin-bottom:12px}
.dialog .reasons label{display:flex;gap:8px;align-items:center;cursor:pointer}
.dialog .reasons input{accent-color:var(--accent)}
.dialog textarea{height:auto;min-height:60px;margin-bottom:12px;resize:vertical}
.dlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-bottom:10px}