/* ============================================================
   领地页侧边栏试点样式（仅 residences.html 加载）
   布局参考 AstrBot WebUI：左侧固定侧边栏 + 内容区卡片分级
   双主题：默认 = 现代后台风（B）；html[data-theme='c'] = MC 游戏深色风（C）
   注意：本页不再加载 portal.css / nav.css，这里用 token 重写了所需组件类（类名沿用，
   页面内联脚本的模板字符串改动最小）。改其他页面的顶栏仍然只改 nav.css / guild-nav.js。
   ============================================================ */

/* ============ ① 主题 token：B 现代后台（默认） ============ */
:root{
  --app-bg:#f5f6f8;             /* 页面底 */
  --app-bg-soft:#eef1f5;        /* 次级底（成员名单等内嵌区） */
  --app-surface:#ffffff;        /* 卡片面 */
  --app-surface-2:#f7f9fb;      /* 输入框 / 次级面 */
  --app-border:#e4e8ee;
  --app-border-strong:#cdd5df;
  --app-text:#212b36;
  --app-text-soft:#5c6b7a;
  --app-text-faint:#93a0ae;
  --app-accent:#2f6fed;         /* 主强调（蓝） */
  --app-accent-strong:#1d5bd6;
  --app-accent-contrast:#ffffff;
  --app-accent-soft:rgba(47,111,237,.10);
  --app-danger:#d64545;
  --app-radius:10px;
  --app-radius-sm:8px;
  --app-shadow:0 1px 2px rgba(16,24,40,.05),0 4px 14px -6px rgba(16,24,40,.10);
  --app-sidebar-bg:#ffffff;
  --app-sidebar-border:#e8ecf1;
  --app-side-item:#5c6b7a;      /* 侧边栏普通项 */
  --app-side-active:var(--app-accent);
  --app-side-active-bg:var(--app-accent-soft);
  --app-side-group:#93a0ae;     /* 分组小标签 */
  --app-font:'Segoe UI','Microsoft YaHei',-apple-system,'PingFang SC',sans-serif;
  --app-mono:ui-monospace,SFMono-Regular,Consolas,'Courier New',monospace;
  --world-ow:#3f7a3a;
  --world-nether:#b3402a;
  --world-end:#7a4fb0;
  --world-other:#93a0ae;
}

/* ============ ①' 主题 token：C MC 游戏深色（只覆盖值，不改结构） ============ */
:root[data-theme='c']{
  --app-bg:#131313;
  --app-bg-soft:#0e0e0e;
  --app-surface:#1e1e1e;
  --app-surface-2:#161616;
  --app-border:#383838;
  --app-border-strong:#555;
  --app-text:#e4e4e4;
  --app-text-soft:#b9b9b9;
  --app-text-faint:#8f8f8f;
  --app-accent:#eec25e;         /* MC 金黄 */
  --app-accent-strong:#f5d87e;
  --app-accent-contrast:#26231a;
  --app-accent-soft:rgba(238,194,94,.12);
  --app-danger:#e0796a;
  --app-radius:6px;             /* 更方正，贴近原版 GUI */
  --app-radius-sm:4px;
  --app-shadow:0 0 0 2px #0d0d0d,0 14px 30px rgba(0,0,0,.45); /* 原版黑描边 + 投影 */
  --app-sidebar-bg:#171717;
  --app-sidebar-border:#2c2c2c;
  --app-side-item:#b9b9b9;
  --app-side-group:#8f8f8f;
  --world-ow:#7ed082;           /* 深底提亮 */
  --world-nether:#e88a73;
  --world-end:#b98ae0;
  --world-other:#8f8f8f;
}

