/* ═══════════════════════════════════════════════════════

   UI Surface — 全站卡片 / 按钮 / 轻交互统一层

   由 theme/header.php 注入，压过各模块本地基础样式

   ═══════════════════════════════════════════════════════ */



:root{

  --card-bg:var(--s1,#ffffff);

  --card-bg-soft:var(--s2,#f7fafc);

  --card-line:#111111;

  --card-line-hot:#111111;

  --card-radius:14px;

  --card-radius-sm:10px;

  --card-shadow:0 4px 14px rgba(0,0,0,.04), 0 1px 0 rgba(0,0,0,.03);

  --card-shadow-hover:0 10px 24px rgba(0,0,0,.08), 0 3px 0 rgba(0,0,0,.1);

  --card-lift:-2px;

  --press-scale:.985;

  --ease-out:cubic-bezier(.22,.9,.28,1);

  --ease-spring:cubic-bezier(.34,1.3,.64,1);

  --dur-fast:.18s;

  --dur:.28s;

  --focus-ring:0 0 0 3px rgba(0,0,0,.18);

}



/* ── 通用表面卡片（列表外框统一细黑线）───────────────── */

.quest-card,

.team-card,

.member-card,

.goal-card,

.empty-slot,

.rate-card,

.actv-card,

.nad-rel-card,

.help-card,

.wr-card{

  border:1px solid var(--card-line);

  border-radius:var(--card-radius);

  box-shadow:var(--card-shadow);

  position:relative;

  overflow:hidden;

  transition:

    border-color var(--dur) var(--ease-out),

    box-shadow var(--dur) var(--ease-out),

    transform var(--dur) var(--ease-out);

}



/* 可点击/列表卡片：悬停抬起 */

.quest-card:hover,

.team-card:hover,

.member-card:hover,

.goal-card:hover,

.help-card:hover,

.actv-card:hover,

.nad-rel-card:hover,

.wr-card:hover,

.eo-quick-card:hover,

.shop-banner .dq-card:hover{

  border-color:var(--card-line-hot);

  box-shadow:var(--card-shadow-hover);

  transform:translateY(var(--card-lift));

}



/* 不含 actv-card / eo-quick-card / help-card / member-card：它们已有 ::before/::after 语义 */

.quest-card::before,

.team-card::before,

.goal-card::before,

.wr-card::before,

.ios-card::before{

  content:"";

  position:absolute;left:0;right:0;top:0;height:3px;

  background:linear-gradient(90deg,#111111,#333333 55%,#1f9fff);

  transform:scaleX(0);transform-origin:left;

  transition:transform var(--dur) var(--ease-out);

  z-index:2;pointer-events:none;

}

.quest-card:hover::before,

.team-card:hover::before,

.goal-card:hover::before,

.wr-card:hover::before,

.ios-card:hover::before{

  transform:scaleX(1);

}

.quest-card:active,

.team-card:active,

.member-card:active,

.goal-card:active,

.help-card:active,

.actv-card:active,

.eo-quick-card:active{

  transform:translateY(-1px) scale(var(--press-scale));

  box-shadow:0 6px 16px rgba(30,45,70,.08);

}

/* help-card 自带 urgency ::before 与顶置 ::after，仅做抬起/描边，不加顶栏 */



/* tile / 首页机甲卡：保留原结构，补阴影与圆角 */

#gol-hub .tile,

.eo-mech-card{

  border-radius:var(--card-radius-sm);

  box-shadow:var(--card-shadow);

  transition:

    background var(--dur) var(--ease-out),

    box-shadow var(--dur) var(--ease-out),

    transform var(--dur) var(--ease-out),

    color var(--dur) var(--ease-out);

}

#gol-hub .tile:hover,

.eo-mech-card:hover{

  box-shadow:var(--card-shadow-hover);

  transform:translateY(-2px);

}



/* hub-panel 整体抬升，内部 kit-card 保持透明 */

.hub-panel{

  overflow:hidden;

}

.hub-panel:hover{

  border-color:rgba(31,159,255,.28);

  box-shadow:var(--card-shadow-hover);

  transform:none;

}

.hub-panel .kit-card{

  transition:background var(--dur-fast) var(--ease-out);

  border-radius:0;

  box-shadow:none;

  border:0;

  background:transparent;

}

.hub-panel .kit-card:hover{

  background:rgba(31,159,255,.04);

  transform:none;

  box-shadow:none;

  border-color:transparent;

}

.hub-panel .kit-card:hover::before{display:none;}



/* page-intro 不抬起、不出现顶栏动画 */

.page-intro-inner:hover,

.page-intro-inner.is-rich:hover,

.tea-masthead:hover,

.raid-panel:hover{

  transform:none;

  box-shadow:var(--card-shadow);

  border-color:var(--card-line);

}

.page-intro-inner::after,

.tea-masthead::after,

.raid-panel::after{display:none !important;}



/* 暗色残留 → 浅色可读 */

.actv-card,

.nad-rel-card,

.nad-article,

.char-entry-card,

.plaza-composer,

.plaza-profile-mini,

.rate-reply{

  background:var(--card-bg-soft) !important;

  border-radius:var(--card-radius-sm);

}

.actv-card:hover,

.nad-rel-card:hover{

  background:var(--card-bg) !important;

}

.actv-card::before,

.nad-rel-card::before{

  background:linear-gradient(90deg,#111111,#1f9fff) !important;

}



/* ── 按钮 ───────────────────────────────────────────── */

.btn,

.help-apply-btn,

.help-verify-btn,

.tea-cta,

.hlp-offer-btn{

  border-radius:10px;

  transition:

    transform var(--dur-fast) var(--ease-spring),

    box-shadow var(--dur-fast) var(--ease-out),

    background var(--dur-fast) var(--ease-out),

    border-color var(--dur-fast) var(--ease-out),

    color var(--dur-fast) var(--ease-out),

    filter var(--dur-fast) var(--ease-out);

}

.btn:hover,

.help-apply-btn:hover,

.tea-cta:hover,

.hlp-offer-btn:hover{

  transform:translateY(-1px);

  filter:saturate(1.05);

}

.btn:active,

.help-apply-btn:active,

.tea-cta:active,

.hlp-offer-btn:active{

  transform:translateY(0) scale(.98);

  filter:none;

}

.btn.primary,

.help-apply-btn,

.tea-cta{

  box-shadow:0 4px 0 rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.16);

}

.btn.primary:hover,

.help-apply-btn:hover,

.tea-cta:hover{

  box-shadow:0 5px 0 rgba(0,0,0,.3), 0 12px 22px rgba(0,0,0,.22);

}

.btn.ghost:hover,

.help-verify-btn:hover{

  background:var(--hover-bg,rgba(30,45,70,.04));

  box-shadow:0 4px 12px rgba(30,45,70,.08);

}



/* ── Chip / Tab ─────────────────────────────────────── */

.chip,

.help-chips .chip,

.duty-tab,

.ios-tab-item,

.pager-num,

.pager-btn{

  border-radius:999px;

  transition:

    background var(--dur-fast) var(--ease-out),

    border-color var(--dur-fast) var(--ease-out),

    color var(--dur-fast) var(--ease-out),

    transform var(--dur-fast) var(--ease-spring),

    box-shadow var(--dur-fast) var(--ease-out);

}

.chip:hover,

.help-chips .chip:hover,

.duty-tab:hover,

.ios-tab-item:hover,

.pager-num:hover,

.pager-btn:hover:not(:disabled){

  transform:translateY(-1px);

  box-shadow:0 4px 10px rgba(30,45,70,.08);

}

.chip.is-active,

.help-chips .chip.is-active,

.duty-tab.on,

.ios-tab-item.active{

  box-shadow:0 3px 0 rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.14);

}

.chip:active,

.duty-tab:active,

.ios-tab-item:active{

  transform:translateY(0) scale(.97);

}



/* duty-tab 保持底边风格时取消胶囊圆角冲突 */

.duty-tabs .duty-tab{

  border-radius:8px;

}



/* ── 链接 / 导航轻交互 ──────────────────────────────── */

.site-nav a,

.dock-nav a,

a.brand-title,

.site-brand{

  transition:color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);

}

.site-nav a:hover{

  color:var(--c-brand,#111111);

}

.dock-nav a:active{

  transform:scale(.96);

}



/* ── 表单控件 ───────────────────────────────────────── */

.form-input,

.form-textarea,

.form-select,

input.form-input,

textarea.form-textarea,

select.form-select{

  border-radius:10px;

  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast);

}

.form-input:focus,

.form-textarea:focus,

.form-select:focus,

input.form-input:focus,

textarea.form-textarea:focus,

select.form-select:focus{

  border-color:rgba(31,159,255,.55);

  box-shadow:var(--focus-ring);

  outline:none;

  background:var(--s1,#fff);

}



/* ── 焦点可见环 ─────────────────────────────────────── */

.btn:focus-visible,

.chip:focus-visible,

.duty-tab:focus-visible,

.help-apply-btn:focus-visible,

.help-verify-btn:focus-visible,

.quest-card:focus-visible,

.team-card:focus-visible,

.help-card:focus-visible,

.member-card:focus-visible,

.site-nav a:focus-visible,

.site-menu-btn:focus-visible{

  outline:none;

  box-shadow:var(--focus-ring), var(--card-shadow);

}



/* ── 弹层 ───────────────────────────────────────────── */
/* create-sheet / 详情 / 认证等已自带硬阴影外框，勿覆盖 */

.modal-box:not(.create-sheet-panel):not(.detail-modal):not(.verify-sheet-panel):not(.apply-modal-panel),

.modal-dialog:not(.create-sheet-panel):not(.modal-detail):not(.verify-sheet-panel),

.ios-modal{

  border-radius:16px !important;

  box-shadow:0 24px 64px rgba(30,45,70,.22), 0 2px 0 rgba(30,45,70,.04) !important;

  border:1px solid var(--edge-2,rgba(30,45,70,.14));

  animation:uiSurfaceIn .32s var(--ease-out) both;

}

/* 硬阴影外框（发布 / 详情 / 组队详情等）— 强制覆盖软阴影 */

.modal-box.create-sheet-panel,

.modal-box.detail-modal,

.modal-box.verify-sheet-panel,

.modal-dialog.create-sheet-panel,

.modal-dialog.modal-detail,

.modal-dialog.verify-sheet-panel,

#detail-modal .modal-box,

#detail-modal .detail-modal,

#detailModalDialog,

#detailModalDialog.modal-detail,

#publish-modal .modal-box,

#createModalDialog,

#team-detail-modal .team-detail-panel,

#team-detail-modal .modal-content,

#create-modal .create-team-panel{

  border:1px solid #111 !important;

  border-radius:10px !important;

  box-shadow:8px 8px 0 #111 !important;

  background:#fff !important;

}

@media (max-width:560px){

  .modal-box.create-sheet-panel,

  .modal-box.detail-modal,

  .modal-dialog.create-sheet-panel,

  .modal-dialog.modal-detail,

  #detail-modal .modal-box,

  #detailModalDialog,

  #publish-modal .modal-box,

  #createModalDialog,

  #team-detail-modal .team-detail-panel,

  #team-detail-modal .modal-content,

  #create-modal .create-team-panel{

    box-shadow:5px 5px 0 #111 !important;

  }

}

