/* 工笔人生 · 管理面板样式（2026-10-24 P2）
   与主站同一套视觉语言：暖白纸色底 / 墨黑文字 / 金棕点缀 / 宋体标题 */

#gb-adm, #gb-adm * { box-sizing: border-box; }

/* ---------- 页脚入口 ---------- */
.gb-foot-admin {
  display: inline-block; margin-left: 14px; font-size: 12px; color: #b3a884;
  text-decoration: none; cursor: pointer; letter-spacing: 1px;
  border-bottom: 1px dotted rgba(179, 168, 132, .6); padding-bottom: 1px;
  transition: color .2s;
}
.gb-foot-admin:hover { color: #a87816; }
/* 未登录：低调灰褐（默认）；已登录：橙色，一眼看出自己有站主权限 */
.gb-foot-admin.on {
  color: #d97706;
  border-bottom-color: rgba(217, 119, 6, .55);
}
.gb-foot-admin.on:hover { color: #b45309; }

/* ---------- 遮罩 ---------- */
.gb-mask {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(28, 24, 16, .46); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .22s ease; padding: 16px;
}
.gb-mask.on { opacity: 1; }

/* ---------- 登录框 ---------- */
.gb-login {
  width: 100%; max-width: 360px; background: #fdfbf5;
  border-radius: 16px; padding: 26px 22px 22px;
  box-shadow: 0 24px 60px rgba(60, 48, 26, .28);
  border: 1px solid rgba(198, 178, 130, .5);
  transform: translateY(10px) scale(.98); transition: transform .24s cubic-bezier(.2,.8,.3,1);
}
.gb-mask.on .gb-login { transform: none; }
.gb-login h3 {
  margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #2f2b22;
  font-family: "Songti SC", "Noto Serif SC", serif; letter-spacing: 1px;
}
.gb-login p { margin: 0 0 18px; font-size: 12.5px; color: #a89878; line-height: 1.7; }
.gb-login input {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid rgba(198, 178, 130, .7); border-radius: 10px;
  background: #fff; color: #2f2b22; outline: none; transition: border-color .2s;
}
.gb-login input:focus { border-color: #b8860b; }
.gb-login .err { min-height: 18px; margin: 8px 0 0; font-size: 12.5px; color: #c0392b; }
.gb-login .row { display: flex; gap: 10px; margin-top: 10px; }
.gb-btn {
  flex: 1; padding: 11px 16px; font-size: 14px; font-family: inherit; cursor: pointer;
  border-radius: 10px; border: 1px solid rgba(198, 178, 130, .7);
  background: #fff; color: #6b5f45; transition: all .18s;
}
.gb-btn:hover { background: #fffaf0; border-color: #c9a961; }
.gb-btn.primary {
  background: linear-gradient(180deg, #c8903f, #b8860b); color: #fff;
  border-color: transparent; font-weight: 600;
  box-shadow: 0 6px 16px rgba(184, 134, 11, .3);
}
.gb-btn.primary:hover { filter: brightness(1.06); }
.gb-btn:disabled { opacity: .55; cursor: default; }
.gb-btn.danger { color: #b03a2e; border-color: rgba(176, 58, 46, .4); }
.gb-btn.danger:hover { background: #fdf1ef; }

/* ---------- 面板 ---------- */
.gb-panel {
  width: 100%; max-width: 880px; height: min(86vh, 760px);
  background: #fdfbf5; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 28px 70px rgba(60, 48, 26, .3);
  border: 1px solid rgba(198, 178, 130, .5);
  transform: translateY(16px) scale(.985); transition: transform .26s cubic-bezier(.2,.8,.3,1);
}
.gb-mask.on .gb-panel { transform: none; }

.gb-ph {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid rgba(198, 178, 130, .38);
  background: linear-gradient(180deg, #fffdf8, #faf6ea);
}
.gb-ph .t {
  font-size: 15px; font-weight: 700; color: #2f2b22; letter-spacing: 1px;
  font-family: "Songti SC", "Noto Serif SC", serif;
}
.gb-ph .sp { flex: 1 1 auto; }
.gb-x {
  border: 0; background: transparent; font-size: 20px; line-height: 1;
  color: #b3a884; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.gb-x:hover { color: #8a6a20; background: rgba(198, 178, 130, .16); }

.gb-tabs {
  flex: 0 0 auto; display: flex; gap: 4px; padding: 10px 14px 0;
  overflow-x: auto; border-bottom: 1px solid rgba(198, 178, 130, .3);
}
.gb-tabs button {
  flex: 0 0 auto; border: 0; background: transparent; font-family: inherit;
  font-size: 13.5px; color: #8b7f63; padding: 9px 14px 10px; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all .18s; white-space: nowrap;
}
.gb-tabs button:hover { color: #6b5f45; }
.gb-tabs button.on { color: #a87816; border-bottom-color: #b8860b; font-weight: 600; }

.gb-pb { flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 40px; -webkit-overflow-scrolling: touch; }

/* ---------- 列表 ---------- */
.gb-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.gb-toolbar .hint { flex: 1 1 auto; font-size: 12px; color: #b3a884; }
.gb-toolbar .gb-btn { flex: 0 0 auto; padding: 9px 16px; }

.gb-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px;
  background: #fff; border: 1px solid rgba(198, 178, 130, .42);
  border-radius: 12px; margin-bottom: 10px; transition: box-shadow .2s, border-color .2s;
}
.gb-item:hover { box-shadow: 0 6px 18px rgba(120, 100, 60, .1); border-color: rgba(184, 134, 11, .5); }
.gb-item .main { flex: 1 1 auto; min-width: 0; }
.gb-item .l1 { font-size: 14px; font-weight: 600; color: #2f2b22; line-height: 1.5; }
.gb-item .l2 { font-size: 12px; color: #a89878; margin-top: 4px; line-height: 1.6; }
.gb-item .ops { flex: 0 0 auto; display: flex; gap: 6px; }
.gb-item .ops button {
  border: 1px solid rgba(198, 178, 130, .6); background: #fffdf8; color: #6b5f45;
  border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
  transition: all .16s;
}
.gb-item .ops button:hover { border-color: #b8860b; color: #a87816; }
.gb-item .ops button.del:hover { border-color: #b03a2e; color: #b03a2e; background: #fdf1ef; }
.gb-tag {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px;
  margin-left: 6px; vertical-align: 1px;
}
.gb-tag.pub { background: #e8f5ee; color: #2f9e7f; }
.gb-tag.mem { background: #f3edff; color: #7357c9; }
.gb-tag.pri { background: #f0efe9; color: #8b7f63; }
.gb-tag.off { background: #f0efe9; color: #9b8f76; }
.gb-empty { text-align: center; color: #b3a884; font-size: 13px; padding: 40px 0; }

/* ---------- 编辑表单 ---------- */
.gb-form { display: flex; flex-direction: column; gap: 14px; }
.gb-f { display: flex; flex-direction: column; gap: 6px; }
.gb-f > label { font-size: 12.5px; color: #8b7f63; letter-spacing: .5px; }
.gb-f > label .req { color: #c0392b; margin-left: 2px; }
.gb-f input[type=text], .gb-f input[type=password], .gb-f input[type=datetime-local],
.gb-f input[type=number], .gb-f select, .gb-f textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  color: #2f2b22; background: #fff; outline: none;
  border: 1px solid rgba(198, 178, 130, .62); border-radius: 9px;
  transition: border-color .18s;
}
.gb-f input:focus, .gb-f select:focus, .gb-f textarea:focus { border-color: #b8860b; }
.gb-f textarea { resize: vertical; line-height: 1.8; min-height: 120px; }
.gb-f textarea.big { min-height: 300px; font-size: 15px; line-height: 1.95; }
.gb-f .tip { font-size: 11.5px; color: #b3a884; line-height: 1.6; }
.gb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gb-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.gb-thumb {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  border: 1px dashed rgba(198, 178, 130, .7); border-radius: 10px; background: #fffdf8;
}
.gb-thumb img { width: 74px; height: 74px; object-fit: cover; border-radius: 8px; background: #f2ecdb; }
.gb-thumb .info { flex: 1 1 auto; font-size: 12px; color: #a89878; line-height: 1.7; word-break: break-all; }
.gb-thumb .gb-btn { flex: 0 0 auto; padding: 7px 12px; font-size: 12.5px; }

.gb-form-foot {
  display: flex; gap: 10px; padding-top: 6px;
  position: sticky; bottom: -40px; background: linear-gradient(180deg, rgba(253,251,245,0), #fdfbf5 30%);
  padding-bottom: 10px; margin-top: 4px;
}
.gb-form-foot .gb-btn { padding: 12px 18px; }

/* 提示条 */
.gb-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(12px);
  z-index: 10000; background: rgba(47, 43, 34, .94); color: #fff;
  font-size: 13.5px; padding: 11px 20px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); opacity: 0;
  transition: opacity .2s, transform .24s; pointer-events: none; max-width: 80vw; text-align: center;
}
.gb-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.gb-toast.err { background: rgba(150, 46, 38, .96); }
.gb-toast.ok { background: rgba(32, 105, 78, .96); }

/* 邀请链接弹窗 */
.gb-invite { width: 100%; max-width: 520px; background: #fdfbf5; border-radius: 16px; padding: 24px 22px;
  border: 1px solid rgba(198, 178, 130, .5); box-shadow: 0 24px 60px rgba(60, 48, 26, .28); }
.gb-invite h3 { margin: 0 0 8px; font-size: 18px; font-family: "Songti SC", serif; color: #2f2b22; }
.gb-invite p { margin: 0 0 14px; font-size: 12.5px; color: #a89878; line-height: 1.7; }
.gb-invite textarea { width: 100%; min-height: 76px; padding: 10px 12px; font-size: 12.5px;
  border: 1px solid rgba(198, 178, 130, .62); border-radius: 9px; background: #fff; color: #6b5f45;
  font-family: ui-monospace, Menlo, monospace; resize: none; }

/* 手机端：整屏 */
@media (max-width: 700px) {
  .gb-mask { padding: 0; align-items: flex-end; }
  .gb-panel { max-width: 100%; height: 92vh; border-radius: 18px 18px 0 0; }
  .gb-pb { padding: 14px 14px 46px; }
  .gb-row2, .gb-row3 { grid-template-columns: 1fr; }
  .gb-item .ops { flex-direction: column; }
  .gb-tabs { padding: 8px 10px 0; }
  .gb-tabs button { padding: 9px 11px 10px; font-size: 13px; }
}

/* ---------- 我的相册（2026-10-24） ---------- */
.gb-photos {
  display: grid; gap: 12px; padding: 4px;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
}
.gb-photo {
  background: #fff; border: 1px solid #e8e2d6; border-radius: 10px;
  overflow: hidden; transition: box-shadow .18s, transform .18s;
}
.gb-photo:hover { box-shadow: 0 6px 16px rgba(120, 100, 60, .12); transform: translateY(-1px); }
.gb-photo.off { opacity: .55; }
.gb-photo .ph-img { position: relative; aspect-ratio: 4 / 3; background: #f4f1ea; }
.gb-photo .ph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gb-photo .ph-ord {
  position: absolute; left: 6px; top: 6px; font-size: 11px; line-height: 1.5;
  background: rgba(0, 0, 0, .55); color: #fff; padding: 0 6px; border-radius: 8px;
}
.gb-photo .ph-off {
  position: absolute; right: 6px; top: 6px; font-size: 11px; line-height: 1.5;
  background: rgba(180, 60, 40, .86); color: #fff; padding: 0 6px; border-radius: 8px;
}
.gb-photo .ph-meta { padding: 7px 8px 4px; }
.gb-photo .ph-t {
  font-size: 13px; font-weight: 600; color: #333; line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gb-photo .ph-d { font-size: 11.5px; color: #9b9384; margin-top: 2px; }
.gb-photo .ph-ops { display: flex; gap: 6px; padding: 0 8px 8px; }
.gb-photo .ph-ops button {
  flex: 1; border: 1px solid #e2dccf; background: #faf8f3; border-radius: 7px;
  padding: 5px 0; font-size: 12px; cursor: pointer; color: #555; transition: background .15s;
}
.gb-photo .ph-ops button:hover { background: #f1ece0; }
.gb-photo .ph-ops button.del { color: #c0392b; border-color: #e8cfc9; }
.gb-photo .ph-ops button.del:hover { background: #fdf3f1; }

/* ================= 邮件式编辑器（2026-10-24） =================
   参照常见写邮件界面：顶栏 + 两行工具条 + 主题行 + 无边框大留白正文 + 底部折叠设置 */

.gb-mask.gb-full {
  padding: 0; background: #fdfbf5; backdrop-filter: none;
  align-items: stretch; justify-content: stretch;
}
.gb-mail {
  width: 100%; height: 100%; background: #fdfbf5; color: #2f2b22;
  display: flex; flex-direction: column; min-height: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---- 顶栏 ---- */
.gb-mtop {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(198, 178, 130, .32);
  background: #fdfbf5;
}
.gb-mback {
  border: 0; background: none; font-size: 15px; color: #8a8578;
  cursor: pointer; padding: 6px 4px; letter-spacing: .5px;
}
.gb-mback:hover { color: #a87816; }
.gb-mttl {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 16px; font-weight: 700; letter-spacing: .06em; color: #2f2b22;
}
.gb-msp { flex: 1 1 auto; }
.gb-mtop .gb-btn { height: 34px; padding: 0 16px; font-size: 13.5px; }

/* ---- 工具条 ---- */
.gb-mtools {
  flex: 0 0 auto; background: #faf6ec;
  border-bottom: 1px solid rgba(198, 178, 130, .28);
}
.gb-mt1, .gb-mt2 {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 12px; overflow-x: auto; overflow-y: visible;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.gb-mt1::-webkit-scrollbar, .gb-mt2::-webkit-scrollbar { display: none; }
.gb-mt2 { border-top: 1px dashed rgba(198, 178, 130, .38); padding-top: 6px; padding-bottom: 6px; }
.gb-mt2[hidden] { display: none; }
.gb-mi {
  flex: 0 0 auto; height: 30px; min-width: 30px; padding: 0 9px;
  border: 1px solid transparent; border-radius: 7px; background: none;
  color: #4a453a; font-size: 13px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.gb-mi:hover { background: #fff; border-color: rgba(198, 178, 130, .55); color: #a87816; }
.gb-mi.on { background: #fff; border-color: #c9a961; color: #a87816; }
.gb-mi.wide { padding: 0 11px; }
.gb-msep { flex: 0 0 auto; width: 1px; height: 16px; background: rgba(198, 178, 130, .5); margin: 0 4px; }
.gb-mcount { flex: 0 0 auto; font-size: 12px; color: #a89f8c; padding-left: 6px; }

/* ---- 插入 ▾ 下拉 ---- */
.gb-mdd { position: relative; display: inline-flex; flex: 0 0 auto; }
.gb-mmenu {
  display: none; position: absolute; top: 36px; left: 0; z-index: 30;
  min-width: 132px; padding: 6px; background: #fff;
  border: 1px solid rgba(198, 178, 130, .45); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(60, 48, 26, .16);
}
.gb-mdd.open .gb-mmenu { display: block; }
.gb-mmenu button {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 9px 10px; border-radius: 7px; font-size: 13.5px; color: #4a453a; cursor: pointer;
  white-space: nowrap;
}
.gb-mmenu button:hover { background: #faf6ec; color: #a87816; }

/* ---- 正文区（大留白，无边框） ---- */
.gb-mbody {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 4px max(16px, calc((100% - 780px) / 2)) 40px;
  background: #fff;
}
.gb-msub {
  flex: 0 0 auto; width: 100%; border: 0; outline: 0; background: none;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 22px; font-weight: 700; color: #2f2b22;
  padding: 20px 0 12px; letter-spacing: .02em;
  border-bottom: 1px solid rgba(198, 178, 130, .28);
}
.gb-msub::placeholder { color: #c9c2b0; font-weight: 400; font-size: 19px; }
.gb-mtext {
  flex: 1 1 auto; width: 100%; min-height: 44vh; border: 0; outline: 0;
  background: none; resize: none; padding: 20px 0 0;
  font-size: 16px; line-height: 1.95; color: #2f2b22;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.gb-mtext::placeholder { color: #c9c2b0; }
.gb-mprev {
  flex: 1 1 auto; min-height: 44vh; padding: 20px 0 0;
  font-size: 16px; line-height: 1.95; color: #2f2b22; overflow-wrap: break-word;
}
.gb-mprev img { max-width: 100%; border-radius: 10px; }
.gb-mprev h2 { font-family: "Noto Serif SC", serif; font-size: 20px; margin: 22px 0 12px; }
.gb-mprev h3 { font-family: "Noto Serif SC", serif; font-size: 17px; margin: 18px 0 10px; }

/* ---- 底部发布设置 ---- */
.gb-mfoot {
  flex: 0 0 auto; border-top: 1px solid rgba(198, 178, 130, .32); background: #faf6ec;
}
.gb-mfh {
  width: 100%; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 11px max(16px, calc((100% - 780px) / 2));
  font-size: 13px; color: #6b6455; text-align: left;
}
.gb-mfh b { font-weight: 400; color: #a87816; }
.gb-mfh i { margin-left: auto; font-style: normal; color: #a89f8c; transition: transform .2s; }
.gb-mfh.open i { transform: rotate(180deg); }
.gb-mfb {
  padding: 4px max(16px, calc((100% - 780px) / 2)) 18px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.gb-mfb[hidden] { display: none; }
.gb-mfb .gb-f { margin: 0; }
.gb-ck, .gb-mfb label.gb-ck { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #4a453a; }
.gb-ck input { width: auto !important; }

/* ---- 手机 ---- */
@media (max-width: 560px) {
  .gb-mtop { padding: 8px 10px; gap: 6px; }
  .gb-mttl { display: none; }
  .gb-mtop .gb-btn { height: 32px; padding: 0 12px; font-size: 13px; }
  .gb-mt1, .gb-mt2 { padding-left: 8px; padding-right: 8px; }
  .gb-mi { height: 29px; font-size: 12.5px; padding: 0 8px; }
  .gb-mbody { padding: 2px 14px 28px; }
  .gb-msub { font-size: 19px; padding: 14px 0 10px; }
  .gb-msub::placeholder { font-size: 16px; }
  .gb-mtext, .gb-mprev { font-size: 15.5px; line-height: 1.9; }
  .gb-mfh { padding-left: 14px; padding-right: 14px; }
  .gb-mfb { padding-left: 14px; padding-right: 14px; grid-template-columns: 1fr 1fr; }
}

/* 一键排版按钮（金色强调，排版后可撤销） */
.gb-mi.gold { color: #a87816; border-color: rgba(201, 169, 97, .55); background: #fffaf0; font-weight: 600; }
.gb-mi.gold:hover { background: #fff3dc; border-color: #c9a961; color: #8a5f0d; }
.gb-mi.undo { color: #b03a2e; border-color: rgba(176, 58, 46, .38); background: #fdf1ef; font-weight: 600; }
.gb-mi.undo:hover { background: #fbe6e3; border-color: rgba(176, 58, 46, .6); }

/* ============ 独立管理页模式（/manage.html） ============
   从页脚「管理」点进来时，面板整页铺满，不再是一个小浮窗 */
.gb-mask.gb-page {
  padding: 0; background: #fdfbf5; backdrop-filter: none;
  align-items: stretch; justify-content: stretch;
}
.gb-mask.gb-page .gb-panel {
  max-width: none; width: 100%; height: 100%;
  border-radius: 0; border: 0; box-shadow: none; transform: none;
}
.gb-mask.gb-page .gb-ph,
.gb-mask.gb-page .gb-tabs,
.gb-mask.gb-page .gb-pb {
  padding-left: max(18px, calc((100% - 1180px) / 2));
  padding-right: max(18px, calc((100% - 1180px) / 2));
}
.gb-mask.gb-page .gb-ph { padding-top: 18px; padding-bottom: 14px; }
@media (max-width: 700px) {
  .gb-mask.gb-page .gb-ph,
  .gb-mask.gb-page .gb-tabs,
  .gb-mask.gb-page .gb-pb { padding-left: 14px; padding-right: 14px; }
}