.eo-drift{
  --d-red:#c41212;
  --d-paper:#f3f1ec;
  --d-panel:#fffcf6;
  --d-line:#111;
  --d-soft:rgba(17,17,17,.12);
  --d-muted:#666;
  --d-serif:"Noto Serif SC","Songti SC",serif;
  --d-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --d-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  background:linear-gradient(180deg,#ebe7df 0%,var(--d-paper) 140px,#f0eeea 100%);
  color:#111;
  font-family:var(--d-sans);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.eo-drift .bbs-mast .page-intro-main::after{display:none!important;content:none!important}
.eo-drift .bbs-mast .page-intro-main.drift-mast-pins{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:0!important;
  min-height:0!important;
  background:#050814!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);
}
.eo-drift .drift-mast-pin-h{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:0;
  padding:6px 12px 6px 10px;
  border-bottom:2px solid #c41212;
  overflow:hidden;
  background:#171717;
  color:#f2f2f0;
}
.eo-drift .drift-mph-mark{
  flex:0 0 auto;
  width:18px;
  height:18px;
  display:block;
}
.eo-drift .drift-mast-pin-h .page-intro-title{
  margin:0!important;
  flex:0 0 auto;
  font:700 15px/1 var(--d-serif)!important;
  letter-spacing:.06em;
  color:#f2f2f0!important;
}
.eo-drift .drift-mph-line{
  margin:0;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:500 12px/1 var(--d-sans);
  color:#9a9a96;
}
.eo-drift .drift-mph-rules{
  margin-left:auto;
  flex:0 0 auto;
  padding:3px 8px 2px;
  border:1px solid rgba(242,242,240,.28);
  background:transparent;
  font:600 10px/1 var(--d-mono);
  color:#c8c8c2;
  letter-spacing:.06em;
  white-space:nowrap;
}
.eo-drift .drift-mast-pins .drift-pin-board{
  flex:1;
  min-height:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.eo-drift .drift-pin-stage{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 70% 20%,rgba(60,90,160,.18),transparent 55%),
    url("/drift/assets/img/starfield-bg.jpg") center/cover no-repeat,
    #050814;
}
.eo-drift .drift-space{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
@keyframes drift-sp-drift{
  0%{transform:translate(0,0)}
  50%{transform:translate(8px,-6px)}
  100%{transform:translate(0,0)}
}
@keyframes drift-sp-drift-flip{
  0%{transform:scaleX(-1) translate(0,0)}
  50%{transform:scaleX(-1) translate(8px,-6px)}
  100%{transform:scaleX(-1) translate(0,0)}
}
@keyframes drift-sp-blink{
  0%,100%{opacity:.35;transform:scale(.9)}
  50%{opacity:.95;transform:scale(1.08)}
}
.eo-drift .drift-sp{
  position:absolute;
  display:block;
  user-select:none;
  filter:drop-shadow(0 0 6px rgba(160,200,255,.25));
}
.eo-drift .drift-sp.is-const{
  top:10%;left:8%;
  width:min(28%,120px);
  height:auto;
  opacity:.55;
  animation:drift-sp-drift 9s ease-in-out infinite;
}
.eo-drift .drift-sp.is-const2{
  top:18%;right:10%;
  width:min(20%,90px);
  height:auto;
  opacity:.4;
  animation:drift-sp-drift-flip 11s ease-in-out infinite;
}
.eo-drift .drift-sp.is-sat{
  top:12%;right:28%;
  width:min(16%,72px);
  height:auto;
  opacity:.7;
  animation:drift-sp-drift 7s ease-in-out infinite;
}
.eo-drift .drift-sp.is-spark{
  left:36%;top:14%;
  width:22px;height:22px;
  animation:drift-sp-blink 3.2s ease-in-out infinite;
}
.eo-drift .drift-sp.is-spark2{
  left:62%;top:36%;
  width:16px;height:16px;
  animation:drift-sp-blink 2.6s ease-in-out infinite .8s;
}
.eo-drift .drift-sp.is-spark3{
  left:18%;bottom:22%;
  width:14px;height:14px;
  animation:drift-sp-blink 3.8s ease-in-out infinite 1.4s;
}
.eo-drift .drift-pin-stage .drift-pin-board{
  position:relative;
  z-index:1;
}
@media (max-width:640px){
  .eo-drift .drift-mph-line{display:none}
}

.eo-drift .bbs-mast .page-intro-deck,
.eo-drift .bbs-mast .page-intro-deck.is-star,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"]{
  height:auto!important;
  min-height:100%!important;
  justify-content:flex-start!important;
  overflow:visible!important;
  gap:10px!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"]{
  /* 葡萄紫：与茶馆金 / 攻击红 / 悬赏铜明确区分 */
  --drift-star:#6b2d8b;
  --star-deck-photo:none!important;
  --star-deck-glass:transparent!important;
  position:relative!important;
  isolation:isolate!important;
  margin:0!important;
  padding:16px 14px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:
    linear-gradient(180deg,rgba(107,45,139,.14) 0%,transparent 42%),
    repeating-linear-gradient(45deg,#f8f0fc 0 7px,#eee0f5 7px 14px)!important;
  gap:12px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  overflow:hidden!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] > .pid-deck-photo,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] > .pid-deck-glass,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] > .pid-deck-blur,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] > .pid-deck-veil{
  display:none!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"]::before{
  content:""!important;
  position:absolute!important;
  top:0!important;left:0!important;right:0!important;bottom:auto!important;
  height:5px!important;width:auto!important;
  z-index:3!important;
  background:var(--drift-star)!important;
  opacity:1!important;
  display:block!important;
  pointer-events:none!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"]::after{
  display:none!important;content:none!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-label{
  position:relative!important;z-index:1!important;
  display:inline-flex!important;align-items:center;gap:8px;
  padding:5px 10px!important;margin:0!important;
  border:1px solid #111!important;border-radius:0!important;
  background:#111!important;color:#fff!important;
  font-family:var(--bb-mono)!important;font-size:10px!important;font-weight:700;
  letter-spacing:.14em!important;text-transform:uppercase;
  box-shadow:none!important;text-shadow:none!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-label-mark{
  width:8px!important;height:8px!important;border-radius:0!important;
  background:var(--drift-star)!important;border:1px solid #fff!important;
  box-shadow:none!important;font-size:0!important;display:inline-block!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-orb,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-orb--avatar{
  position:relative!important;z-index:1!important;
  width:64px!important;height:64px!important;
  border-radius:0!important;
  border:1px solid #111!important;
  background:#111!important;color:#fff!important;
  box-shadow:3px 3px 0 var(--drift-star)!important;
  overflow:hidden!important;
  display:grid!important;place-items:center;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-player{
  position:relative!important;z-index:1!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) minmax(108px,38%)!important;
  align-items:center!important;
  gap:10px!important;
  width:100%;box-sizing:border-box;
  padding:10px!important;margin:0!important;
  border:1px solid #111!important;border-radius:0!important;
  background:#fff!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  flex-direction:unset!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-meta{
  flex:1!important;min-width:0!important;overflow:visible!important;
  color:#111!important;text-shadow:none!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-k{
  font-family:var(--bb-mono);font-size:10px;color:rgba(0,0,0,.4);
  flex:0 0 auto!important;white-space:nowrap!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-nick,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-region,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-talents{
  display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  align-items:baseline!important;gap:0 4px!important;margin:0!important;
  min-width:0!important;max-width:100%!important;overflow:visible!important;
  white-space:nowrap!important;line-height:1.4!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-v{
  flex:1 1 auto!important;min-width:0!important;
  font-family:var(--bb-serif);font-size:13px;font-weight:700;color:#111!important;
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-sign{
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  gap:5px!important;min-width:0!important;padding:6px 8px!important;
  border-left:1px solid #ccc!important;align-self:stretch!important;box-sizing:border-box!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-sign-motto{
  margin:0!important;font-family:var(--bb-serif)!important;font-size:12px!important;
  font-weight:700!important;line-height:1.45!important;color:#111!important;display:block!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-sign-yi{
  margin:0!important;display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;gap:4px!important;
  font-family:var(--bb-mono)!important;font-size:10px!important;font-weight:700!important;
  letter-spacing:.02em!important;color:rgba(17,17,17,.72)!important;line-height:1.4!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-sign-yi-lab{
  display:inline-block!important;margin:0!important;padding:1px 5px!important;
  border:1px solid #111!important;background:var(--drift-star)!important;color:#fff!important;
  font-size:9px!important;letter-spacing:.08em!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-sign-yi-txt{
  display:block!important;white-space:normal!important;word-break:break-word!important;
  color:rgba(17,17,17,.72)!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips{
  position:relative!important;z-index:3!important;
  display:grid!important;grid-template-columns:repeat(3,1fr)!important;
  gap:0!important;width:100%;margin:0!important;padding:0!important;list-style:none;
  border:1px solid #111!important;background:#fff!important;box-shadow:none!important;
  pointer-events:auto!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act]{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  margin:0!important;
  padding:8px 4px!important;
  border:0!important;
  border-right:1px solid #111!important;
  border-radius:0!important;
  background:#fff!important;
  color:#111!important;
  font:700 11px/1 var(--d-sans)!important;
  letter-spacing:.04em!important;
  box-shadow:none!important;
  cursor:pointer!important;
  user-select:none!important;
  pointer-events:auto!important;
  transition:background .12s ease,color .12s ease!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act]:last-child{
  border-right:0!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act]:hover{
  background:#111!important;
  color:#fff!important;
  transform:none!important;
  box-shadow:none!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act]:active{
  background:#222!important;
  transform:none!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act] em{
  display:none!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips .pid-ico{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  line-height:0!important;
  color:inherit!important;
  opacity:.92!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips .pid-ico svg{
  display:block!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act="like"] .pid-ico{
  color:#e11d48!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act="gift"] .pid-ico{
  color:#0a6bb8!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act="friend"] .pid-ico{
  color:#111!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act]:hover .pid-ico,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act]:hover .pid-ico svg,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips li[data-act]:hover .pid-lab{
  color:#fff!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-chips .pid-lab{
  line-height:1!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"].is-anon-star .pid-chips li[data-act],
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"].is-empty-star .pid-chips li[data-act]{
  color:#666!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"].is-anon-star .pid-chips li[data-act] .pid-ico,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"].is-empty-star .pid-chips li[data-act] .pid-ico{
  color:#888!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-meter > i,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-heat-dot{
  background:var(--drift-star)!important;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-foot,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-heat-lab,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-heat-pct{
  color:#111!important;text-shadow:none!important;
}
@media (max-width:640px){
  .eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-player{
    grid-template-columns:48px minmax(0,1fr)!important;
  }
  .eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-orb,
  .eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-orb--avatar{
    width:48px!important;height:48px!important;
  }
  .eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .pid-sign{
    grid-column:1 / -1;
    border-left:none!important;
    border-top:1px solid #ccc!important;
    padding:8px 0 0!important;
  }
}
.eo-drift .page-intro-deck .drift-deck,
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .drift-deck{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:calc(100% + 28px);
  max-width:none;
  box-sizing:border-box;
  margin:10px -14px -16px;
  padding:12px 14px 16px;
  border-top:1px solid #111;
  border-radius:0;
  background:var(--d-paper);
  background-image:none;
  color:#111;
  box-shadow:none;
  isolation:isolate;
}
.eo-drift .page-intro-deck.is-star[data-star-kind="drift"] .drift-deck-tip{
  color:var(--d-muted);
}
.eo-drift .drift-deck-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  width:100%;
}
.drift-act{
  --act-ink:#111;
  --act-wash:#fffdf8;
  --act-mark:#1a1a1a;
  --act-mark-2:#2a2a2a;
  --act-mark-fg:#f3eee4;
  --act-glow:rgba(255,255,255,.14);
  position:relative;
  display:flex;
  align-items:stretch;
  gap:0;
  width:100%;
  margin:0;
  padding:0;
  border:1px solid var(--act-ink);
  background:var(--act-wash);
  color:var(--act-ink);
  text-align:left;
  cursor:pointer;
  font:inherit;
  box-shadow:2px 2px 0 rgba(17,17,17,.12);
  overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease;
}
.drift-act:hover:not(:disabled){
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 rgba(17,17,17,.16);
}
.drift-act:active:not(:disabled){
  transform:translate(1px,1px);
  box-shadow:1px 1px 0 rgba(17,17,17,.12);
}
.drift-act:disabled{opacity:.42;cursor:not-allowed}
.drift-act:focus-visible{outline:2px solid var(--d-red);outline-offset:2px}
.drift-act-mark{
  position:relative;
  z-index:1;
  flex:0 0 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--act-ink);
  color:var(--act-mark-fg);
  background:
    radial-gradient(circle at 30% 22%,var(--act-glow),transparent 42%),
    linear-gradient(155deg,var(--act-mark) 0%,var(--act-mark-2) 100%);
}
.drift-act-mark::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
  pointer-events:none;
}
.drift-act-mark::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--act-pattern);
  opacity:.55;
  pointer-events:none;
}
.drift-act-mark svg,
.drift-act-mark i{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  height:auto;
  font-size:22px;
  line-height:1;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.drift-act.is-write{
  --act-mark:#d6452f;
  --act-mark-2:#8f1a12;
  --act-mark-fg:#fff4ef;
  --act-wash:#fff7f3;
  --act-glow:rgba(255,210,190,.35);
  --act-pattern:repeating-linear-gradient(
    -28deg,
    transparent 0 4px,
    rgba(255,255,255,.1) 4px 5px
  );
}
.drift-act.is-cast{
  --act-mark:#3a8aa3;
  --act-mark-2:#16485c;
  --act-mark-fg:#eef8fb;
  --act-wash:#f3f8fa;
  --act-glow:rgba(180,230,245,.32);
  --act-pattern:repeating-linear-gradient(
    0deg,
    transparent 0 5px,
    rgba(255,255,255,.1) 5px 6px
  ),
  repeating-linear-gradient(
    90deg,
    transparent 0 5px,
    rgba(0,0,0,.08) 5px 6px
  );
}
.drift-act.is-sea{
  --act-mark:#3d6d7c;
  --act-mark-2:#1a3040;
  --act-mark-fg:#e4f0f4;
  --act-wash:#f2f5f7;
  --act-glow:rgba(150,210,220,.28);
  --act-pattern:repeating-linear-gradient(
    180deg,
    transparent 0 6px,
    rgba(255,255,255,.12) 6px 7px,
    transparent 7px 11px,
    rgba(0,0,0,.1) 11px 12px
  );
}
.drift-act.is-mine{
  --act-mark:#e0a93a;
  --act-mark-2:#8a5f0e;
  --act-mark-fg:#fff8e6;
  --act-wash:#fbf6ea;
  --act-glow:rgba(255,230,160,.4);
  --act-pattern:repeating-linear-gradient(
    45deg,
    transparent 0 5px,
    rgba(255,255,255,.14) 5px 6px
  ),
  repeating-linear-gradient(
    -45deg,
    transparent 0 5px,
    rgba(0,0,0,.08) 5px 6px
  );
}
.drift-act-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:0;
  padding:9px 10px 8px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.4),transparent 36%),
    var(--act-wash);
}
.drift-act-body strong{
  font:700 13px/1.15 var(--d-serif);
  letter-spacing:.04em;
}
.drift-act-body em{
  font:500 10px/1.25 var(--d-sans);
  font-style:normal;
  color:#5c574e;
  letter-spacing:.02em;
}
.drift-act.is-write .drift-act-body strong{color:#8f1a12}
.drift-act.is-cast .drift-act-body strong{color:#16485c}
.drift-act.is-sea .drift-act-body strong{color:#1d3340}
.drift-act.is-mine .drift-act-body strong{color:#7a580e}
.drift-deck-tip{
  margin:2px 0 0;
  font-size:11px;
  line-height:1.45;
  color:var(--d-muted);
}
.drift-rail select{
  width:100%;
  border:1px solid var(--d-line);
  background:#fff;
  padding:7px 8px;
  font:600 12px/1.2 var(--d-sans);
}

.drift-page{
  max-width:var(--page-w,1280px);
  margin:0 auto;
  padding:0 var(--gx,20px) 24px;
  position:relative;
}
.drift-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:2147483000;
  max-width:min(90vw,360px);
  padding:10px 14px;
  border:1px solid var(--d-line);
  background:#111;
  color:#fff;
  font-size:13px;
  box-shadow:4px 4px 0 rgba(17,17,17,.2);
  pointer-events:none;
}
dialog.drift-dlg[open] .drift-toast{
  z-index:10;
  bottom:24px;
}

.drift-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--d-line);
  background:#fff;
  color:#111;
  padding:8px 14px;
  font:600 13px/1.2 var(--d-sans);
  cursor:pointer;
  text-decoration:none;
}
.drift-btn:disabled{opacity:.45;cursor:not-allowed}
.drift-btn-primary{background:var(--d-red);border-color:#8f0e0e;color:#fff}
.drift-btn-sm{padding:5px 10px;font-size:12px}
.drift-btn-block{width:100%}
.drift-btn:hover:not(:disabled){filter:brightness(.97)}
.drift-btn:focus-visible{outline:2px solid var(--d-red);outline-offset:2px}

.drift-pin-board{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:14px 10px 16px;
  min-height:120px;
  box-sizing:border-box;
  background:transparent;
}
.drift-pin-board:empty::before{
  content:"还没有人置顶。墙上的纸条可以花积分抢这里。";
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:88px;
  padding:12px;
  text-align:center;
  color:#d8e2ff;
  font-size:12px;
  background:rgba(4,6,18,.55);
  border:1px dashed rgba(160,180,255,.28);
  box-sizing:border-box;
}
.drift-pin-row{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:8px;
  width:100%;
}
.drift-pin-row.is-row1 .drift-pin{width:min(72%,280px)}
.drift-pin-row.is-row2 .drift-pin{width:min(200px,calc(50% - 6px))}
.drift-pin-row.is-row3{gap:8px}
.drift-pin-row.is-row3 .drift-pin{
  width:min(200px,calc(33.333% - 6px));
  flex:1 1 0;
}

@keyframes drift-pin-in{
  from{opacity:0;transform:translateY(-10px) rotate(var(--tilt,0deg))}
  to{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg))}
}
@keyframes drift-nail-glint{
  0%,70%{opacity:.35}
  85%{opacity:.95}
  100%{opacity:.35}
}
@keyframes drift-seal-breathe{
  0%,100%{transform:rotate(-12deg) scale(1)}
  50%{transform:rotate(-8deg) scale(1.03)}
}
@keyframes drift-pin-sheen-run{
  0%{transform:translateX(-140%)}
  55%,100%{transform:translateX(140%)}
}

.drift-pin{
  --tilt:0deg;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-height:78px;
  padding:18px 9px 8px;
  border:1px solid #111;
  background:#fffef9;
  cursor:pointer;
  text-align:left;
  font:inherit;
  color:inherit;
  overflow:hidden;
  isolation:isolate;
  box-shadow:
    2px 2px 0 rgba(17,17,17,.1),
    0 1px 0 rgba(255,255,255,.55) inset;
  animation:drift-pin-in .45s ease both;
  animation-delay:var(--d,0s);
  transition:transform .18s ease,box-shadow .18s ease;
}
.drift-pin::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 17px,
      rgba(17,17,17,.035) 17px,
      rgba(17,17,17,.035) 18px
    );
  opacity:.55;
  mix-blend-mode:multiply;
}
.drift-pin-who,
.drift-pin-body,
.drift-pin-meta{position:relative;z-index:1}
.drift-pin:hover{
  transform:translateY(-3px) rotate(var(--tilt,0deg));
  box-shadow:
    3px 5px 0 rgba(17,17,17,.12),
    0 1px 0 rgba(255,255,255,.6) inset;
}
.drift-pin:active{
  transform:translateY(-1px) rotate(var(--tilt,0deg));
}

.drift-pin-fold{
  position:absolute;
  top:0;right:0;
  width:0;height:0;
  border-style:solid;
  border-width:0 16px 16px 0;
  border-color:transparent #e8e2d4 transparent transparent;
  filter:drop-shadow(-1px 1px 0 rgba(17,17,17,.12));
  z-index:2;
  pointer-events:none;
}
.drift-pin-fold::after{
  content:"";
  position:absolute;
  top:0;right:-16px;
  width:0;height:0;
  border-style:solid;
  border-width:0 16px 16px 0;
  border-color:transparent transparent rgba(17,17,17,.06) transparent;
}

.drift-pin-sheen{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(
    115deg,
    transparent 40%,
    rgba(255,255,255,.28) 48%,
    transparent 56%
  );
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.drift-pin:hover .drift-pin-sheen{transform:translateX(120%)}

.drift-pin-nail{
  position:absolute;
  top:5px;left:50%;
  width:9px;height:9px;
  margin-left:-4.5px;
  border-radius:50%;
  border:1px solid #111;
  background:
    radial-gradient(circle at 35% 30%,#fff6 0 28%,transparent 40%),
    var(--d-red);
  box-shadow:
    0 1px 0 #111,
    0 2px 3px rgba(17,17,17,.25);
  z-index:4;
}
.drift-pin-nail i{
  display:block;
  position:absolute;
  top:1px;left:2px;
  width:3px;height:2px;
  border-radius:50%;
  background:rgba(255,255,255,.7);
  animation:drift-nail-glint 2.8s ease-in-out infinite;
}

.drift-pin-badge{
  position:absolute;
  top:6px;left:6px;
  display:inline-flex;
  align-items:center;
  gap:3px;
  z-index:3;
}
.drift-pin-badge i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 3px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font:700 10px/1 var(--d-mono);
  font-style:normal;
}
.drift-pin-badge em{
  font:700 10px/1 var(--d-serif);
  font-style:normal;
  color:#555;
}

.drift-pin-ribbon{
  position:absolute;
  top:0;right:18px;left:auto;
  width:14px;height:18px;
  background:var(--d-red);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);
  opacity:.88;
  z-index:2;
  pointer-events:none;
  box-shadow:1px 0 0 rgba(17,17,17,.15);
}
.drift-pin-seal{
  position:absolute;
  right:10px;bottom:8px;
  width:34px;height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(158,28,28,.75);
  border-radius:50%;
  color:rgba(158,28,28,.72);
  font:700 15px/1 var(--d-serif);
  letter-spacing:.02em;
  transform:rotate(-12deg);
  background:radial-gradient(circle at 40% 35%,rgba(255,240,230,.35),transparent 60%);
  box-shadow:inset 0 0 0 1px rgba(158,28,28,.25);
  pointer-events:none;
  z-index:2;
  animation:drift-seal-breathe 4.5s ease-in-out infinite;
}

.drift-pin-who{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
  min-width:0;
}
.drift-pin-av,
.drift-pin-av.is-empty{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border:1px solid #111;
  border-radius:50%;
  object-fit:cover;
  background:#eee;
  display:block;
}
.drift-pin-av.is-empty{
  background:
    linear-gradient(135deg,#ddd 25%,#f0f0f0 25% 50%,#ddd 50% 75%,#f0f0f0 75%);
  background-size:6px 6px;
}
.drift-pin-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:600 11px/1.2 var(--d-sans);
  color:#333;
}
.drift-pin-body{
  margin:0;
  font:600 12px/1.4 var(--d-serif);
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.drift-pin-meta{
  margin-top:auto;
  display:flex;
  align-items:baseline;
  gap:3px;
  font:500 10px/1 var(--d-mono);
  color:#666;
}
.drift-pin-meta b{
  font:700 13px/1 var(--d-serif);
  color:var(--d-red);
}

.drift-pin.is-r1{
  --tilt:-.4deg;
  min-height:108px;
  padding:22px 12px 10px;
  border:2px solid #b8860b;
  background:linear-gradient(165deg,#fff6d4 0%,#fffaf0 42%,#fffdf8 100%);
  box-shadow:
    3px 3px 0 rgba(17,17,17,.14),
    inset 0 0 0 1px rgba(184,134,11,.28),
    0 0 14px rgba(201,162,39,.28);
  animation:drift-pin-in .45s ease both;
  animation-delay:var(--d,0s);
}
.drift-pin.is-r1 .drift-pin-sheen{
  z-index:3;
  background:linear-gradient(
    105deg,
    transparent 38%,
    rgba(255,236,170,.2) 46%,
    rgba(255,255,255,.7) 50%,
    rgba(255,210,100,.35) 54%,
    transparent 62%
  );
  transform:translateX(-140%);
  transition:none;
  animation:drift-pin-sheen-run 2.5s ease-in-out infinite;
}
.drift-pin.is-r1 .drift-pin-fold{
  border-color:transparent #e8d9a8 transparent transparent;
}
.drift-pin.is-r1 .drift-pin-ribbon{
  right:20px;
  width:16px;height:22px;
  background:#b8860b;
}
.drift-pin.is-r1 .drift-pin-nail{
  width:12px;height:12px;
  margin-left:-6px;
  background:
    radial-gradient(circle at 35% 30%,#fff8 0 30%,transparent 42%),
    #b8860b;
  box-shadow:0 0 0 2px #fff3c8,0 1px 0 #111,0 2px 4px rgba(17,17,17,.28);
}
.drift-pin.is-r1 .drift-pin-badge i{
  min-width:22px;height:22px;
  background:#b8860b;
  font-size:12px;
}
.drift-pin.is-r1 .drift-pin-badge em{
  padding:3px 6px;
  border:1px solid #111;
  background:#111;
  color:#f6e7b0;
  font-size:11px;
  letter-spacing:.04em;
}
.drift-pin.is-r1 .drift-pin-av{width:30px;height:30px;border-width:2px}
.drift-pin.is-r1 .drift-pin-name{font-size:12px;color:#b45309}
.drift-pin.is-r1 .drift-pin-body{
  font-size:15px;
  -webkit-line-clamp:3;
  color:#d97706;
}
.drift-pin.is-r1 .drift-pin-meta{
  padding-top:6px;
  border-top:1px dashed rgba(17,17,17,.16);
}
.drift-pin.is-r1 .drift-pin-meta b{font-size:16px;color:#ea580c}
.drift-pin.is-r1:hover{
  box-shadow:
    4px 7px 0 rgba(17,17,17,.14),
    inset 0 0 0 1px rgba(184,134,11,.35),
    0 0 0 1px rgba(201,162,39,.25),
    0 0 12px rgba(201,162,39,.18);
}

.drift-pin.is-r2{
  --tilt:.35deg;
  min-height:92px;
  border:2px solid #1f5f7a;
  background:linear-gradient(180deg,#eef5f8 0%,#f7fbfd 100%);
  box-shadow:2px 2px 0 rgba(31,95,122,.18),0 1px 0 rgba(255,255,255,.5) inset;
  animation:drift-pin-in .45s ease both;
  animation-delay:var(--d,0s);
}
.drift-pin.is-r2 .drift-pin-sheen{
  z-index:3;
  background:linear-gradient(
    105deg,
    transparent 40%,
    rgba(180,230,245,.25) 48%,
    rgba(255,255,255,.45) 50%,
    rgba(120,190,210,.2) 52%,
    transparent 60%
  );
  transform:translateX(-140%);
  transition:none;
  animation:drift-pin-sheen-run 3.8s ease-in-out infinite .4s;
}
.drift-pin.is-r2 .drift-pin-ribbon{background:#1f5f7a;right:18px}
.drift-pin.is-r2 .drift-pin-fold{border-color:transparent #cfdfe6 transparent transparent}
.drift-pin.is-r2 .drift-pin-nail{background:radial-gradient(circle at 35% 30%,#fff7 0 28%,transparent 40%),#1f5f7a}
.drift-pin.is-r2 .drift-pin-badge i{background:#1f5f7a}
.drift-pin.is-r2 .drift-pin-badge em{color:#0ea5a8}
.drift-pin.is-r2 .drift-pin-body{font-size:13px;color:#0d9488}
.drift-pin.is-r2 .drift-pin-name{color:#0f766e}
.drift-pin.is-r2 .drift-pin-meta b{color:#14b8a6;font-size:14px}

.drift-pin.is-r3{
  --tilt:-.25deg;
  min-height:92px;
  border:2px solid #8b5a2b;
  background:linear-gradient(180deg,#f8f0e6 0%,#fbf7f1 100%);
  box-shadow:2px 2px 0 rgba(139,69,19,.16),0 1px 0 rgba(255,255,255,.5) inset;
  animation:drift-pin-in .45s ease both;
  animation-delay:var(--d,0s);
}
.drift-pin.is-r3 .drift-pin-sheen{
  z-index:3;
  background:linear-gradient(
    105deg,
    transparent 40%,
    rgba(240,210,170,.22) 48%,
    rgba(255,255,255,.4) 50%,
    rgba(196,160,122,.18) 52%,
    transparent 60%
  );
  transform:translateX(-140%);
  transition:none;
  animation:drift-pin-sheen-run 4.4s ease-in-out infinite .8s;
}
.drift-pin.is-r3 .drift-pin-ribbon{background:#a78bfa;right:18px}
.drift-pin.is-r3 .drift-pin-fold{border-color:transparent #e8dff8 transparent transparent}
.drift-pin.is-r3 .drift-pin-nail{background:radial-gradient(circle at 35% 30%,#fff7 0 28%,transparent 40%),#a78bfa}
.drift-pin.is-r3 .drift-pin-badge i{background:#8b5cf6}
.drift-pin.is-r3 .drift-pin-badge em{color:#7c3aed}
.drift-pin.is-r3 .drift-pin-body{font-size:13px;color:#7c3aed}
.drift-pin.is-r3 .drift-pin-name{color:#6d28d9}
.drift-pin.is-r3 .drift-pin-meta b{color:#8b5cf6;font-size:14px}

.drift-pin.is-r4{
  --tilt:.2deg;
  min-height:92px;
  border-width:2px;
  background:#fffefb;
  box-shadow:2px 2px 0 rgba(17,17,17,.1),0 1px 0 rgba(255,255,255,.5) inset;
}
.drift-pin.is-r5{
  --tilt:-.15deg;
  min-height:92px;
  border-width:2px;
  background:#fafafa;
  box-shadow:2px 2px 0 rgba(17,17,17,.1),0 1px 0 rgba(255,255,255,.5) inset;
}
.drift-pin.is-r6{
  --tilt:.1deg;
  min-height:92px;
  border-width:2px;
  background:#f7f7f5;
  box-shadow:2px 2px 0 rgba(17,17,17,.1),0 1px 0 rgba(255,255,255,.5) inset;
}
.drift-pin.is-r4 .drift-pin-nail,
.drift-pin.is-r5 .drift-pin-nail,
.drift-pin.is-r6 .drift-pin-nail{
  background:radial-gradient(circle at 35% 30%,#fff6 0 28%,transparent 40%),#555;
}
.drift-pin.is-r4 .drift-pin-badge i,
.drift-pin.is-r5 .drift-pin-badge i,
.drift-pin.is-r6 .drift-pin-badge i{
  background:#111;
  color:#fff;
}
.drift-pin.is-r4 .drift-pin-badge em,
.drift-pin.is-r5 .drift-pin-badge em,
.drift-pin.is-r6 .drift-pin-badge em{color:#555}
.drift-pin.is-r4 .drift-pin-body,
.drift-pin.is-r5 .drift-pin-body,
.drift-pin.is-r6 .drift-pin-body{font-size:13px}
.drift-pin.is-r4 .drift-pin-meta b,
.drift-pin.is-r5 .drift-pin-meta b,
.drift-pin.is-r6 .drift-pin-meta b{font-size:14px;color:#555}

@media (prefers-reduced-motion:reduce){
  .drift-pin,
  .drift-pin-nail i,
  .drift-pin-seal,
  .drift-pin-sheen,
  .drift-sp{animation:none!important;transition:none!important;opacity:.55}
  .drift-pin:hover .drift-pin-sheen{transform:none}
  .drift-pin.is-r1{
    border-color:#b8860b;
    background:linear-gradient(165deg,#fff6d4 0%,#fffaf0 42%,#fffdf8 100%);
    box-shadow:
      3px 3px 0 rgba(17,17,17,.14),
      inset 0 0 0 1px rgba(184,134,11,.28);
  }
  .drift-pin.is-r2{
    border-color:#1f5f7a;
    background:linear-gradient(180deg,#eef5f8 0%,#f7fbfd 100%);
  }
  .drift-pin.is-r3{
    border-color:#8b5a2b;
    background:linear-gradient(180deg,#f8f0e6 0%,#fbf7f1 100%);
  }
}

.drift-note-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:12px;
  min-height:80px;
}
.drift-note-grid:empty::before{
  content:"这一批还没有纸条。";
  grid-column:1/-1;
  padding:28px 12px;
  text-align:center;
  color:var(--d-muted);
  font-size:13px;
}
.drift-note{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:110px;
  padding:12px 12px 12px 14px;
  border:1px solid var(--d-line);
  background:var(--d-panel);
  cursor:pointer;
  text-align:left;
  font:inherit;
  color:inherit;
  position:relative;
}
.drift-note::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--d-red);
}
.drift-note:hover{background:#fff}
.drift-note-body{
  margin:0;
  font:600 14px/1.5 var(--d-serif);
  word-break:break-word;
}
.drift-note-meta{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  color:var(--d-muted);
}
.drift-note-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.drift-note-actions .drift-btn{padding:4px 8px;font-size:11px}
.drift-note-who{
  display:flex;
  align-items:center;
  gap:8px;
}
.drift-note-av,
.drift-note-av.is-empty{
  width:24px;height:24px;
  border:1px solid #111;
  border-radius:50%;
  object-fit:cover;
  background:#eee;
  display:block;
}
.drift-note-av.is-empty{
  background:
    linear-gradient(135deg,#ddd 25%,#f0f0f0 25% 50%,#ddd 50% 75%,#f0f0f0 75%);
  background-size:6px 6px;
}
.drift-note-who span{
  font:600 12px/1.2 var(--d-sans);
  color:#444;
}

.drift-sea,
.drift-bay{
  position:relative;
  width:100%;
  min-height:0;
  aspect-ratio:2 / 3;
  height:auto;
  max-height:min(78vh,620px);
  overflow:hidden;
  border:0;
  background:#12243a;
  color:#d7e6f0;
}
.drift-bay-scene{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
  user-select:none;
}
.drift-bay-skyfx{
  position:absolute;
  inset:0 0 55% 0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.drift-bay-star{
  position:absolute;
  width:2px;height:2px;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  opacity:.35;
  animation:drift-star-twinkle 1.6s ease-in-out infinite;
}
.drift-bay-star.is-sm{
  width:1.5px;height:1.5px;
  opacity:.22;
  animation-duration:2s;
  animation-delay:.35s;
}
.drift-bay-star:nth-child(3){animation-delay:.2s}
.drift-bay-star:nth-child(5){animation-delay:.55s}
.drift-bay-waterfx{
  position:absolute;
  left:0;
  right:0;
  top:34%;
  height:30%;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.drift-bay-foam{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:46%;
  opacity:0;
  filter:blur(.4px);
}
.drift-bay-foam.is-1{
  background:
    radial-gradient(ellipse 26% 55% at 18% 72%,rgba(255,255,255,.28) 0 28%,transparent 68%),
    radial-gradient(ellipse 18% 48% at 48% 58%,rgba(255,255,255,.16) 0 24%,transparent 64%),
    radial-gradient(ellipse 22% 52% at 82% 70%,rgba(255,255,255,.22) 0 26%,transparent 66%);
  animation:drift-foam-a 7.4s ease-in-out infinite;
}
.drift-bay-foam.is-2{
  height:38%;
  background:
    radial-gradient(ellipse 20% 50% at 32% 64%,rgba(236,246,255,.2) 0 26%,transparent 65%),
    radial-gradient(ellipse 24% 58% at 64% 78%,rgba(255,255,255,.26) 0 30%,transparent 70%);
  animation:drift-foam-b 9.1s ease-in-out infinite;
  animation-delay:-2.6s;
}
.drift-bay-foam.is-3{
  height:52%;
  background:
    radial-gradient(ellipse 30% 40% at 8% 80%,rgba(220,236,248,.12) 0 22%,transparent 60%),
    radial-gradient(ellipse 16% 46% at 55% 50%,rgba(255,255,255,.14) 0 22%,transparent 62%),
    radial-gradient(ellipse 20% 44% at 92% 62%,rgba(236,246,255,.18) 0 24%,transparent 64%);
  animation:drift-foam-c 11.2s ease-in-out infinite;
  animation-delay:-5.1s;
}
.drift-bay-ripple{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  width:28px;height:10px;
  margin:-5px 0 0 -14px;
  border-radius:50%;
  border:2px solid rgba(210,230,245,.35);
  opacity:0;
  pointer-events:none;
}
.drift-bay.is-dipping .drift-bay-ripple{
  animation:drift-bay-ripple .72s ease-out forwards;
}
.drift-bay-beam{
  position:absolute;
  left:50%;
  top:48%;
  z-index:5;
  width:0;
  height:0;
  pointer-events:none;
  opacity:0;
  --beam-x:50%;
  --beam-y:48%;
}
.drift-bay.is-searching .drift-bay-beam,
.drift-bay.is-lock .drift-bay-beam{
  opacity:1;
}
.drift-bay.is-searching .drift-bay-beam{
  animation:drift-beam-hunt 2.1s ease-in-out forwards;
}
.drift-bay.is-lock .drift-bay-beam{
  left:var(--beam-x);
  top:var(--beam-y);
  animation:none;
}
.drift-bay-beam-cone{
  position:absolute;
  left:0;
  bottom:8px;
  width:70px;
  height:130px;
  margin-left:-35px;
  background:linear-gradient(0deg,rgba(255,244,190,.5) 0%,rgba(255,230,140,.18) 45%,transparent 100%);
  clip-path:polygon(38% 100%,62% 100%,100% 0,0 0);
  filter:blur(.4px);
  transform-origin:50% 100%;
  opacity:.9;
  pointer-events:none;
}
.drift-bay.is-lock .drift-bay-beam-cone{
  height:110px;
  opacity:1;
  filter:blur(0);
}
.drift-bay-beam-spot{
  position:absolute;
  left:0;
  top:0;
  width:84px;
  height:30px;
  margin:-15px 0 0 -42px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,246,200,.75) 0 28%,rgba(255,230,150,.3) 48%,transparent 72%);
  box-shadow:0 0 18px rgba(255,236,170,.45);
  pointer-events:none;
}
.drift-bay.is-lock .drift-bay-beam-spot{
  width:96px;
  height:34px;
  margin:-17px 0 0 -48px;
  background:radial-gradient(ellipse,rgba(255,250,220,.92) 0 30%,rgba(255,230,150,.42) 50%,transparent 74%);
  animation:drift-beam-spot-pulse 1s ease-in-out infinite;
}
.drift-sea-ask{
  position:absolute;
  left:50%;
  bottom:92px;
  top:auto;
  z-index:14;
  transform:translateX(-50%);
  width:auto;
  max-width:min(78%,220px);
  padding:10px 12px 9px;
  border:1px solid rgba(20,16,10,.5);
  border-radius:2px;
  background:#f6f1e6;
  box-shadow:2px 2px 0 rgba(0,0,0,.16);
  color:#1c1a16;
  text-align:left;
}
.drift-sea-ask[hidden]{display:none!important}
.drift-sea-ask-txt{
  margin:0 0 8px;
  font:500 12px/1.45 var(--d-sans,"PingFang SC","Microsoft YaHei",sans-serif);
  white-space:normal;
  color:#2a2620;
  letter-spacing:.01em;
}
.drift-sea-ask-acts{
  display:flex;
  gap:14px;
  justify-content:flex-end;
  align-items:center;
}
.drift-sea-ask-acts button{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  font:600 12px/1 var(--d-sans,"PingFang SC","Microsoft YaHei",sans-serif);
  color:#5a5348;
  cursor:pointer;
}
.drift-sea-ask-acts button.is-yes{
  color:#1a5f78;
}
.drift-sea-ask-acts button:hover{opacity:.75}
.drift-sea-dock{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:16px 16px 20px;
  background:linear-gradient(180deg,transparent 0%,rgba(18,14,10,.35) 55%,rgba(18,14,10,.55) 100%);
}
.drift-sea-dock .drift-hint{
  display:block;
  margin:0;
  color:rgba(255,248,236,.78);
  font:500 12px/1.4 var(--d-sans,"PingFang SC","Microsoft YaHei",sans-serif);
  text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.drift-sea-cast{
  min-width:120px;
  min-height:40px;
  border-radius:2px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(255,248,236,.14)!important;
  color:#fff8ec!important;
  font:600 14px/1 var(--d-sans,"PingFang SC","Microsoft YaHei",sans-serif)!important;
  letter-spacing:.16em;
  box-shadow:none!important;
  backdrop-filter:blur(2px);
}
.drift-sea-cast:hover{background:rgba(255,248,236,.22)!important;filter:none}
.drift-sea-cast:disabled{opacity:.45}
.drift-bay.has-float .drift-sea-empty,
.drift-bay.is-dipping .drift-sea-empty,
.drift-bay.is-lifting .drift-sea-empty,
.drift-bay.is-busy .drift-sea-empty,
.drift-bay.is-searching .drift-sea-empty,
.drift-bay.is-lock .drift-sea-empty{display:none}
.drift-sea-empty{
  position:absolute;
  left:50%;
  top:42%;
  z-index:4;
  transform:translate(-50%,-50%);
  margin:0;
  max-width:18em;
  white-space:nowrap;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:rgba(236,242,250,.78);
  font:500 13px/1.6 "PingFang SC","Microsoft YaHei",sans-serif;
  text-align:center;
  letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  pointer-events:none;
}
.drift-bottle{
  position:absolute;
  left:var(--bottle-x,50%);
  top:var(--bottle-y,48%);
  z-index:7;
  width:76px;
  height:108px;
  margin:0;padding:0;border:0;
  background:transparent url("/drift/assets/img/sea/wx-bottle.png") center / contain no-repeat;
  cursor:pointer;
  transform:translate(-50%,28%) scale(.12);
  opacity:0;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));
  pointer-events:none;
  transform-origin:center center;
}
.drift-bay.has-float .drift-bottle{
  opacity:1;
  transform:translate(-50%,0) scale(1) rotate(-6deg);
  pointer-events:auto;
  animation:drift-bottle-bob 3.6s ease-in-out infinite;
  transition:transform .85s cubic-bezier(.22,.7,.2,1),opacity .4s ease;
}
.drift-bay.is-lifting .drift-bottle{
  opacity:1;
  transform:translate(-50%,14%) scale(.78) rotate(2deg);
  transition:transform .8s cubic-bezier(.22,.7,.2,1),opacity .3s ease;
  animation:none;
  pointer-events:none;
}
.drift-bay.is-searching .drift-bottle,
.drift-bay.is-dipping .drift-bottle{opacity:0}
.drift-bottle.is-shake{
  animation:drift-bottle-shake .5s ease-in-out 3!important;
}
.drift-bottle.is-glow{
  animation:none!important;
  filter:drop-shadow(0 0 12px rgba(255,236,180,.95)) drop-shadow(0 0 26px rgba(255,210,110,.5));
  transform:translate(-50%,-6%) scale(1.08)!important;
  transition:transform .35s ease,filter .35s ease;
}
.drift-bottle.is-toss{
  animation:drift-bottle-toss 1.05s cubic-bezier(.25,.7,.2,1) forwards!important;
  pointer-events:none!important;
}
.drift-bottle:focus-visible{outline:2px solid rgba(242,230,184,.8);outline-offset:4px}
.drift-goldburst{
  position:absolute;
  left:50%;
  top:50%;
  z-index:6;
  width:10px;height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,rgba(255,240,190,.95) 0 18%,rgba(255,210,120,.4) 42%,transparent 70%);
}
.drift-goldburst.is-on{animation:drift-gold-burst .75s ease-out forwards}
.drift-splash{
  position:absolute;
  left:var(--splash-x,50%);
  top:var(--splash-y,48%);
  z-index:8;
  width:140px;
  height:90px;
  margin:-45px 0 0 -70px;
  pointer-events:none;
  opacity:0;
}
.drift-splash.is-on{
  opacity:1;
  animation:drift-splash-pop 1s ease-out forwards;
}
.drift-splash i{
  position:absolute;
  left:50%;
  top:55%;
  width:10px;height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:rgba(236,246,255,.95);
  box-shadow:0 0 0 2px rgba(180,210,230,.35);
  opacity:0;
}
.drift-splash.is-on i{animation:drift-splash-drop .85s ease-out forwards}
.drift-splash i:nth-child(1){--dx:-38px; --dy:-42px; --s:1.1}
.drift-splash i:nth-child(2){--dx:-12px; --dy:-52px; --s:1.35; animation-delay:.04s}
.drift-splash i:nth-child(3){--dx:18px; --dy:-48px; --s:1.2; animation-delay:.02s}
.drift-splash i:nth-child(4){--dx:42px; --dy:-36px; --s:.95; animation-delay:.06s}
.drift-splash i:nth-child(5){--dx:-28px; --dy:-18px; --s:.8; animation-delay:.08s}
.drift-splash i:nth-child(6){--dx:30px; --dy:-16px; --s:.85; animation-delay:.05s}
.drift-splash i:nth-child(7){
  width:72px;height:18px;border-radius:50%;
  left:50%;top:68%;
  background:radial-gradient(ellipse,rgba(230,242,252,.9) 0 35%,transparent 70%);
  box-shadow:none;
}
.drift-splash.is-on i:nth-child(7){
  animation:drift-splash-ring .9s ease-out forwards;
}
@keyframes drift-bay-ripple{
  0%{opacity:0;transform:scale(.4)}
  35%{opacity:.8;transform:scale(2.2)}
  100%{opacity:0;transform:scale(4.5)}
}
@keyframes drift-beam-hunt{
  0%{left:18%;top:36%;opacity:.55}
  22%{left:72%;top:42%;opacity:.9}
  48%{left:30%;top:50%;opacity:.8}
  72%{left:64%;top:40%;opacity:.95}
  100%{left:var(--beam-x);top:var(--beam-y);opacity:1}
}
@keyframes drift-beam-spot-pulse{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
@keyframes drift-star-twinkle{
  0%,100%{opacity:.2;transform:scale(.7)}
  50%{opacity:1;transform:scale(1.55)}
}
@keyframes drift-foam-a{
  0%,100%{opacity:.2;transform:translate(0,4px)}
  35%{opacity:.55;transform:translate(1.2%,-2px)}
  68%{opacity:.32;transform:translate(-.8%,2px)}
}
@keyframes drift-foam-b{
  0%,100%{opacity:.12;transform:translate(0,2px)}
  42%{opacity:.48;transform:translate(-1.4%,-3px)}
  78%{opacity:.22;transform:translate(.6%,1px)}
}
@keyframes drift-foam-c{
  0%,100%{opacity:.1;transform:translate(0,3px)}
  28%{opacity:.28;transform:translate(.9%,0)}
  55%{opacity:.5;transform:translate(-1%,-2px)}
  82%{opacity:.18;transform:translate(.4%,2px)}
}
@keyframes drift-bottle-bob{
  0%,100%{transform:translate(-50%,0) scale(1) rotate(-4deg)}
  50%{transform:translate(-50%,-3%) scale(1) rotate(2deg)}
}
@keyframes drift-bottle-shake{
  0%,100%{transform:translate(-50%,0) rotate(-4deg)}
  25%{transform:translate(-54%,-1%) rotate(5deg)}
  50%{transform:translate(-46%,2%) rotate(-6deg)}
  75%{transform:translate(-51%,0) rotate(3deg)}
}
@keyframes drift-bottle-toss{
  0%{transform:translate(-50%,0) scale(1) rotate(0);opacity:1}
  35%{transform:translate(calc(-50% + var(--toss-dx1,0px)), calc(0px + var(--toss-dy1,0px))) scale(.78) rotate(200deg);opacity:1}
  70%{transform:translate(calc(-50% + var(--toss-dx2,0px)), calc(0px + var(--toss-dy2,0px))) scale(.28) rotate(430deg);opacity:.9}
  100%{transform:translate(calc(-50% + var(--toss-dx,0px)), calc(0px + var(--toss-dy,0px))) scale(.1) rotate(620deg);opacity:0}
}
@keyframes drift-gold-burst{
  0%{opacity:0;transform:scale(.2)}
  35%{opacity:1;transform:scale(14)}
  100%{opacity:0;transform:scale(24)}
}
@keyframes drift-splash-pop{
  0%{opacity:0;transform:scale(.55)}
  20%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.15)}
}
@keyframes drift-splash-drop{
  0%{opacity:0;transform:translate(0,0) scale(.3)}
  25%{opacity:1;transform:translate(calc(var(--dx) * .45),calc(var(--dy) * .45)) scale(var(--s))}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}
}
@keyframes drift-splash-ring{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  30%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}
}
@media (prefers-reduced-motion:reduce){
  .drift-bay-star,
  .drift-bay-foam,
  .drift-bay-ripple,
  .drift-bay-beam,
  .drift-bay-beam-spot,
  .drift-bottle,
  .drift-goldburst,
  .drift-splash,
  .drift-splash i{animation:none!important;transition:none!important}
}

.drift-mine-filters{
  display:inline-flex;
  gap:0;
  margin:0;
  border:1px solid #111;
  background:#fff;
}
.drift-mine-filters button{
  border:0;
  border-right:1px solid #111;
  background:transparent;
  padding:7px 14px;
  font:600 12px/1 var(--d-sans);
  cursor:pointer;
  color:#444;
}
.drift-mine-filters button:last-child{border-right:0}
.drift-mine-filters button.is-on{
  background:#b8860b;
  border-color:#b8860b;
  color:#fffdf2;
}
.drift-mine-filters button:focus-visible{
  outline:2px solid rgba(184,134,11,.45);
  outline-offset:2px;
  z-index:1;
}
.drift-mine-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.drift-mine-count{
  margin:0;
  font:600 11px/1 var(--d-mono);
  color:#666;
  letter-spacing:.04em;
}
.drift-mine-lede{
  margin:6px 0 0;
  max-width:22em;
  font:500 12px/1.4 var(--d-sans);
  color:rgba(244,240,234,.72);
}
.drift-dlg-card.is-mine{
  background:#fffcf6;
  border-color:#111;
  box-shadow:8px 8px 0 rgba(17,17,17,.16);
}
.drift-dlg-card.is-mine::before{
  width:5px;
  background:#b8860b;
}
.drift-dlg-card.is-mine::after{display:none}
.drift-dlg-card.is-mine > header.drift-mine-head,
.drift-dlg-card.is-mine .drift-mine-head{
  align-items:flex-start;
  padding:14px 14px 12px 16px;
  border-bottom:1px solid #111;
  background:#171717;
  color:#f2f2f0;
}
.drift-dlg-card.is-mine .drift-dlg-kicker{
  background:transparent;
  border-color:rgba(184,134,11,.55);
  color:#e6c37a;
  letter-spacing:.14em;
}
.drift-dlg-card.is-mine > header h2{
  color:#fff;
  letter-spacing:.04em;
}
.drift-dlg-card.is-mine .drift-dlg-body{
  padding:14px 14px 16px 16px;
}
#dlgMine.drift-dlg-wide{max-width:min(640px,calc(100vw - 24px))}
.drift-mine-grid{
  gap:10px;
  padding:0;
  max-height:min(58vh,520px);
}
.drift-mine-grid .drift-note{
  min-height:118px;
  background:linear-gradient(180deg,#fff 0%,var(--d-panel) 100%);
  box-shadow:2px 2px 0 rgba(17,17,17,.08);
  transition:background .12s ease,box-shadow .12s ease;
}
.drift-mine-grid .drift-note::before{background:#b8860b}
.drift-mine-grid .drift-note.is-sea::before{background:#1f5f7a}
.drift-mine-grid .drift-note:hover{
  background:#fff;
  box-shadow:3px 3px 0 rgba(17,17,17,.12);
}
.drift-mine-grid .drift-note-meta{
  align-items:center;
}
.drift-mine-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font:600 10px/1 var(--d-mono);
  letter-spacing:.06em;
}
.drift-mine-tag.is-wall{background:#111;color:#fff}
.drift-mine-tag.is-sea{
  background:#1f5f7a;
  border-color:#1f5f7a;
  color:#fff;
}
.drift-mine-tag.is-haul{
  background:#1f5f7a;
  border-color:#1f5f7a;
  color:#fff;
}
.drift-mine-tag.is-reply{
  background:#fff;
  border-color:#111;
  color:#444;
}
.drift-mine-grid .drift-note.is-kept-haul::before{background:#1f5f7a}
.drift-mine-empty{
  grid-column:1/-1;
  margin:0;
  padding:36px 16px;
  text-align:center;
  border:1px dashed rgba(17,17,17,.28);
  background:rgba(255,255,255,.55);
}
.drift-mine-empty strong{
  display:block;
  margin:0 0 6px;
  font:700 15px/1.3 var(--d-serif);
  color:#111;
}
.drift-mine-empty span{
  font:500 12px/1.4 var(--d-sans);
  color:var(--d-muted);
}
.drift-mine-grid .drift-note-actions{
  margin-top:2px;
}
.drift-mine-grid .drift-note-actions .drift-btn{
  border-color:#111;
  background:#fff;
}
.drift-mine-grid .drift-note-actions .drift-pin-btn:hover{
  background:#b8860b;
  border-color:#111;
  color:#fffdf2;
}
.drift-mine-grid .drift-note-actions .drift-del-btn:hover{
  background:#111;
  color:#fff;
}

.drift-dlg{
  border:0;
  padding:0;
  background:transparent;
  max-width:min(480px,calc(100vw - 24px));
  width:100%;
  margin:auto;
}
#dlgSea{
  max-width:min(380px,calc(100vw - 24px));
}
.drift-dlg.drift-dlg-wide{max-width:min(680px,calc(100vw - 24px))}
.drift-dlg::backdrop{background:rgba(28,24,20,.5)}
.drift-dlg-card{
  position:relative;
  border:1px solid #111;
  background:#fffcf6;
  box-shadow:8px 8px 0 rgba(17,17,17,.16);
  overflow:hidden;
}
.drift-dlg-card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:6px;
  background:#111;
  z-index:2;
}
.drift-dlg-card.is-write::before{display:none}
.drift-dlg-card.is-write{
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(196,18,18,.06),transparent 46%),
    linear-gradient(180deg,#f4efe6 0%,#ebe4d8 100%);
  box-shadow:0 18px 40px rgba(28,22,16,.22);
  border-color:#1a1a1a;
  animation:drift-write-in .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes drift-write-in{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
.drift-dlg-card.is-write::after{display:none}
.drift-dlg-card.is-write > header.drift-write-head,
.drift-dlg-card.is-write .drift-write-head{
  position:relative;
  align-items:flex-start;
  padding:14px 14px 12px 16px;
  border-bottom:1px solid #111;
  background:#171717;
  color:#f2f2f0;
  overflow:hidden;
}
.drift-write-head-ink{display:none}
.drift-dlg-card.is-write .drift-slip-stars{z-index:0}
.drift-dlg-card.is-write .drift-dlg-head{position:relative;z-index:1}
.drift-dlg-card.is-write .drift-dlg-kicker{
  background:transparent;
  border-color:rgba(255,255,255,.35);
  color:#f0d2c8;
  letter-spacing:.16em;
}
.drift-dlg-card.is-write > header h2{
  color:#fff;
  letter-spacing:.04em;
  font-size:clamp(17px,2vw,20px);
}
.drift-write-lede{
  margin:6px 0 0;
  max-width:20em;
  font:500 12px/1.4 var(--d-sans);
  color:rgba(244,240,234,.72);
}
.drift-dlg-card.is-write .drift-dlg-body{
  padding:16px 16px 18px;
  background:transparent;
}
#dlgBroadcast.drift-dlg-cast,
.drift-dlg.drift-dlg-cast{
  max-width:min(820px,calc(100vw - 24px));
  width:100%;
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  padding:0;
  border:0;
  background:transparent;
  overflow:hidden;
  box-sizing:border-box;
}
/* dialog[open] 默认 display:block，必须拉成纵向 flex，底栏才能始终占位 */
#dlgBroadcast.drift-dlg-cast[open],
.drift-dlg.drift-dlg-cast[open]{
  display:flex !important;
  flex-direction:column;
  align-items:stretch;
}
.drift-dlg-card.is-cast{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.08);
  border-bottom:0;
  border-radius:20px 20px 0 0;
  overflow:hidden;
  background:
    radial-gradient(ellipse 90% 40% at 50% -8%,rgba(196,18,18,.28),transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 80%,rgba(40,90,180,.18),transparent 50%),
    #090b12;
  box-shadow:none;
  animation:drift-cast-in .36s cubic-bezier(.2,.85,.2,1);
}
@keyframes drift-cast-in{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:none}
}
.drift-dlg-card.is-cast::before,
.drift-dlg-card.is-cast::after{display:none}
/* 仅顶栏对齐其他弹窗：#171717 + 动态星星
   必须压过 .drift-dlg-card>header 的浅色渐变 */
.drift-dlg-card.is-cast > header.drift-cast-bar,
.drift-dlg-card.is-cast header.drift-cast-bar{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-height:56px;
  padding:12px 14px 12px 16px;
  border-bottom:1px solid #111;
  background:#171717;
  color:#f2f2f0;
  overflow:hidden;
}
.drift-dlg-card.is-cast .drift-cast-bar .drift-slip-stars{
  display:block;
  z-index:0;
  opacity:1;
  pointer-events:none;
}
.drift-dlg-card.is-cast .drift-cast-bar .drift-slip-stars i{
  opacity:.75;
  background:#fff;
  box-shadow:0 0 6px rgba(200,220,255,.95);
}
.drift-cast-titles,
.drift-cast-eq,
.drift-cast-x{
  position:relative;
  z-index:1;
}
.drift-cast-titles{
  flex:0 1 auto;
  min-width:0;
  text-align:left;
}
.drift-cast-ch{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  font:600 10px/1 var(--d-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#9fd0df;
}
.drift-cast-ch i{
  width:5px;height:5px;
  border-radius:50%;
  background:#c41212;
  box-shadow:0 0 0 2px rgba(196,18,18,.25);
  animation:drift-cast-live 1.6s ease-in-out infinite;
}
@keyframes drift-cast-live{
  0%,100%{opacity:.55;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.15)}
}
.drift-cast-eq{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  height:16px;
  margin-left:4px;
  padding:0;
  opacity:.85;
}
.drift-cast-eq i{
  display:block;
  width:2.5px;
  height:6px;
  border-radius:1px;
  background:#c41212;
  transform-origin:bottom center;
  animation:drift-cast-eq 1.1s ease-in-out infinite;
}
.drift-cast-eq i:nth-child(odd){background:#6eb6ff}
.drift-cast-eq i:nth-child(3n){background:#f0b45a}
.drift-cast-eq i:nth-child(1){animation-delay:0s;height:7px}
.drift-cast-eq i:nth-child(2){animation-delay:.08s;height:14px}
.drift-cast-eq i:nth-child(3){animation-delay:.16s;height:9px}
.drift-cast-eq i:nth-child(4){animation-delay:.24s;height:16px}
.drift-cast-eq i:nth-child(5){animation-delay:.05s;height:11px}
.drift-cast-eq i:nth-child(6){animation-delay:.2s;height:15px}
.drift-cast-eq i:nth-child(7){animation-delay:.12s;height:8px}
.drift-cast-eq i:nth-child(8){animation-delay:.28s;height:13px}
@keyframes drift-cast-eq{
  0%,100%{transform:scaleY(.45)}
  50%{transform:scaleY(1)}
}
.drift-cast-scroll{
  flex:1 1 auto;
  min-height:0;
  padding:12px 16px 8px;
  background:transparent;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.drift-dlg-card.is-cast .drift-broadcast-list{
  margin:0;
  padding:0;
  max-height:none;
  overflow:visible;
}
/* 底栏在卡片外，作为 dialog 的 flex 子项，不会被 overflow 裁掉 */
#dlgBroadcast .drift-cast-footbar,
.drift-dlg-cast .drift-cast-footbar{
  flex:0 0 auto;
  position:relative;
  z-index:5;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
  padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));
  border:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.1);
  border-radius:0 0 20px 20px;
  background:#0c1018;
  box-shadow:0 28px 64px rgba(0,0,0,.55);
  box-sizing:border-box;
  color:#fff;
}
.drift-cast-tip{display:none}
#dlgBroadcast .drift-cast-refresh,
.drift-dlg-cast .drift-cast-refresh{
  order:1;
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  min-width:8.5em;
  padding:0 20px;
  border:1px solid rgba(255,120,120,.45);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),
    linear-gradient(135deg,#e01c1c,#a01010);
  color:#fff !important;
  font:700 14px/1 var(--d-sans);
  letter-spacing:.06em;
  cursor:pointer;
  white-space:nowrap;
  visibility:visible !important;
  opacity:1 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 8px 20px rgba(196,18,18,.28);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease;
}
.drift-cast-refresh-ico{
  position:relative;
  width:11px;
  height:11px;
  border:2px solid rgba(255,255,255,.92);
  border-right-color:transparent;
  border-radius:50%;
  box-sizing:border-box;
}
.drift-cast-refresh-ico::after{
  content:"";
  position:absolute;
  top:-2px;right:-1px;
  border:3px solid transparent;
  border-bottom-color:rgba(255,255,255,.92);
  border-right-width:0;
  transform:rotate(40deg);
}
.drift-cast-refresh-lab{position:relative;top:.5px}
.drift-cast-refresh:hover{
  filter:brightness(1.08);
  border-color:rgba(255,170,170,.55);
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 14px 32px rgba(196,18,18,.42);
}
.drift-cast-refresh:active{
  transform:translateY(0);
  filter:brightness(.96);
}
.drift-cast-refresh.is-busy .drift-cast-refresh-ico,
.drift-cast-refresh:disabled .drift-cast-refresh-ico{
  animation:drift-cast-spin .7s linear infinite;
}
@keyframes drift-cast-spin{
  to{transform:rotate(360deg)}
}
.drift-cast-refresh:disabled{
  opacity:.72;
  cursor:wait;
  transform:none;
  filter:none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 6px 16px rgba(196,18,18,.2);
}
.drift-dlg-card.is-sea::before{display:none}
.drift-dlg-card.is-sea.is-bay{
  background:#12243a;
  border:0;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 20px 48px rgba(0,0,0,.45);
  width:100%;
  max-width:min(380px,100%);
  margin-inline:auto;
}
.drift-dlg-card.is-sea.is-bay::after{display:none}
.drift-dlg-card.is-sea .drift-sea-head{display:none}
.drift-dlg-card.is-mine::before,
.drift-dlg-card.is-pin::before{background:#b8860b}
.drift-dlg-card.is-slip::before{background:var(--d-red)}
.drift-dlg-card::after{
  content:"";
  position:absolute;
  right:-18px;top:-18px;
  width:72px;height:72px;
  border:1px solid rgba(17,17,17,.12);
  border-radius:50%;
  pointer-events:none;
}
.drift-dlg-card>header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 14px 20px;
  border-bottom:1px solid #111;
  background:linear-gradient(180deg,#fff 0%,#f7f2e8 100%);
}
.drift-dlg-head{min-width:0;padding-right:8px}
.drift-dlg-kicker{
  display:inline-block;
  margin:0 0 6px;
  padding:3px 7px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font:600 10px/1 var(--d-mono);
  letter-spacing:.08em;
}
.drift-dlg-card>header h2{
  margin:0;
  font:700 clamp(18px,2.2vw,22px)/1.2 var(--d-serif);
  color:#111;
}
.drift-dlg-card.is-slip{
  background:#f7f7f5;
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  border-color:#111;
}
.drift-dlg-card.is-slip::before{
  width:4px;
  background:#111;
}
.drift-dlg-card.is-slip::after{display:none}
.drift-dlg-card.is-slip>header{
  position:relative;
  padding:12px 14px 10px 16px;
  border-bottom:1px solid #111;
  background:#171717;
  color:#f2f2f0;
  overflow:hidden;
}
.drift-slip-stars{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.drift-slip-stars i{
  position:absolute;
  width:2px;height:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 4px rgba(200,220,255,.75);
  animation:drift-slip-twinkle 2.4s ease-in-out infinite;
  opacity:.35;
}
.drift-slip-stars i:nth-child(1){left:8%;top:28%;animation-delay:0s}
.drift-slip-stars i:nth-child(2){left:18%;top:62%;width:1.5px;height:1.5px;animation-delay:.35s}
.drift-slip-stars i:nth-child(3){left:32%;top:22%;animation-delay:.7s}
.drift-slip-stars i:nth-child(4){left:48%;top:70%;width:1.5px;height:1.5px;animation-delay:1.05s}
.drift-slip-stars i:nth-child(5){left:61%;top:30%;animation-delay:.2s}
.drift-slip-stars i:nth-child(6){left:74%;top:58%;width:2.5px;height:2.5px;animation-delay:1.4s}
.drift-slip-stars i:nth-child(7){left:86%;top:24%;animation-delay:.9s}
.drift-slip-stars i:nth-child(8){left:92%;top:66%;width:1.5px;height:1.5px;animation-delay:1.8s}
@keyframes drift-slip-twinkle{
  0%,100%{opacity:.2;transform:scale(.85)}
  40%{opacity:.95;transform:scale(1.25)}
  60%{opacity:.45;transform:scale(1)}
}
.drift-dlg-card.is-slip>header h2.is-visually-hidden,
.drift-dlg .is-visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.drift-dlg-card.is-slip .drift-dlg-kicker{
  position:relative;
  z-index:1;
  margin:0;
  padding:5px 9px 4px;
  background:#c41212;
  border-color:#c41212;
  color:#fff;
  font:700 13px/1 var(--d-serif);
  letter-spacing:.16em;
}
.drift-dlg-card.is-slip .drift-dlg-head{
  position:relative;
  z-index:1;
}
.drift-dlg-card.is-slip .drift-dlg-body{
  padding:14px 14px 16px 16px;
  background:#f7f7f5;
}
.drift-dlg-card.is-slip.is-bottle{
  background:#f1ebe0;
  border:1px solid #2a2620;
  box-shadow:4px 4px 0 rgba(42,38,32,.12);
  overflow:hidden;
}
.drift-dlg-card.is-slip.is-bottle::before{
  display:none;
}
.drift-dlg-card.is-slip.is-bottle>header{
  padding:14px 14px 12px 16px;
  border-bottom:1px solid rgba(42,38,32,.14);
  background:#e8e0d2;
  color:#2a2620;
}
.drift-dlg-card.is-slip.is-bottle .drift-slip-stars{display:none}
.drift-dlg-card.is-slip.is-bottle .drift-dlg-kicker{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#2a2620;
  font:700 16px/1.2 var(--d-serif);
  letter-spacing:.18em;
}
.drift-dlg-card.is-slip.is-bottle.is-thread>header{
  background:#2a2620;
  color:#f4efe6;
  border-bottom-color:#2a2620;
}
.drift-dlg-card.is-slip.is-bottle.is-thread .drift-dlg-kicker{
  color:#e8c9a0;
  letter-spacing:.14em;
  font-size:13px;
}
.drift-dlg-card.is-slip.is-bottle.is-thread .drift-dlg-body{
  background:#f1ebe0;
}
.drift-detail.is-haul{
  gap:0;
}
.drift-detail.is-haul .drift-detail-top{
  padding:12px 16px 0;
  align-items:flex-end;
}
.drift-detail.is-haul .drift-detail-who{
  gap:10px;
}
.drift-detail.is-haul .drift-detail-av,
.drift-detail.is-haul .drift-detail-av.is-empty{
  width:36px;height:36px;
  border:1px solid rgba(42,38,32,.35);
  border-radius:2px;
}
.drift-detail.is-haul .drift-detail-id strong{
  font:700 14px/1.2 var(--d-serif);
  color:#2a2620;
}
.drift-detail.is-haul .drift-detail-id em{
  font:500 11px/1.2 var(--d-sans);
  color:#7a7268;
  letter-spacing:.04em;
}
.drift-detail.is-haul .drift-detail-mark{
  display:none;
}
.drift-detail.is-haul .drift-detail-slip{
  margin:12px 14px 0;
  padding:18px 16px 20px;
  border:1px solid rgba(42,38,32,.22);
  border-left:0;
  background:
    linear-gradient(180deg,rgba(61,107,120,.04),transparent 28%),
    #faf6ee;
  box-shadow:none;
  position:relative;
}
.drift-detail.is-haul .drift-detail-slip::before{
  content:"";
  position:absolute;
  left:0;top:10px;bottom:10px;
  width:2px;
  background:#6b8f7a;
  opacity:.7;
}
.drift-detail.is-haul .drift-detail-body{
  margin:0;
  padding-left:8px;
  font:600 16px/1.75 var(--d-serif);
  color:#2a2620;
  letter-spacing:.03em;
}
.drift-detail.is-haul .drift-detail-foot{
  padding:8px 16px 0;
  min-height:0;
}
.drift-detail.is-haul .drift-detail-hint{
  font:500 11px/1.4 var(--d-sans);
  color:#8a8176;
  letter-spacing:.02em;
}
.drift-detail.is-haul .drift-reply-form{
  margin:14px 0 0;
  padding:12px 14px 14px;
  border-top:1px solid rgba(42,38,32,.12);
  background:#ebe4d6;
  gap:8px;
}
.drift-detail.is-haul .drift-reply-lab{
  font:600 12px/1 var(--d-sans);
  color:#5c554c;
  letter-spacing:.06em;
}
.drift-detail.is-haul .drift-reply-form textarea{
  border:1px solid rgba(42,38,32,.28);
  background:#faf6ee;
  padding:9px 10px;
  min-height:48px;
  font:500 13px/1.5 var(--d-sans);
  color:#2a2620;
  resize:none;
}
.drift-detail.is-haul .drift-reply-form textarea:focus{
  outline:1px solid rgba(61,107,120,.45);
  outline-offset:0;
}
.drift-detail.is-haul .drift-dlg-actions{
  margin-top:2px;
  padding-top:0;
  gap:8px;
  justify-content:flex-end;
}
.drift-detail.is-haul .drift-dlg-actions .drift-btn{
  min-width:0;
  padding:7px 12px;
  border:1px solid rgba(42,38,32,.4);
  background:transparent;
  color:#2a2620;
  box-shadow:none;
  font:600 12px/1 var(--d-sans);
}
.drift-detail.is-haul .drift-dlg-actions .drift-btn-primary{
  background:#3d6b78;
  border-color:#2f5560;
  color:#f7f3ea;
}
.drift-detail.is-haul .drift-dlg-actions .drift-btn:hover{
  filter:none;
  background:rgba(42,38,32,.06);
}
.drift-detail.is-haul .drift-dlg-actions .drift-btn-primary:hover{
  background:#345c68;
}
@media (prefers-reduced-motion:reduce){
  .drift-slip-stars i{animation:none!important;opacity:.55}
}
.drift-dlg-x,
.drift-cast-x,
.drift-bay-close{
  position:relative;
  z-index:5;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:32px;
  height:32px;
  min-width:32px;
  padding:0;
  border:1px solid rgba(17,17,17,.2);
  border-radius:50%;
  background:#fff;
  color:#111;
  font:600 20px/1 var(--d-sans);
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  -webkit-appearance:none;
  appearance:none;
}
.drift-dlg-x:hover,
.drift-cast-x:hover,
.drift-bay-close:hover{
  background:#111;
  border-color:#111;
  color:#fff;
}
/* 深色顶栏：深底浅字，避免透明叠在背景上发糊 */
.drift-dlg-card.is-write .drift-dlg-x,
.drift-dlg-card.is-mine .drift-dlg-x,
.drift-dlg-card.is-slip .drift-dlg-x,
.drift-cast-x{
  border-color:rgba(255,255,255,.22);
  background:rgba(8,10,16,.72);
  color:#fff;
  box-shadow:none;
  backdrop-filter:blur(6px);
}
.drift-dlg-card.is-write .drift-dlg-x:hover,
.drift-dlg-card.is-mine .drift-dlg-x:hover,
.drift-dlg-card.is-slip .drift-dlg-x:hover,
.drift-cast-x:hover{
  background:#fff;
  border-color:#fff;
  color:#111;
}
/* 牛皮纸往来头：白底深字 */
.drift-dlg-card.is-slip.is-bottle .drift-dlg-x{
  border-color:rgba(42,38,32,.28);
  background:#fff;
  color:#2a2620;
  backdrop-filter:none;
}
.drift-dlg-card.is-slip.is-bottle .drift-dlg-x:hover{
  background:#2a2620;
  border-color:#2a2620;
  color:#f1ebe0;
}
.drift-dlg-card.is-slip.is-bottle.is-thread .drift-dlg-x{
  border-color:rgba(255,255,255,.22);
  background:rgba(8,10,16,.72);
  color:#fff;
}
.drift-dlg-card.is-slip.is-bottle.is-thread .drift-dlg-x:hover{
  background:#fff;
  border-color:#fff;
  color:#2a2620;
}
.drift-bay-close{
  position:absolute;
  top:10px;right:10px;
  z-index:12;
  border-color:rgba(255,255,255,.22);
  background:rgba(8,16,28,.72);
  color:#fff;
  backdrop-filter:blur(6px);
  box-shadow:none;
}
.drift-bay-close:hover{
  background:#fff;
  border-color:#fff;
  color:#111;
}
.drift-cast-x{
  margin:0 0 0 auto;
}
.drift-dlg-body{padding:18px 18px 18px 22px}
.drift-dlg-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(17,17,17,.14);
}
.drift-dlg-actions.is-split{justify-content:space-between}
.drift-dlg-actions.is-split .drift-hint{margin:0}
.drift-dlg-sea-body{
  padding:0!important;
  background:#12243a;
}
.drift-dlg .drift-bay{
  width:100%;
  min-height:0;
  aspect-ratio:2 / 3;
  max-height:min(78vh,620px);
  border:0;
  border-top:0;
}
.drift-sea-bar{display:none}

.drift-write .drift-slip{
  position:relative;
  margin:0 0 12px;
  padding:12px 14px 8px;
  border:1px solid #111;
  background:linear-gradient(165deg,#fffdf8 0%,#f6efe4 100%);
  box-shadow:3px 3px 0 rgba(17,17,17,.1);
  transform:none;
  transition:box-shadow .15s ease;
}
.drift-write .drift-slip:focus-within{
  transform:none;
  box-shadow:4px 4px 0 rgba(17,17,17,.12);
}
.drift-slip-fold{
  position:absolute;
  top:0;right:0;
  width:0;height:0;
  border-style:solid;
  border-width:0 18px 18px 0;
  border-color:transparent #d8cfc0 transparent transparent;
  filter:drop-shadow(-1px 1px 0 rgba(17,17,17,.18));
  pointer-events:none;
}
.drift-slip-pin{display:none}
.drift-write .drift-slip .drift-field{margin:0;display:flex;flex-direction:column;gap:4px}
.drift-slip-lab{
  margin:0;
  font:600 11px/1 var(--d-mono);
  letter-spacing:.1em;
  color:rgba(17,17,17,.48);
}
.drift-write .drift-slip textarea{
  border:0!important;
  background:transparent!important;
  padding:2px 0!important;
  min-height:0;
  height:auto;
  max-height:3.2em;
  outline:none!important;
  box-shadow:none!important;
  font:600 15px/1.45 var(--d-serif)!important;
  color:#1a1a1a!important;
  resize:none;
  caret-color:var(--d-red);
}
.drift-write .drift-slip textarea::placeholder{
  color:rgba(17,17,17,.34);
  font-weight:500;
}
.drift-write .drift-slip textarea:focus{outline:none!important}
.drift-slip-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:2px;
  padding:4px 0 0;
}
.drift-slip-rule{
  flex:1;
  height:1px;
  background:repeating-linear-gradient(90deg,#111 0 4px,transparent 4px 8px);
  opacity:.28;
}
.drift-slip-count{
  display:inline-flex;
  align-items:baseline;
  gap:1px;
  margin:0;
  padding:3px 7px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font:700 12px/1 var(--d-mono);
  font-style:normal;
  letter-spacing:.02em;
}
.drift-slip-count i{font-style:normal}
.drift-slip-count b{font-weight:500;opacity:.55}
.drift-slip-count.is-low{background:var(--d-red);border-color:#8f0e0e}
.drift-slip-count.is-hot{background:#7a1010;border-color:#4d0808}
.drift-slip-count.is-ok{background:#1a1a1a}

.drift-write .drift-dest{margin:0 0 12px}
.drift-write .drift-dest-lab{
  display:block;
  margin:0 0 8px;
  font:600 11px/1 var(--d-mono);
  letter-spacing:.12em;
  color:rgba(17,17,17,.55);
}
.drift-write .drift-dest-opts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.drift-write .drift-choice,
.drift-write .drift-anon{
  position:relative;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:8px;
  cursor:pointer;
  margin:0;
  padding:8px;
  border:1px solid #111;
  background:#fffdf8;
  box-shadow:2px 2px 0 rgba(17,17,17,.08);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease;
  user-select:none;
  width:auto;
  box-sizing:border-box;
}
.drift-write .drift-choice input,
.drift-write .drift-anon input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.drift-choice-mark{
  display:grid;
  place-items:center;
  width:32px;height:32px;
  border:1px solid #111;
  font:700 14px/1 var(--d-serif);
  background:#f0ebe3;
  color:#111;
}
.drift-choice-mark svg{
  display:block;
  width:15px;
  height:15px;
}
.drift-write .drift-choice.is-wall .drift-choice-mark{background:#f3e8e6}
.drift-write .drift-choice.is-sea .drift-choice-mark{background:#e4eef2}
.drift-write .drift-anon{
  grid-template-columns:18px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.drift-anon-check{
  flex:0 0 auto;
  width:16px;
  height:16px;
  border:1px solid #111;
  background:#fff;
  box-sizing:border-box;
  position:relative;
}
.drift-anon-check::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:5px;
  height:9px;
  border:solid transparent;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  opacity:0;
}
.drift-write .drift-anon:has(input:checked){
  background:#fffdf8;
  color:#111;
  box-shadow:2px 2px 0 rgba(17,17,17,.08);
}
.drift-write .drift-anon:has(input:checked) .drift-anon-check{
  background:#111;
  border-color:#111;
}
.drift-write .drift-anon:has(input:checked) .drift-anon-check::after{
  border-color:#fff;
  opacity:1;
}
.drift-write .drift-anon:has(input:checked) .drift-anon-txt em{
  color:#666;
}
.drift-choice-txt,
.drift-write .drift-anon-txt{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.drift-choice-txt strong,
.drift-write .drift-anon-txt strong{
  font:700 13px/1.15 var(--d-serif);
}
.drift-choice-txt em,
.drift-write .drift-anon-txt em{
  font:500 10px/1.25 var(--d-sans);
  font-style:normal;
  color:#666;
}
.drift-write .drift-choice:hover,
.drift-write .drift-anon:hover{
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 rgba(17,17,17,.12);
}
.drift-write .drift-choice.is-on,
.drift-write .drift-choice:has(input:checked){
  background:#111;
  color:#fff;
  box-shadow:3px 3px 0 rgba(196,18,18,.35);
}
.drift-write .drift-choice.is-on .drift-choice-mark,
.drift-write .drift-choice:has(input:checked) .drift-choice-mark{
  background:var(--d-red);
  border-color:#fff;
  color:#fff;
}
.drift-write .drift-choice.is-on .drift-choice-txt em,
.drift-write .drift-choice:has(input:checked) .drift-choice-txt em{
  color:rgba(255,255,255,.7);
}
.drift-anon-box{display:none}
@media (max-width:520px){
  .drift-write .drift-dest-opts{
    grid-template-columns:1fr;
  }
}
.drift-write-note{
  margin:0 0 14px;
  padding-left:10px;
  border-left:2px solid rgba(196,18,18,.45);
}
.drift-write-ask{
  margin:0 0 12px;
  padding:12px 12px 10px;
  border:1px solid #111;
  background:#fff8f0;
  box-shadow:2px 2px 0 rgba(17,17,17,.08);
}
.drift-write-ask[hidden]{display:none!important}
.drift-write-ask-txt{
  margin:0 0 10px;
  font:500 13px/1.45 var(--d-sans);
  color:#2a2620;
}
.drift-write-ask-acts{
  display:flex;
  gap:16px;
  justify-content:flex-end;
  align-items:center;
}
.drift-write-ask-acts button{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  font:600 13px/1 var(--d-sans);
  color:#5a5348;
  cursor:pointer;
}
.drift-write-ask-acts button.is-yes{color:var(--d-red)}
.drift-write-ask-acts button:hover{opacity:.75}
.drift-write-ask-acts button[hidden]{display:none!important}
.drift-dlg-card.is-write .drift-dlg-actions{
  margin-top:2px;
  padding-top:12px;
  border-top:1px dashed rgba(17,17,17,.22);
}
.drift-dlg-card.is-write .drift-btn-primary{
  min-width:7.5em;
  box-shadow:3px 3px 0 rgba(17,17,17,.16);
}
.drift-dlg-card.is-write .drift-btn-primary:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 rgba(17,17,17,.18);
}
@media (prefers-reduced-motion:reduce){
  .drift-dlg-card.is-write{animation:none}
  .drift-write .drift-slip,
  .drift-write .drift-slip:focus-within,
  .drift-write .drift-choice,
  .drift-dlg-card.is-write .drift-btn-primary:hover{
    transform:none;
  }
  .drift-dlg-card.is-cast,
  .drift-cast-card,
  .drift-cast-ch i,
  .drift-cast-eq i{
    animation:none!important;
  }
  .drift-cast-eq i{transform:none;height:10px!important}
  .drift-cast-refresh.is-busy .drift-cast-refresh-ico,
  .drift-cast-refresh:disabled .drift-cast-refresh-ico{
    animation:none!important;
  }
}

.drift-slip{
  margin-bottom:14px;
  padding:14px 14px 10px;
  border:1px solid #111;
  background:
    repeating-linear-gradient(180deg,transparent 0 27px,rgba(31,95,122,.08) 27px 28px),
    #fffef8;
  box-shadow:3px 3px 0 rgba(17,17,17,.1);
}
.drift-slip .drift-field{margin-bottom:0}
.drift-slip textarea{
  border:0!important;
  background:transparent!important;
  padding:4px 0!important;
  min-height:96px;
  outline:none!important;
  font:600 16px/28px var(--d-serif)!important;
  resize:none;
}
.drift-slip textarea:focus{outline:none!important}

.drift-dest{margin-bottom:12px}
.drift-dest-lab{
  display:block;
  margin-bottom:8px;
  font:600 12px/1 var(--d-sans);
}
.drift-dest-opts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.drift-choice{
  display:flex;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
  padding:10px 12px;
  border:1px solid #111;
  background:#fff;
  position:relative;
}
.drift-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.drift-choice span{font:700 14px/1.2 var(--d-serif)}
.drift-choice em{
  font:500 11px/1.3 var(--d-sans);
  font-style:normal;
  color:#666;
}
.drift-choice.is-on,
.drift-choice:has(input:checked){
  background:#111;
  color:#fff;
}
.drift-choice.is-on em,
.drift-choice:has(input:checked) em{color:rgba(255,255,255,.72)}

.drift-broadcast-list{
  margin:0;
  max-height:none;
  overflow:visible;
  padding:0;
}
.drift-cast-empty{
  margin:28px 16px;
  text-align:center;
}
.drift-cast-empty strong{
  display:block;
  font:700 16px/1.4 var(--d-serif);
  color:rgba(235,240,255,.88);
}
.drift-cast-empty em{
  display:block;
  margin-top:8px;
  font:500 12px/1.3 var(--d-sans);
  font-style:normal;
  color:rgba(170,185,220,.42);
}
.drift-cast-feed{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:4px 0 6px;
}
.drift-cast-card{
  --cast-accent:#6eb6ff;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  margin:0;
  padding:14px 14px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  text-align:left;
  font:inherit;
  color:#e8eeff;
  cursor:pointer;
  box-sizing:border-box;
  min-height:118px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;
  animation:drift-cast-pop .4s cubic-bezier(.2,.9,.2,1) both;
  animation-delay:var(--d,0s);
}
.drift-cast-card.is-a{--cast-accent:#6eb6ff;border-color:rgba(110,182,255,.22)}
.drift-cast-card.is-b{--cast-accent:#5dde9b;border-color:rgba(93,222,155,.22)}
.drift-cast-card.is-c{--cast-accent:#f0b45a;border-color:rgba(240,180,90,.22)}
.drift-cast-card.is-d{--cast-accent:#c39be8;border-color:rgba(195,155,232,.22)}
.drift-cast-card.is-e{--cast-accent:#ff8a7a;border-color:rgba(255,138,122,.22)}
.drift-cast-card.is-f{--cast-accent:#4fd4c4;border-color:rgba(79,212,196,.22)}
.drift-cast-card::before{
  content:"";
  position:absolute;
  left:0;top:12px;bottom:12px;
  width:3px;
  border-radius:0 2px 2px 0;
  background:var(--cast-accent);
}
.drift-cast-no,
.drift-cast-rail,
.drift-cast-main,
.drift-cast-pin,
.drift-cast-tape,
.drift-cast-mark{display:none!important}
@keyframes drift-cast-pop{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.drift-cast-card:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.drift-cast-card:focus-visible{
  outline:2px solid rgba(140,180,255,.5);
  outline-offset:2px;
}
.drift-cast-card p,
.drift-cast-body{
  margin:0;
  flex:1;
  padding-left:6px;
  font:600 15px/1.5 var(--d-serif);
  letter-spacing:.015em;
  word-break:break-word;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:#f3f6ff;
}
.drift-cast-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-left:6px;
}
.drift-cast-who{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  min-width:0;
}
.drift-cast-av,
.drift-cast-av.is-empty{
  flex:0 0 auto;
  width:24px;
  height:24px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  object-fit:cover;
  background:rgba(255,255,255,.06);
  display:block;
}
.drift-cast-av.is-empty{
  background:
    linear-gradient(135deg,rgba(120,150,200,.3) 25%,rgba(40,50,80,.45) 25% 50%,rgba(120,150,200,.3) 50% 75%,rgba(40,50,80,.45) 75%);
  background-size:6px 6px;
}
.drift-cast-nick{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:600 11px/1.2 var(--d-sans);
  color:rgba(200,210,240,.7);
}
.drift-cast-meta{
  flex:0 0 auto;
  font:600 10px/1 var(--d-mono);
  letter-spacing:.06em;
  color:var(--cast-accent);
  opacity:.9;
}

.drift-note-grid-dlg{
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:0;
  max-height:min(56vh,480px);
  overflow:auto;
  gap:10px;
}
.drift-note-grid-dlg:empty::before{
  content:"还没有纸条。";
  border:1px dashed rgba(17,17,17,.25);
  background:#fff;
}

.drift-dlg .drift-bay{
  min-height:0;
  aspect-ratio:2 / 3;
  max-height:min(78vh,620px);
}

.drift-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
.drift-field>span{font:600 12px/1 var(--d-sans)}
.drift-field textarea,
.drift-field input[type=number]{
  width:100%;
  border:1px solid #111;
  background:#fff;
  padding:10px 12px;
  font:400 14px/1.45 var(--d-sans);
  resize:vertical;
  box-sizing:border-box;
}
.drift-field textarea:focus,
.drift-field input[type=number]:focus{
  outline:2px solid rgba(196,18,18,.28);
  outline-offset:1px;
}
.drift-field em{
  font-style:normal;
  font:500 11px/1 var(--d-mono);
  color:var(--d-muted);
  align-self:flex-end;
}
.drift-anon{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:8px 10px;
  border:1px dashed rgba(17,17,17,.28);
  background:#fff;
  font-size:13px;
  cursor:pointer;
}
.drift-hint{
  margin:0 0 8px;
  font-size:12px;
  line-height:1.55;
  color:var(--d-muted);
}

.drift-detail{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.drift-detail-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.drift-detail-who{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.drift-detail-av,
.drift-detail-av.is-empty{
  width:32px;height:32px;
  border:1px solid #111;
  border-radius:50%;
  object-fit:cover;
  background:#e8e8e8;
  display:block;
  flex:0 0 auto;
}
.drift-detail-av.is-empty{
  background:
    linear-gradient(135deg,#ddd 25%,#f0f0f0 25% 50%,#ddd 50% 75%,#f0f0f0 75%);
  background-size:6px 6px;
}
.drift-detail-id{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.drift-detail-id strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font:600 13px/1.2 var(--d-sans);
  color:#111;
}
.drift-detail-id em{
  font:500 11px/1 var(--d-mono);
  color:#666;
  font-style:normal;
}
.drift-detail-mark{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  font:700 12px/1 var(--d-serif);
  letter-spacing:.06em;
}
.drift-detail.is-sea .drift-detail-mark{
  background:#1f5f7a;
  border-color:#1f5f7a;
}
.drift-detail-slip{
  position:relative;
  padding:14px 14px 14px 16px;
  border:1px solid #111;
  background:#fff;
  border-left:3px solid #111;
}
.drift-detail.is-sea .drift-detail-slip{border-left-color:#1f5f7a}
.drift-detail.is-pinned .drift-detail-slip{border-left-color:#b8860b}
.drift-detail-body{
  margin:0;
  font:600 14px/1.65 var(--d-serif);
  color:#1a1a1a;
  word-break:break-word;
}
.drift-detail-foot{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:18px;
}
.drift-detail-hint{
  font:500 11px/1 var(--d-mono);
  color:#888;
}
.drift-detail-pts{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  font:500 11px/1 var(--d-mono);
  color:#555;
}
.drift-detail-pts b{
  font:700 14px/1 var(--d-serif);
  color:var(--d-red);
}
.drift-detail.is-thread{
  gap:0;
  padding-bottom:2px;
}
.drift-detail.is-thread .drift-detail-top{
  padding:14px 16px 8px;
}
.drift-detail.is-thread .drift-detail-id strong{
  font:700 14px/1.2 var(--d-serif);
  color:#2a2620;
}
.drift-detail.is-thread .drift-detail-id em{
  font:500 11px/1.3 var(--d-sans);
  color:#7a7268;
}
.drift-detail.is-thread .drift-detail-av,
.drift-detail.is-thread .drift-detail-av.is-empty{
  width:36px;height:36px;
  border:1px solid rgba(42,38,32,.35);
  border-radius:2px;
}
.drift-detail.is-thread .drift-detail-slip{
  position:relative;
  margin:0 14px;
  padding:16px 14px 14px 16px;
  border:1px solid #2a2620;
  border-left:4px solid #c97b2a;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),transparent 40%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 19px,
      rgba(42,38,32,.05) 19px,
      rgba(42,38,32,.05) 20px
    ),
    #fff8eb;
  box-shadow:2px 3px 0 rgba(42,38,32,.1);
  border-radius:0 2px 2px 0;
}
.drift-thread-stamp{
  position:absolute;
  top:8px;right:10px;
  padding:2px 6px;
  border:1.5px solid rgba(201,123,42,.55);
  color:rgba(201,123,42,.85);
  font:700 10px/1 var(--d-mono);
  letter-spacing:.12em;
  transform:rotate(8deg);
  background:rgba(255,248,235,.8);
}
.drift-detail.is-thread .drift-detail-foot{
  padding:8px 16px 0;
}
.drift-detail.is-thread .drift-detail-hint{
  font:500 11px/1.3 var(--d-sans);
  color:#8a8074;
}
.drift-thread-wrap{
  margin:14px 14px 0;
  padding:12px 0 0;
  border-top:1px dashed rgba(42,38,32,.22);
}
.drift-thread-cap{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:0 0 10px;
}
.drift-thread-cap span{
  font:700 12px/1 var(--d-serif);
  color:#2a2620;
  letter-spacing:.08em;
}
.drift-thread-cap em{
  font:500 11px/1 var(--d-sans);
  font-style:normal;
  color:#9a9084;
}
.drift-thread{
  margin-top:0;
  max-height:min(38vh,300px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 2px 4px;
}
.drift-thread-empty{
  margin:0;
  padding:18px 14px;
  text-align:left;
  border:1px dashed rgba(42,38,32,.28);
  background:rgba(255,255,255,.4);
  font:500 12px/1.5 var(--d-sans);
  color:#7a7268;
}
.drift-thread-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.drift-thread-item{
  margin:0;
  padding:10px 12px 10px 14px;
  border:1px solid rgba(42,38,32,.18);
  border-left:3px solid #5dade2;
  background:#fff;
  box-shadow:1px 2px 0 rgba(42,38,32,.06);
}
.drift-thread-item.is-me{
  border-left-color:#2a9d8f;
  background:#f4fbf8;
}
.drift-thread-item.is-owner{
  border-left-color:#c97b2a;
  background:#fffaf2;
}
.drift-thread-who{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 6px;
  min-width:0;
}
.drift-thread-av,
.drift-thread-av.is-empty{
  width:22px;
  height:22px;
  border:1px solid rgba(42,38,32,.3);
  border-radius:2px;
  object-fit:cover;
  background:#eee;
  display:block;
  flex:0 0 auto;
}
.drift-thread-av.is-empty{
  background:
    linear-gradient(135deg,#ddd 25%,#f0f0f0 25% 50%,#ddd 50% 75%,#f0f0f0 75%);
  background-size:6px 6px;
}
.drift-thread-who span{
  font:600 12px/1.2 var(--d-sans);
  color:#2a2620;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.drift-thread-role{
  flex:0 0 auto;
  margin:0;
  padding:1px 5px;
  border:1px solid rgba(42,38,32,.25);
  background:#f1ebe0;
  color:#5c5348;
  font:700 9px/1.2 var(--d-mono);
  font-style:normal;
  letter-spacing:.06em;
}
.drift-thread-role.is-me{
  background:#dff3ec;
  border-color:rgba(42,157,143,.35);
  color:#1f6f62;
}
.drift-thread-item p{
  margin:0;
  font:500 13px/1.55 var(--d-serif);
  word-break:break-word;
  color:#2f2a24;
}
.drift-detail.is-thread .drift-reply-form{
  margin:12px 14px 14px;
  padding:12px;
  border:1px solid #2a2620;
  border-top:1px solid #2a2620;
  background:#e8e0d2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.drift-detail.is-thread .drift-reply-lab{
  font:700 11px/1 var(--d-sans);
  color:#2a2620;
  letter-spacing:.06em;
}
.drift-detail.is-thread .drift-reply-form textarea{
  width:100%;
  min-height:64px;
  margin:0;
  padding:10px 12px;
  border:1px solid rgba(42,38,32,.35);
  background:#fffdf8;
  color:#2a2620;
  font:500 13px/1.45 var(--d-serif);
  resize:vertical;
  box-sizing:border-box;
}
.drift-detail.is-thread .drift-reply-form textarea:focus{
  outline:none;
  border-color:#c97b2a;
  box-shadow:0 0 0 2px rgba(201,123,42,.18);
}
.drift-detail.is-thread .drift-reply-form .drift-dlg-actions{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  justify-content:flex-end;
}
.drift-mine-grid .drift-note-actions .drift-replies-btn:hover{
  background:#2a2620;
  border-color:#2a2620;
  color:#f1ebe0;
}
.drift-reply-form{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:2px;
  padding-top:12px;
  border-top:1px solid rgba(17,17,17,.14);
}
.drift-reply-lab{
  font:600 11px/1 var(--d-mono);
  color:#555;
  letter-spacing:.08em;
}
.drift-reply-form textarea{
  border:1px solid #111;
  background:#fff;
  padding:8px 10px;
  font:500 13px/1.45 var(--d-sans);
  min-height:60px;
  resize:vertical;
}
.drift-reply-form .drift-dlg-actions{
  margin-top:4px;
  padding-top:8px;
  border-top:0;
}

@media (max-width:900px){
  .drift-note-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drift-note-grid-dlg{grid-template-columns:1fr}
  .drift-pin-row.is-row1 .drift-pin{width:min(86%,260px)}
  .drift-pin-row.is-row2 .drift-pin{width:min(46%,190px)}
  .drift-pin-row.is-row3{flex-wrap:wrap}
  .drift-pin-row.is-row3 .drift-pin{width:min(46%,190px);flex:1 1 140px}
}
@media (max-width:640px){
  .eo-drift .bbs-mast-board.page-intro-inner,
  .eo-drift .page-intro-inner.is-rich.bbs-mast-board{
    grid-template-columns:1fr!important;
  }
  .eo-drift .bbs-mast .page-intro-main{border-right:0!important;border-bottom:1px solid #111!important}
  .drift-note-grid{grid-template-columns:1fr}
  .drift-pin-row.is-row2,
  .drift-pin-row.is-row3{flex-wrap:wrap}
  .drift-pin.is-r1 .drift-pin-body{font-size:14px}
  .drift-bay{
    min-height:0;
    aspect-ratio:2 / 3;
    max-height:min(76vh,580px);
  }
  .drift-sea-dock{flex-wrap:wrap}
  .drift-dest-opts{grid-template-columns:1fr}
  .drift-write .drift-dest-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .drift-act-body em{display:none}
  #dlgBroadcast.drift-dlg-cast,
  .drift-dlg.drift-dlg-cast{
    max-width:calc(100vw - 16px);
    width:calc(100vw - 16px);
    max-height:calc(var(--cast-vh, 100vh) - 16px);
    margin:auto auto 8px;
    overflow:hidden;
  }
  #dlgBroadcast.drift-dlg-cast[open],
  .drift-dlg.drift-dlg-cast[open]{
    display:flex !important;
    flex-direction:column;
  }
  .drift-dlg-card.is-cast{
    flex:1 1 auto;
    min-height:0;
    border-radius:16px 16px 0 0;
    max-height:none;
    padding-bottom:0;
  }
  .drift-dlg-card.is-cast > header.drift-cast-bar,
  .drift-dlg-card.is-cast header.drift-cast-bar{
    flex:0 0 auto;
    padding:8px 12px;
    min-height:48px;
    gap:8px;
  }
  .drift-cast-x{width:30px;height:30px;font-size:16px}
  .drift-cast-eq{height:14px;margin-left:0}
  .drift-cast-eq i:nth-child(n+7){display:none}
  .drift-cast-scroll{
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    padding:10px 12px 8px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .drift-dlg-card.is-cast .drift-broadcast-list,
  .drift-broadcast-list{
    max-height:none;
    overflow:visible;
  }
  .drift-cast-feed{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .drift-cast-card{
    min-height:0;
    padding:10px 10px 9px;
    border-radius:12px;
    gap:8px;
  }
  .drift-cast-card:hover{transform:none}
  .drift-cast-card p,
  .drift-cast-body{font-size:13px;line-height:1.4;-webkit-line-clamp:2}
  .drift-cast-av,
  .drift-cast-av.is-empty{width:20px;height:20px}
  .drift-cast-nick{font-size:10px}
  #dlgBroadcast .drift-cast-footbar,
  .drift-dlg-cast .drift-cast-footbar{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    flex:0 0 auto;
    padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));
    gap:8px;
    border-radius:0 0 16px 16px;
  }
  .drift-cast-tip{font-size:11px}
  #dlgBroadcast .drift-cast-refresh,
  .drift-dlg-cast .drift-cast-refresh{
    width:min(100%,240px);
    min-width:0;
    min-height:44px;
    font-size:14px;
    padding:0 16px;
  }
  #dlgMine.drift-dlg-wide{max-width:calc(100vw - 16px)}
  .drift-dlg-card.is-mine .drift-dlg-body{padding:12px 10px 12px}
  .drift-mine-filters{width:100%}
  .drift-mine-filters button{flex:1;padding:8px 10px}
  .drift-mine-lede{max-width:none;font-size:11px}
  .drift-mine-grid{max-height:min(60vh,540px)}
}