@keyframes uiSurfaceIn{

  from{opacity:0;transform:translateY(16px) scale(.98);}

  to{opacity:1;transform:translateY(0) scale(1);}

}

.modal-overlay,

.ios-modal-overlay{

  backdrop-filter:blur(6px);

  -webkit-backdrop-filter:blur(6px);

  background:rgba(26,36,51,.42);

  transition:opacity var(--dur) var(--ease-out);

}



/* ── 统计格 / page-intro 单元格微交互 ───────────────── */

.page-intro-stats .stat-cell{

  transition:border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-spring);

}

.page-intro-stats .stat-cell:hover{

  border-color:rgba(31,159,255,.28);

  box-shadow:0 6px 14px rgba(30,45,70,.08);

  transform:translateY(-1px);

}



/* ── 首页事件卡进度条轻微呼吸 ───────────────────────── */

.eo-event-card .ev-fill,

.pid-meter > i{

  transition:width .6s var(--ease-out);

}



/* ── 减少动效 ───────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){

  *,*::before,*::after{

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;

    scroll-behavior:auto !important;

  }

  .quest-card:hover,

  .team-card:hover,

  .member-card:hover,

  .help-card:hover,

  .actv-card:hover,

  .eo-mech-card:hover,

  #gol-hub .tile:hover{

    transform:none;

  }

}



/* 触控设备：弱化悬停位移，保留阴影/描边 */

