/* ============================================================
   Rude Tools · 私人空间样式
   ============================================================ */

/* ---------- 密码门 ---------- */
.gate{
  position:fixed;inset:0;z-index:9000;
  display:grid;place-items:center;padding:24px;
  background:rgba(6,7,9,.82);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transition:opacity .3s var(--ease);
}
.gate.show{opacity:1}
.gate-card{
  width:100%;max-width:376px;text-align:center;
  padding:38px 32px 30px;border-radius:22px;
  background:rgba(18,20,25,.94);
  border:1px solid var(--stroke-hi);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9);
  position:relative;
  transform:translateY(14px) scale(.97);
  transition:transform .34s var(--ease);
}
.gate.show .gate-card{transform:none}
.gate-card.shake{animation:gateShake .42s var(--ease)}
@keyframes gateShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  45%{transform:translateX(6px)}
  70%{transform:translateX(-3px)}
}
.gate-x{
  position:absolute;top:14px;right:14px;
  width:30px;height:30px;border-radius:9px;border:none;cursor:pointer;
  background:transparent;color:var(--text-3);font-size:19px;line-height:1;
  transition:background .2s,color .2s;
}
.gate-x:hover{background:rgba(255,255,255,.07);color:var(--text)}
.gate-icon{
  width:52px;height:52px;border-radius:16px;margin:0 auto 20px;
  display:grid;place-items:center;color:#FF375F;
  background:rgba(255,55,95,.11);
  border:1px solid rgba(255,55,95,.24);
}
.gate-card h3{font-size:20px;font-weight:600;letter-spacing:-.025em;color:var(--text)}
.gate-card p{margin-top:9px;font-size:13px;line-height:1.7;color:var(--text-2)}
.gate-input{
  width:100%;margin-top:24px;text-align:center;
  font-family:inherit;font-size:15px;letter-spacing:.16em;
  padding:13px 16px;border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke-hi);
  color:var(--text);outline:none;
  transition:border-color .22s,background .22s;
}
.gate-input::placeholder{letter-spacing:.05em;color:var(--text-3)}
.gate-input:focus{border-color:rgba(255,55,95,.5);background:rgba(255,255,255,.07)}
.gate-err{margin-top:11px;font-size:12px;color:#FF6B8A}
.gate-go{
  width:100%;margin-top:16px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;
  padding:13px;border-radius:12px;border:none;
  background:#F2F3F5;color:#08090B;
  transition:transform .22s var(--ease),box-shadow .22s;
}
.gate-go:hover{transform:translateY(-1px);box-shadow:0 14px 32px -14px rgba(255,255,255,.5)}
.gate-hint{margin-top:18px;font-size:11px;color:var(--text-3)}

/* ---------- 书架 ---------- */
.shelf-page{padding:128px 0 120px;position:relative;z-index:10}
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.shelf-head h1{font-size:clamp(28px,4vw,42px);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.shelf-head h1 em{
  font-style:normal;font-size:clamp(12px,1.2vw,14px);font-weight:400;
  color:var(--text-3);margin-left:12px;letter-spacing:.02em;
}
.shelf-head .sub{margin-top:12px;font-size:13.5px;color:var(--text-3);line-height:1.6}
.shelf-actions{display:flex;gap:9px;flex-wrap:wrap}

.shelf-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:26px;
  border-bottom:1px solid var(--stroke);
}
.shelf-bar .spacer{flex:1}
.shelf-count{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.shelf-lock{
  font-family:inherit;font-size:12px;cursor:pointer;
  padding:7px 13px;border-radius:8px;
  background:transparent;border:1px solid var(--stroke);color:var(--text-3);
  transition:color .2s,border-color .2s;
}
.shelf-lock:hover{color:var(--text);border-color:var(--stroke-hi)}

/* 漫画卡 */
.shelf-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:26px 20px;
}
.comic{cursor:pointer;display:flex;flex-direction:column;gap:13px;position:relative}
.comic-cover{
  position:relative;aspect-ratio:3/4.2;border-radius:13px;overflow:hidden;
  border:1px solid var(--stroke);
  transition:transform .38s var(--ease),border-color .3s,box-shadow .38s var(--ease);
  /* 这层渐变是「封面图加载失败」时的兜底占位 */
  background:linear-gradient(150deg,
    hsl(var(--h) 42% 26%) 0%,
    hsl(var(--h) 36% 15%) 55%,
    hsl(calc(var(--h) + 24) 30% 11%) 100%);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.9);
}
/* 真实封面：第 1 页。绝对定位铺满，盖住下面的渐变 */
.comic-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  z-index:1;display:block;
  transition:transform .5s var(--ease);
}
.comic:hover .comic-img{transform:scale(1.035)}
.comic:hover .comic-cover{
  transform:translateY(-6px);
  border-color:var(--stroke-hi);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.95);
}
/* 底部压暗，保证白色标题在任何封面上都读得清 */
.comic-shade{
  position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 42%, transparent 100%);
  pointer-events:none;
}
/* 封面上的几何纹样，让占位封面不空。有真图时降到图下面，只做一层氛围 */
.comic-cover::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    /* 斜向双线，织一点纸纹 */
    repeating-linear-gradient(58deg,
      rgba(255,255,255,.045) 0 1px, transparent 1px 7px),
    /* 主光斑 */
    radial-gradient(circle at 76% 18%, hsl(var(--h) 70% 62% / .34), transparent 46%),
    radial-gradient(circle at 18% 84%, hsl(calc(var(--h) + 40) 60% 46% / .3), transparent 52%);
  mix-blend-mode:screen;
  pointer-events:none;
}
/* 左下到右上的高光斜带，占比小但能让封面“有光” */
.comic-cover::before{
  content:"";position:absolute;inset:-30% -60%;
  background:linear-gradient(115deg,
    transparent 34%,
    hsl(var(--h) 90% 84% / .12) 47%,
    transparent 60%);
  transform:rotate(-4deg);
  pointer-events:none;
}
.comic-ttl{
  position:absolute;left:14px;right:14px;bottom:13px;z-index:2;
  font-size:15px;font-weight:600;line-height:1.32;letter-spacing:-.015em;
  color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.65);
}
.comic-badge{
  position:absolute;top:11px;left:11px;z-index:2;
  font-size:10px;letter-spacing:.03em;
  padding:3px 8px;border-radius:6px;
  background:rgba(0,0,0,.5);color:#fff;
  backdrop-filter:blur(6px);
}
.comic-prog{
  position:absolute;left:0;right:0;bottom:0;height:2.5px;z-index:3;
  background:rgba(255,255,255,.14);
}
.comic-prog i{
  display:block;height:100%;background:#fff;border-radius:0 2px 2px 0;
}
.comic-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.comic-meta .au{font-size:12.5px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comic-meta .tags{display:flex;gap:5px;flex-wrap:wrap}
.comic-meta .tags i{
  font-style:normal;font-size:10.5px;
  padding:2.5px 7px;border-radius:5px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--stroke);
  color:var(--text-3);
}
.comic-del{
  position:absolute;top:9px;right:9px;z-index:4;
  width:26px;height:26px;border-radius:8px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(0,0,0,.55);border:none;color:#fff;font-size:15px;line-height:1;
  opacity:0;transition:opacity .22s,background .22s;
  backdrop-filter:blur(6px);
}
.comic:hover .comic-del{opacity:1}
.comic-del:hover{background:rgba(255,55,95,.85);opacity:1}
/* 视觉 26px 太小，手指点不准：把热区撑到 44px，视觉大小不变 */
.comic-del::after{
  content:"";position:absolute;
  left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
/* 触屏设备没有 hover：删除按钮必须常显，否则书架上的漫画删不掉 */
@media (hover:none),(pointer:coarse){
  .comic-del{opacity:1;width:30px;height:30px;background:rgba(0,0,0,.62)}
}

/* 空状态 */
.shelf-empty{
  grid-column:1/-1;text-align:center;padding:80px 24px;
  border:1px dashed var(--stroke-hi);border-radius:16px;
}
.shelf-empty b{display:block;font-size:15px;font-weight:500;color:var(--text-2)}
.shelf-empty p{margin-top:9px;font-size:13px;color:var(--text-3)}

@media (max-width:640px){
  .shelf-page{padding:108px 0 90px}
  .shelf-grid{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .shelf-head{margin-bottom:30px}
}
/* ---------- 隐藏入口：几乎看不见的小点 ---------- */
.secret-dot{
  position:relative;
  display:inline-block;width:7px;height:7px;
  margin-left:7px;padding:0;vertical-align:middle;
  border-radius:50%;border:none;cursor:default;
  background:rgba(242,243,245,.09);
  transition:background .3s;
  -webkit-tap-highlight-color:transparent;
}
/* 可视只有 7px，但可点区域撑到 45px：
   手指点不中太小的东西，命中区必须够大（视觉不变，只扩热区）。 */
.secret-dot::before{
  content:"";position:absolute;
  left:50%;top:50%;width:45px;height:45px;
  transform:translate(-50%,-50%);
  border-radius:50%;
}
.secret-dot:hover{background:rgba(242,243,245,.22)}

/* ---------- 轻提示（私人空间页面自足，不依赖 ui.js） ---------- */
.rt-toast{
  position:fixed;left:50%;bottom:34px;z-index:9500;
  transform:translate(-50%,14px);
  padding:11px 20px;border-radius:11px;
  font-size:13px;color:var(--text);
  background:rgba(24,26,31,.94);
  border:1px solid var(--stroke-hi);
  box-shadow:0 20px 48px -20px rgba(0,0,0,.9);
  backdrop-filter:blur(14px);
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease);
  white-space:nowrap;max-width:calc(100vw - 40px);
  overflow:hidden;text-overflow:ellipsis;
}
.rt-toast.show{opacity:1;transform:translate(-50%,0)}
.rt-toast-bad{border-color:rgba(255,55,95,.5);color:#FF8AA1}