/* ============ ② 外壳布局 ============ */
html,body{margin:0;padding:0}
body{
  background:var(--app-bg);color:var(--app-text);
  font-family:var(--app-font);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s,color .2s;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.side-item:focus-visible,.portal-button:focus-visible,.copy-cmd:focus-visible,
.mini-btn:focus-visible,.res-members-toggle:focus-visible,.side-theme-toggle:focus-visible{outline:2px solid var(--app-accent);outline-offset:2px}

/* 桌面：左侧固定侧边栏，内容区右移 */
.app-sidebar{
  position:fixed;top:0;bottom:0;left:0;width:220px;z-index:30;
  display:flex;flex-direction:column;overflow-y:auto;
  background:var(--app-sidebar-bg);border-right:1px solid var(--app-sidebar-border);
}
.app-main{
  margin-left:220px;max-width:64rem;padding:2.2rem 2.6rem 5rem;box-sizing:border-box;
}
/* 移动端顶条：桌面不显示，≤720px 由第⑧节接管 */
.app-topbar{display:none}
/* 抽屉遮罩（hidden 属性由 js/sidebar.js 控制） */
.side-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);z-index:80}

/* ============ ③ 侧边栏组件 ============ */
.side-brand{
  display:flex;align-items:center;gap:.6rem;padding:1.1rem .9rem .9rem;
  font-weight:700;font-size:.95rem;color:var(--app-text);
}
.side-brand i{font-style:normal;font-size:1.35rem;flex:none;line-height:1}
.side-brand span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.side-brand small{font-size:.62rem;font-weight:400;letter-spacing:.08em;color:var(--app-text-faint)}
.side-nav{flex:1;padding:0 .6rem 1rem}
.side-group{font-size:.66rem;letter-spacing:.14em;color:var(--app-side-group);padding:1rem .8rem .4rem}
.side-item{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.15rem;padding:.55rem .8rem;
  border-radius:var(--app-radius-sm);color:var(--app-side-item);font-size:.85rem;
  transition:background .15s,color .15s;
}
.side-item i{width:1.3em;text-align:center;font-style:normal;flex:none}
.side-item:hover{background:var(--app-side-active-bg);color:var(--app-side-active)}
.side-item.is-active{background:var(--app-side-active-bg);color:var(--app-side-active);font-weight:600}
.side-foot{border-top:1px solid var(--app-sidebar-border);padding:.8rem;display:flex;flex-direction:column;gap:.5rem}
.side-foot .nav-links:empty{display:none}
.side-theme-toggle{
  display:block;width:100%;box-sizing:border-box;cursor:pointer;
  background:var(--app-surface-2);border:1px solid var(--app-border-strong);
  border-radius:var(--app-radius-sm);color:var(--app-text);font:inherit;font-size:.76rem;
  padding:.5rem .6rem;transition:all .15s;
}
.side-theme-toggle:hover{border-color:var(--app-accent);color:var(--app-accent)}

/* ============ ④ 页头（AstrBot 式：标题+说明 | 操作区） ============ */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.4rem;flex-wrap:wrap}
.page-head h1{margin:0;font-size:1.45rem;font-weight:700;letter-spacing:.02em}
.page-head > div:first-child p{margin:.5rem 0 0;max-width:34rem;color:var(--app-text-soft);font-size:.84rem;line-height:1.75}
.page-head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.setting-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}
.edit-hint{font-size:.74rem;color:var(--app-text-faint)}
.portal-status{margin:.45rem 0 0;font-size:.74rem;color:var(--app-text-soft);min-height:1.2em;text-align:right}

/* 区块标题 */
.app-main h2{
  display:flex;align-items:center;gap:.5rem;
  margin:2.2rem 0 .9rem;font-size:1.05rem;font-weight:700;letter-spacing:.03em;
}
.app-main h2 i{font-style:normal}

