/* DEEPMINE v10.2 — operations pages: the in-game announcement strip, 问题反馈 (data-mode="feedback") and 管理后台
   (data-mode="admin") with its action sheet (<dialog id="admin-action">).
   Markup: public/feedback-panel.mjs, public/admin-panel.mjs, #announcement in public/index.html (mobile.mjs fills it).
   Everything composes the shared components (.btn, .chip, .seg, .note, .card, .list, .empty-state, .kv-list); only layout and
   the few page-specific looks are defined here. Panel bodies re-render every 2 s: no entrance animation on these pages. */
@layer pages {
  /* ───────────── Announcement strip (between the top bar and the objective) ───────────── */
  .announcement {
    flex: none;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 6px;
    margin: 0 var(--gutter) 2px;
    padding: 2px 2px 2px 10px;
    min-height: 40px;
    border-radius: var(--r-md);
    border: 1px solid var(--line-gold);
    background: linear-gradient(180deg, rgb(245 200 105 / .16), rgb(245 200 105 / .07));
    color: var(--text-1);
  }
  .announcement[hidden] { display: none; }
  .announcement-icon { display: grid; place-items: center; }
  .announcement-icon .gi { width: 22px; height: 22px; }
  .announcement-text {
    margin: 0;
    min-width: 0;
    font-size: var(--fs-12);
    line-height: 1.35;
    color: var(--text-1);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .announcement-close {
    position: relative;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text-3);
  }
  .announcement-close::before { content: ''; position: absolute; inset: -4px; }
  .announcement-close .gi { width: 16px; height: 16px; }
  .announcement.is-maintenance { border-color: rgb(255 196 92 / .5); background: linear-gradient(180deg, rgb(255 196 92 / .2), rgb(255 196 92 / .08)); }

  /* ───────────── 问题反馈 ───────────── */
  #sheet[data-mode="feedback"] #sheet-body { padding-bottom: 24px; }
  .feedback-panel { display: grid; gap: 12px; min-width: 0; }
  .feedback-panel > * { min-width: 0; }
  .feedback-views { display: flex; gap: 6px; }
  .feedback-views > button { position: relative; flex: 1 1 0; min-height: 40px; }
  .feedback-views .num { margin-left: 4px; color: var(--gold-200); }
  .feedback-views-dot { position: absolute; top: 6px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger-strong); box-shadow: 0 0 0 2px var(--surface-1); }
  .feedback-intro { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
  .feedback-intro .gi { flex: none; width: 30px; height: 30px; }
  .feedback-form { display: grid; gap: 12px; padding: 14px; }
  .feedback-form .field > label { font-size: var(--fs-12); font-weight: 700; color: var(--text-3); }
  .feedback-form textarea { min-height: 120px; }
  .feedback-count { justify-self: end; font-size: var(--fs-11); color: var(--text-3); font-variant-numeric: tabular-nums; }
  .feedback-categories { display: flex; flex-wrap: wrap; gap: 6px; }
  .feedback-categories > button { min-height: 36px; }
  .feedback-submit { width: 100%; }
  .feedback-submit:disabled { filter: saturate(.5) brightness(.8); }
  .feedback-remaining, .feedback-limit { margin: 0; font-size: var(--fs-12); color: var(--text-3); text-align: center; }
  .feedback-limit { text-align: left; }
  .feedback-history .section-head { display: flex; align-items: center; gap: 8px; }
  .feedback-history .section-head h3 { flex: 1 1 auto; }
  .feedback-refresh { flex: none; }
  .feedback-refresh:disabled .gi { animation: dm-spin 1s var(--ease-in-out) 4; }
  html.low-quality .feedback-refresh:disabled .gi { animation: none; }
  .feedback-list { display: grid; gap: 8px; }
  .feedback-item { border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line-1); overflow: hidden; }
  .feedback-item.has-reply { border-color: var(--line-gold); }
  .feedback-item-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 4px 8px;
    align-items: center;
    width: 100%;
    min-height: 56px;
    padding: 10px 12px;
    text-align: left;
    color: var(--text-1);
  }
  .feedback-item-meta { grid-column: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
  .feedback-item-meta time { margin-left: auto; font-size: var(--fs-11); color: var(--text-3); white-space: nowrap; }
  .feedback-item-text {
    grid-column: 1;
    font-size: var(--fs-13);
    line-height: 1.4;
    color: var(--text-2);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .feedback-chevron { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--gold-300); transition: transform var(--dur-2) var(--ease-out); }
  .feedback-item.is-expanded .feedback-chevron { transform: rotate(90deg); }
  .feedback-item.is-expanded .feedback-item-text { display: none; }
  .feedback-status {
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--r-pill);
    font-size: var(--fs-11); font-weight: 800; border: 1px solid var(--line-2); background: var(--surface-inset); color: var(--text-2);
  }
  .feedback-status.status-open { color: var(--warn); border-color: rgb(255 196 92 / .34); background: var(--warn-bg); }
  .feedback-status.status-processing { color: var(--info); border-color: rgb(120 196 255 / .32); background: var(--info-bg); }
  .feedback-status.status-resolved { color: var(--jade-200); border-color: rgb(80 200 140 / .34); background: var(--success-bg); }
  .feedback-status.status-closed { color: var(--text-3); }
  .feedback-new {
    display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: var(--r-pill);
    font-size: var(--fs-11); font-weight: 800; color: var(--text-on-gold); background: var(--grad-gold);
  }
  .feedback-thread { display: grid; gap: 10px; padding: 2px 12px 12px; }
  .feedback-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
  .feedback-steps li { position: relative; display: grid; justify-items: center; gap: 4px; font-size: var(--fs-11); color: var(--text-3); text-align: center; }
  .feedback-steps li i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-inset); border: 2px solid var(--line-3); }
  .feedback-steps li + li::before { content: ''; position: absolute; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; }
  .feedback-steps li i { position: relative; z-index: 1; }
  .feedback-steps li.is-done i, .feedback-steps li.is-current i { background: var(--jade-400); border-color: var(--jade-200); }
  .feedback-steps li.is-done + li::before, .feedback-steps li.is-current::before { background: var(--jade-400); }
  .feedback-steps li.is-current { color: var(--text-1); font-weight: 700; }
  .feedback-steps.is-closed li.is-current i { background: var(--text-3); border-color: var(--text-2); }
  .feedback-original, .feedback-contact { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-1); overflow-wrap: anywhere; white-space: pre-wrap; }
  .feedback-contact { font-size: var(--fs-12); color: var(--text-3); white-space: normal; }
  .feedback-replies { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .feedback-reply { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-inset); border: 1px solid var(--line-1); }
  .feedback-reply.is-platform { border-color: var(--line-gold); }
  .feedback-reply-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-12); }
  .feedback-reply-head b { color: var(--gold-200); }
  .feedback-reply.is-player .feedback-reply-head b { color: var(--jade-200); }
  .feedback-reply-head time { color: var(--text-3); font-size: var(--fs-11); }
  .feedback-reply p { margin: 0; font-size: var(--fs-13); line-height: 1.5; color: var(--text-1); overflow-wrap: anywhere; white-space: pre-wrap; }
  .feedback-waiting { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-12); color: var(--text-3); }
  .feedback-waiting .icon { width: 16px; height: 16px; flex: none; }
  .feedback-empty { padding: var(--s-5) var(--s-3); }

  /* ───────────── 管理后台 ───────────── */
  #sheet[data-mode="admin"] #sheet-body { padding-bottom: 28px; }
  .admin-panel { display: grid; gap: 10px; min-width: 0; }
  .admin-panel > * { min-width: 0; }
  .admin-tabs { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 3px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs > button { flex: none; min-height: 40px; }
  .admin-badge {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 5px; border-radius: 9px;
    font-size: var(--fs-11); font-weight: 800; color: var(--text-on-gold); background: var(--grad-gold);
  }
  .admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
  .admin-toolbar small { color: var(--text-3); font-size: var(--fs-11); }
  .admin-refresh:disabled .gi { animation: dm-spin 1s var(--ease-in-out) 4; }
  html.low-quality .admin-refresh:disabled .gi { animation: none; }
  .admin-body { display: grid; gap: 12px; min-width: 0; }
  .admin-body > * { min-width: 0; }
  .admin-section { display: grid; gap: 8px; }
  .admin-section .section-head { margin: 0; }
  .admin-empty { margin: 0; padding: 18px 8px; text-align: center; font-size: var(--fs-13); color: var(--text-3); }
  .admin-foot, .admin-meta { margin: 0; font-size: var(--fs-12); color: var(--text-3); line-height: 1.5; }
  .admin-hotwallet { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 8px; }
  .admin-hotwallet small { flex: 1; min-width: 0; font-size: var(--fs-12); color: var(--text-3); line-height: 1.5; }
  .admin-hotwallet.is-low small { color: var(--danger-strong); }
  .admin-hotwallet .btn { flex: none; }
  .admin-payout { color: var(--text-3); }
  .admin-alerts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .admin-alerts .note { margin: 0; }
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-stat .stat-value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .admin-kv { gap: 0; }
  .admin-kv .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--line-1); font-size: var(--fs-13); }
  .admin-kv .kv > :first-child { color: var(--text-3); flex: none; }
  .admin-kv .kv > :last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; color: var(--text-1); }
  .admin-kv code, .admin-ids, .admin-row code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--fs-12); }
  .admin-chips, .admin-actions, .admin-filters { display: flex; flex-wrap: wrap; gap: 6px; }
  .admin-actions { padding-top: 6px; }
  .admin-actions:empty { display: none; }
  .admin-actions .btn { min-height: 40px; }
  .admin-filters button b { margin-left: 4px; color: var(--gold-200); }
  .admin-bar { display: flex; }
  .admin-modebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .admin-modebar > span { font-size: var(--fs-12); color: var(--text-3); margin-right: 4px; }
  .admin-modebar .btn[aria-pressed="true"] { box-shadow: var(--glow-gold); }
  .admin-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .admin-rows { display: grid; gap: 8px; }
  .admin-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: start; width: 100%; padding: 10px 12px; text-align: left;
    border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line-1); color: var(--text-1);
  }
  .admin-row--button { align-items: center; min-height: 56px; }
  .admin-row.is-waiting { border-color: var(--line-gold); }
  .admin-row-main { display: grid; gap: 2px; min-width: 0; }
  .admin-row-main strong { font-size: var(--fs-14); overflow-wrap: anywhere; }
  .admin-row-main small { font-size: var(--fs-12); color: var(--text-3); overflow-wrap: anywhere; line-height: 1.4; }
  .admin-row-side { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
  .admin-row-side .icon { width: 16px; height: 16px; color: var(--gold-300); }
  .admin-row .admin-actions { grid-column: 1 / -1; }
  .admin-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .admin-card { display: grid; gap: 8px; padding: 12px; }
  .admin-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .admin-card-head strong { font-size: var(--fs-15); margin-right: auto; overflow-wrap: anywhere; }
  .admin-label { font-size: var(--fs-12); font-weight: 700; color: var(--text-3); }
  .admin-perms { display: grid; gap: 8px; }
  .admin-perm { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-1); }
  .admin-perm-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .admin-perm-head strong { margin-right: auto; }
  .admin-lines, .admin-notes { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
  .admin-lines li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-13); padding: 6px 2px; border-bottom: 1px solid var(--line-1); }
  .admin-lines small, .admin-notes small { color: var(--text-3); font-size: var(--fs-11); }
  .admin-notes li { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-inset); }
  .admin-notes p { margin: 0; font-size: var(--fs-13); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
  .admin-lang textarea { min-height: 64px; }
  .admin-error { margin: 0; }

  /* The action sheet: <dialog id="admin-action" class="welcome-dialog admin-action"> */
  .admin-action { width: min(380px, calc(100vw - 24px)); }
  .admin-action-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 18px; border-bottom: 1px solid rgb(242 205 128 / .24); }
  .admin-action-head h2 { margin: 0; font-size: var(--fs-18); line-height: 1.3; overflow-wrap: anywhere; }
  .admin-action-head h2:focus { outline: none; }
  .admin-action-head .welcome-close { position: static; flex: none; }
  .admin-action-body { display: grid; gap: 12px; padding: 14px 18px 18px; }
  .admin-action-lines { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-13); color: var(--text-2); overflow-wrap: anywhere; }
  .admin-action-body .field > label { font-size: var(--fs-12); font-weight: 700; color: var(--text-3); }
  .admin-action-buttons { display: grid; gap: 8px; }

  /* 我的 · menu entries added in v10.2 (问题反馈, 管理后台) */
  .profile-menu-row .menu-dot {
    width: 10px; height: 10px; border-radius: 50%; background: var(--danger-strong); box-shadow: 0 0 0 2px var(--surface-1);
  }
}