@media (hover:none){

  .quest-card:hover,

  .team-card:hover,

  .member-card:hover,

  .help-card:hover,

  .actv-card:hover,

  .goal-card:hover,

  .eo-mech-card:hover,

  #gol-hub .tile:hover{

    transform:none;

  }

}



/* ── 全站列表卡片外框：细黑线（压过模块本地灰边）─────── */

.more-card,

.item-card,

.character-card,

.dangan-card,

.chufa-card,

.rank-card,

.podium-card,

.game-hub-card,

.gift-card,

.huiyi-card,

.quest-card,

.team-card,

.member-card,

.goal-card,

.rate-card,

.actv-card,

.nad-rel-card,

.help-card,

.wr-card,



.more-card:hover,

.item-card:hover,

.character-card:hover,

.dangan-card:hover,

.chufa-card:hover,

.rank-card:hover,

.podium-card:hover,

.game-hub-card:hover,

.gift-card:hover,

.quest-card:hover,

.team-card:hover,

.member-card:hover,

.goal-card:hover,

.rate-card:hover,

.actv-card:hover,

.nad-rel-card:hover,

.help-card:hover,

.wr-card:hover,

.msg-card:hover,

.ios-card:hover,

.eo-quick-card:hover,

.eo-mech-card:hover,

#gol-hub .tile:hover{

  border-color:#111 !important;

}