/* ============ ⑤ 卡片与信息分级（重构核心：字号×颜色×位置三级分层） ============ */
.card-list{display:flex;flex-direction:column;gap:.7rem}
.res-card{
  display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.1rem;
  background:var(--app-surface);border:1px solid var(--app-border);
  border-radius:var(--app-radius);box-shadow:var(--app-shadow);
}
/* 主题 C：原版 GUI 手感 = 外黑描边 + 内高光（shadow 里已含黑描边，这里补 bevel） */
:root[data-theme='c'] .res-card{
  border-color:var(--app-border-strong) #0d0d0d #0d0d0d var(--app-border-strong);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.06),var(--app-shadow);
}
.res-card-main{flex:1;min-width:0}
/* 一级：名称/私有/世界徽章 —— 扫视即得 */
.res-card-title{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.95rem;font-weight:700}
.res-card-title i{font-style:normal;flex:none}
:root[data-theme='c'] .res-card-title{text-shadow:1px 1px 0 rgba(0,0,0,.5)}
.res-name{font-weight:700;min-width:0;overflow-wrap:anywhere}
/* 二级：领主/管理身份行 —— 独立 meta 行，视觉降一档 */
.res-card-people{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .35rem;margin-top:.5rem}
/* 三级：简介/动作列表 —— 弱化，单行省略（title 属性带全文） */
.res-desc{margin:.5rem 0 0;color:var(--app-text-faint);font-size:.74rem;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-sub{margin:.4rem 0 0;color:var(--app-text-soft);font-size:.76rem;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 一级动作：复制指令按钮，右上固定位 */
.res-card-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}

/* 世界徽章（透明底 + 彩字描边，两主题通用） */
.world-badge{
  display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:999px;
  font-size:.68rem;line-height:1;padding:.22rem .55rem;white-space:nowrap;
}
.world-ow{color:var(--world-ow)}
.world-nether{color:var(--world-nether)}
.world-end{color:var(--world-end)}
.world-other{color:var(--world-other)}
/* 私有标签 */
.private-tag{
  display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:999px;
  color:var(--app-danger);font-size:.66rem;line-height:1;padding:.2rem .5rem;white-space:nowrap;
}

/* 身份标记：领主 = 流动彩色渐变，管理 = 强调色，普通成员无标记 */
.mem-chip{
  display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;
  font-size:.72rem;margin-right:.3rem;padding:.14rem .6rem;white-space:nowrap;
  background:var(--app-surface-2);border:1px solid var(--app-border);
}
.mem-chip i{font-style:normal;font-size:.58rem;letter-spacing:.14em;color:var(--app-text-faint)}
.mem-chip b{font-weight:600;letter-spacing:.02em}
.mem-lord{background:rgba(201,162,39,.14);border-color:rgba(201,162,39,.5)}
.mem-lord i{color:#8a6d1a}
.mem-admin{background:rgba(179,64,42,.07);border-color:rgba(179,64,42,.4)}
.mem-admin i{color:#b3402a}
.mem-flow{
  background:linear-gradient(90deg,#c0392b,#e67e22,#c9a227,#2f9e44,#2980b9,#c0392b);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lbNameFlow 5s linear infinite;
}
:root[data-theme='c'] .mem-lord i{color:#eec25e}
:root[data-theme='c'] .mem-admin{background:rgba(224,121,106,.10);border-color:rgba(224,121,106,.45)}
:root[data-theme='c'] .mem-admin i{color:#e0796a}
:root[data-theme='c'] .mem-flow{
  background:linear-gradient(90deg,#ff6b5e,#ffb347,#ffe08a,#7ed082,#7ec8ff,#ff6b5e);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mem-fixed{color:var(--app-accent);font-weight:700}
@keyframes lbNameFlow{0%{background-position:0% 50%}100%{background-position:-200% 50%}}

/* 成员名单折叠（按钮与名单 div 必须相邻：内联脚本用 nextElementSibling 取） */
.res-members-toggle{
  background:transparent;border:1px solid var(--app-border);border-radius:999px;
  color:var(--app-text-soft);cursor:pointer;font:inherit;font-size:.7rem;
  margin-top:.55rem;padding:.28rem .7rem;transition:all .15s;
}
.res-members-toggle:hover{border-color:var(--app-accent);color:var(--app-accent)}
.res-members-toggle .caret{display:inline-block;font-style:normal;transition:transform .25s}
.res-members-toggle.open .caret{transform:rotate(180deg)}
.res-members{
  background:var(--app-bg-soft);border-radius:var(--app-radius-sm);
  color:var(--app-text-soft);font-size:.74rem;line-height:2.2;
  margin-top:.55rem;padding:.55rem .8rem;
}

/* ============ ⑥ 控件（token 化重写，类名沿用内联脚本） ============ */
.portal-button{
  background:var(--app-accent);color:var(--app-accent-contrast);cursor:pointer;
  border:1px solid transparent;border-radius:var(--app-radius-sm);
  font:inherit;font-size:.8rem;padding:.52rem .95rem;transition:all .15s;white-space:nowrap;
}
.portal-button:hover{background:var(--app-accent-strong)}
.portal-button.secondary{background:var(--app-surface);color:var(--app-text);border-color:var(--app-border-strong)}
.portal-button.secondary:hover{background:var(--app-surface);border-color:var(--app-accent);color:var(--app-accent)}
.portal-input{
  background:var(--app-surface-2);border:1px solid var(--app-border-strong);
  border-radius:var(--app-radius-sm);color:var(--app-text);
  font:inherit;font-size:.82rem;padding:.5rem .7rem;box-sizing:border-box;
}
.portal-input:focus{border-color:var(--app-accent);outline:none}
.portal-input::placeholder{color:var(--app-text-faint)}
.setting-row .portal-input{width:9.5rem}

/* 世界筛选 */
.member-filters{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-bottom:.85rem}
.member-filter{
  background:var(--app-surface);border:1px solid var(--app-border-strong);
  border-radius:999px;color:var(--app-text-soft);cursor:pointer;
  font:inherit;font-size:.76rem;padding:.34rem .85rem;transition:all .15s;
}
.member-filter:hover{border-color:var(--app-accent);color:var(--app-accent)}
.member-filter.active{background:var(--app-accent);border-color:transparent;color:var(--app-accent-contrast)}
.member-count{font-size:.72rem;color:var(--app-text-faint);margin-left:.35rem}

/* 空状态 */
.notification-empty{
  background:var(--app-surface);border:1px dashed var(--app-border-strong);
  border-radius:var(--app-radius);color:var(--app-text-faint);
  font-size:.78rem;text-align:center;padding:1.4rem;
}

/* 行内小按钮（编辑/删除） */
.mini-btn{
  background:var(--app-surface-2);border:1px solid var(--app-border);
  border-radius:var(--app-radius-sm);color:var(--app-text-soft);cursor:pointer;
  font:inherit;font-size:.72rem;padding:.34rem .5rem;transition:all .15s;
}
.mini-btn:hover{border-color:var(--app-accent);color:var(--app-accent)}
.mini-btn.danger{color:var(--app-danger);border-color:var(--app-danger)}
.mini-btn.danger:hover{background:var(--app-danger);color:#fff}

/* 复制指令按钮（等宽字体，一级动作） */
.copy-cmd{
  background:var(--app-accent-soft);border:1px solid transparent;
  border-radius:var(--app-radius-sm);color:var(--app-accent-strong);cursor:pointer;
  font-family:var(--app-mono);font-size:.74rem;padding:.45rem .65rem;
  white-space:nowrap;transition:all .15s;
}
.copy-cmd:hover,.copy-cmd:focus-visible{background:var(--app-accent);color:var(--app-accent-contrast)}
/* 主题 C：换成原版 mc-btn 配方（灰渐变 + 黑描边 + inset 高光，hover 紫蓝 + 黄字） */
:root[data-theme='c'] .copy-cmd{
  background:#6e6e6e;background-image:linear-gradient(#7c7c7c,#636363);
  border:2px solid #000;border-radius:2px;color:#fff;text-shadow:2px 2px 0 #3a3a3a;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.32),inset -2px -2px 0 rgba(0,0,0,.42);
}
:root[data-theme='c'] .copy-cmd:hover,:root[data-theme='c'] .copy-cmd:focus-visible{
  background-image:linear-gradient(#8b90cf,#6d72ad);color:#ffffa0;
}

/* ============ ⑦ 编辑弹窗与 toast（z-index 对齐全站：mask=120 / toast=130） ============ */
#editor-mask{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;
  background:rgba(10,12,16,.55);display:flex;align-items:center;justify-content:center;
}
:root[data-theme='c'] #editor-mask{background:rgba(0,0,0,.65)}
#editor-box{
  background:var(--app-surface);border:1px solid var(--app-border);
  border-radius:var(--app-radius);box-shadow:var(--app-shadow);
  color:var(--app-text);padding:1.4rem;width:min(24rem,92vw);max-height:88vh;overflow:auto;
}
#editor-box h3{margin:0 0 .9rem;font-size:1.05rem}
#editor-box label{display:block;font-size:.76rem;color:var(--app-text-soft);margin-bottom:.6rem}
#editor-box label span{display:block;margin-bottom:.25rem}
#editor-box input[type=text],#editor-box input[type=password],#editor-box select,#editor-box input[type=number]{
  width:100%;box-sizing:border-box;background:var(--app-surface-2);
  border:1px solid var(--app-border-strong);border-radius:var(--app-radius-sm);
  color:var(--app-text);font:inherit;font-size:16px;padding:.5rem .6rem;
}
#editor-box input:focus,#editor-box select:focus{border-color:var(--app-accent);outline:none}
#editor-box input[type=checkbox]{height:1.1rem;width:1.1rem;vertical-align:middle;margin-right:.35rem;accent-color:var(--app-accent)}
.editor-row{display:flex;gap:.5rem;margin-top:1rem}
.editor-row button{flex:1}
#toast{
  position:fixed;left:50%;bottom:2rem;transform:translate(-50%,.5rem);z-index:130;
  background:var(--app-text);color:var(--app-bg);font-size:.78rem;
  padding:.6rem 1.1rem;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
#toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ ⑧ ≤720px：侧边栏收成抽屉 ============ */
@media(max-width:720px){
  .app-topbar{
    position:fixed;top:0;left:0;right:0;z-index:40;height:52px;box-sizing:border-box;
    display:flex;align-items:center;gap:.7rem;padding:0 .9rem;
    background:var(--app-sidebar-bg);border-bottom:1px solid var(--app-sidebar-border);
  }
  .app-topbar-title{font-size:.85rem;font-weight:600;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .side-burger{
    flex:none;width:38px;height:34px;display:inline-flex;flex-direction:column;
    align-items:center;justify-content:center;gap:4px;cursor:pointer;
    background:transparent;border:1px solid var(--app-border);border-radius:var(--app-radius-sm);
  }
  .side-burger i{width:16px;height:2px;background:var(--app-text);border-radius:1px;transition:transform .2s,opacity .2s}
  .side-burger.open i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .side-burger.open i:nth-child(2){opacity:0}
  .side-burger.open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .app-sidebar{transform:translateX(-100%);transition:transform .25s ease;z-index:90}
  .app-sidebar.open{transform:none}
  .app-main{margin-left:0;max-width:none;padding:4.4rem 1rem 3.5rem}
  .page-head{flex-direction:column;gap:.9rem}
  .page-head-actions{align-items:flex-start;width:100%}
  .setting-row{justify-content:flex-start}
  .setting-row .portal-input{flex:1;min-width:0;width:auto}
  .portal-status{text-align:left}
  .res-card{flex-direction:column;gap:.6rem}
  .res-card-side{flex-direction:row;align-items:center;justify-content:flex-end;flex-wrap:wrap;width:100%}
  .copy-cmd{white-space:normal}
}