/* ── 全站统一分页：黑白配 ─────────────────────────────── */

.page-nav{

  align-items:center;

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  justify-content:space-between;

  margin-top:28px;

  padding-top:18px;

  border-top:1px solid rgba(0,0,0,.08);

}

.page-nav:empty{display:none}

.page-nav .pager-btn,

.pager-btn{

  align-items:center;

  background:#fff;

  border:1px solid #ddd;

  border-radius:999px;

  box-sizing:border-box;

  color:#555;

  cursor:pointer;

  display:inline-flex;

  font-family:var(--font-code, ui-monospace, monospace);

  font-size:11px;

  font-weight:700;

  justify-content:center;

  letter-spacing:.08em;

  min-height:36px;

  padding:8px 16px;

  text-decoration:none;

  text-transform:none;

  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;

}

.page-nav .pager-btn:hover:not([disabled]):not(.is-disabled):not(.disabled),

.pager-btn:hover:not([disabled]):not(.is-disabled):not(.disabled),

a.pager-btn:hover{

  background:#111;

  border-color:#111;

  box-shadow:0 4px 12px rgba(0,0,0,.1);

  color:#fff;

  transform:translateY(-1px);

}

.page-nav .pager-btn[disabled],

.pager-btn[disabled],

.pager-btn.is-disabled,

.pager-btn.disabled{

  cursor:not-allowed;

  opacity:.32;

  pointer-events:none;

}

.page-nav .pager-pages,

.pager-pages{

  align-items:center;

  display:flex;

  flex-wrap:wrap;

  gap:6px;

  justify-content:center;

}

.page-nav .pager-num,

.pager-num{

  align-items:center;

  background:#fff;

  border:1px solid #ddd;

  border-radius:999px;

  box-sizing:border-box;

  color:#555;

  cursor:pointer;

  display:inline-grid;

  font-family:var(--font-code, ui-monospace, monospace);

  font-size:13px;

  font-variant-numeric:tabular-nums;

  font-weight:700;

  height:36px;

  justify-content:center;

  min-width:36px;

  padding:0 4px;

  place-items:center;

  text-decoration:none;

  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;

  width:36px;

}

.page-nav .pager-num:hover,

.pager-num:hover{

  border-color:#111;

  color:#111;

  transform:translateY(-1px);

}

.page-nav .pager-num.is-active,

.pager-num.is-active{

  background:#111 !important;

  border-color:#111 !important;

  box-shadow:0 3px 0 rgba(0,0,0,.18);

  color:#fff !important;

}

.page-nav .pager-gap,

.pager-gap{

  color:#999;

  font-family:var(--font-code, ui-monospace, monospace);

  font-size:13px;

  padding:0 2px;

}

.pagination{

  align-items:center;

  display:flex;

  flex-wrap:wrap;

  gap:8px;

  justify-content:center;

  margin-top:24px;

  padding:12px 0;

}

.pagination .page-btn,

.page-btn{

  align-items:center;

  background:#fff;

  border:1px solid #ddd;

  border-radius:999px;

  color:#555;

  cursor:pointer;

  display:inline-flex;

  font-family:var(--font-code, ui-monospace, monospace);

  font-size:12px;

  font-weight:700;

  justify-content:center;

  min-height:36px;

  min-width:36px;

  padding:8px 14px;

  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;

}

.pagination .page-btn:hover,

.page-btn:hover{

  background:#111;

  border-color:#111;

  color:#fff;

  transform:translateY(-1px);

}

.pagination .page-btn.active,

.page-btn.active{

  background:#111 !important;

  border-color:#111 !important;

  color:#fff !important;

}

.page-info,

.page-ellipsis{

  color:#999;

  font-family:var(--font-code, ui-monospace, monospace);

  font-size:12px;

}

@media (max-width:767px){

  .page-nav{

    align-items:stretch;

    flex-direction:column;

    gap:10px;

  }

  .page-nav .pager-btn,

  .pager-btn{

    justify-content:center;

    text-align:center;

  }

  .page-nav .pager-pages,

  .pager-pages{

    justify-content:center;

  }

}