/* 神之領域後台:Discord 風深色版面。顏色一律用下面的變數。 */
:root{
  --bg-deep:#1e1f22;--bg-side:#2b2d31;--bg-main:#313338;--bg-hover:#35373c;--bg-active:#404249;
  --text:#dbdee1;--text-muted:#949ba4;--text-strong:#f2f3f5;
  --blurple:#5865f2;--blurple-hover:#4752c4;--link:#00a8fc;
  --green:#23a55a;--yellow:#f0b232;--red:#f23f43;--red-strong:#c42b30;--orange:#e67e22;
  --border:#3f4147;
  --font:"gg sans","Noto Sans TC","Microsoft JhengHei","PingFang TC",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:15px/1.5 var(--font);background:var(--bg-main);color:var(--text);display:flex}
a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
h1,h2,h3{color:var(--text-strong);margin:0}
h2{font-size:17px;margin:20px 0 10px}h3{font-size:15px;margin:12px 0 6px}
.ic{width:20px;height:20px;flex:0 0 20px;vertical-align:middle}
.muted{color:var(--text-muted)}.small{font-size:13px}
pre{white-space:pre-wrap;word-break:break-word;margin:0;font:13px ui-monospace,Consolas,monospace}

/* ---- 側邊欄 ---- */
.side{width:240px;flex:0 0 240px;background:var(--bg-side);display:flex;flex-direction:column;height:100vh;position:sticky;top:0}
.guild{display:flex;gap:10px;align-items:center;padding:14px 14px 10px;border-bottom:1px solid var(--bg-deep);color:var(--text-strong)}
.guild-icon{width:32px;height:32px;border-radius:50%;flex:0 0 32px;background:var(--blurple);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700}
.game{padding:10px 14px 4px}
.menu{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px}
.menu a{position:relative;display:flex;gap:10px;align-items:center;padding:7px 10px;border-radius:4px;color:var(--text-muted)}
.menu a:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
.menu a.on{background:var(--bg-active);color:var(--text-strong)}
.menu a.on::before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--text-strong)}
.menu .badge{margin-left:auto}
.me{display:flex;gap:8px;align-items:center;padding:8px 10px;background:#232428;margin:0}
.me-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-strong);font-size:14px}
.icon-btn{background:transparent;border:0;color:var(--text-muted);padding:6px;border-radius:4px;cursor:pointer;display:inline-flex}
.icon-btn:hover{background:var(--bg-hover);color:var(--text)}
.icon-btn.danger:hover{color:var(--red)}
.nav-toggle,.hamburger,.nav-shade{display:none}

/* ---- 主內容 ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.top{display:flex;gap:12px;align-items:center;min-height:48px;padding:8px 16px;border-bottom:1px solid var(--bg-deep);box-shadow:0 1px 0 rgba(0,0,0,.2);position:sticky;top:0;background:var(--bg-main);z-index:5}
.top h1{font-size:16px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.top-actions form{margin:0}
.content{padding:16px;max-width:1280px;width:100%}
.main.wide .content{padding:0;max-width:none;flex:1;display:flex;flex-direction:column;min-height:0}
.main.wide .flash{margin:8px 16px}

/* ---- 共用元件 ---- */
.card{background:var(--bg-side);border-radius:8px;padding:14px 16px;margin-bottom:14px}
.card-title{display:flex;gap:8px;align-items:center;font-size:15px;margin:0 0 10px}
.card-title .ic{color:var(--text-muted)}
.card-title>a,.card-title>.extra{margin-left:auto;font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.kpi{background:var(--bg-side);border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;color:var(--text)}
a.kpi:hover{background:var(--bg-hover);text-decoration:none}
.kpi .label{color:var(--text-muted);font-size:13px;display:flex;gap:6px;align-items:center}
.kpi .value{font-size:28px;font-weight:700;color:var(--text-strong);display:flex;gap:8px;align-items:center}
.kpi .sub{color:var(--text-muted);font-size:13px}
.pill{display:inline-flex;gap:6px;align-items:center;padding:2px 10px;border-radius:999px;background:var(--bg-deep);font-size:13px;color:var(--text);white-space:nowrap}
.pill .dot,.dot{width:8px;height:8px;border-radius:50%;background:var(--text-muted);display:inline-block;flex:0 0 8px}
.pill.green .dot,.dot.green{background:var(--green)}.pill.yellow .dot,.dot.yellow{background:var(--yellow)}
.pill.red .dot,.dot.red{background:var(--red)}.pill.blurple .dot{background:var(--blurple)}
.big-dot{width:12px;height:12px;flex-basis:12px}
.badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--red-strong);color:#fff;font-size:12px;font-weight:700;text-align:center;line-height:18px}
.unread-dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:0 0 8px}
.tag{display:inline-flex;gap:3px;align-items:center;padding:0 8px;border-radius:4px;font-size:12px;line-height:20px;margin:1px 2px;background:var(--bg-deep);color:var(--text)}
.tag.t0{background:#3b3f8f;color:#e3e5ff}.tag.t1{background:#1f5c3a;color:#d4f5e1}.tag.t2{background:#6b4f12;color:#ffefc7}.tag.t3{background:#6e2427;color:#ffdcdd}
.tag.t4{background:#4b2d73;color:#eedcff}.tag.t5{background:#1d5466;color:#d3f2fc}.tag.t6{background:#6a3b14;color:#ffe2c9}.tag.t7{background:#3d4a1c;color:#ebf5cf}
.tag.st-open{background:#5c4410;color:#ffe8b0}.tag.st-close{background:var(--bg-active);color:var(--text-muted)}.tag.st-new{background:#3b3f8f;color:#e3e5ff}
.tag.k-warn{background:#6b4f12;color:#ffefc7}.tag.k-timeout{background:#6a3b14;color:#ffe2c9}.tag.k-ban{background:#6e2427;color:#ffdcdd}
.tag.k-dash{background:#3b3f8f;color:#e3e5ff}.tag.k-auto{background:#4b2d73;color:#eedcff}.tag.k-ok{background:#1f5c3a;color:#d4f5e1}
.bar{display:block;width:100%;height:6px}.bar-bg{fill:var(--bg-deep)}
.bar-fg{fill:var(--blurple)}.bar-fg.green{fill:var(--green)}.bar-fg.yellow{fill:var(--yellow)}.bar-fg.red{fill:var(--red)}.bar-fg.gray{fill:var(--text-muted)}
.stat-row{display:grid;grid-template-columns:110px 1fr 40px;gap:10px;align-items:center;padding:4px 0;color:var(--text)}
a.stat-row:hover{text-decoration:none;background:var(--bg-hover);border-radius:4px}
.stat-row .n{text-align:right;color:var(--text-strong)}
.chart{width:100%;height:auto;display:block}.chart .col{fill:var(--blurple)}.chart .axis{fill:var(--text-muted);font-size:11px}.chart .num{fill:var(--text-strong);font-size:11px}

/* 表單 */
label{display:block;margin:10px 0 4px;font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em}
input[type=text],input[type=number],input[type=date],input[type=datetime-local],input[type=search],select,textarea{width:100%;padding:8px 10px;border:0;border-radius:4px;background:var(--bg-deep);color:var(--text);font:inherit}
input::placeholder,textarea::placeholder{color:#6d6f78}
textarea{min-height:90px;resize:vertical}
textarea.mono{font:13px ui-monospace,Consolas,monospace}
.hint{color:var(--text-muted);font-size:13px;margin:4px 0}
.inline{display:flex;flex-wrap:wrap;gap:10px;align-items:end}.inline>*{flex:1 1 160px}.inline>button,.inline>.btn{flex:0 0 auto}
.check{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text);margin:6px 0}
.check input{width:16px;height:16px;accent-color:var(--blurple)}
button,.btn{display:inline-flex;gap:6px;align-items:center;justify-content:center;padding:7px 16px;border:0;border-radius:4px;background:var(--blurple);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
button:hover,.btn:hover{background:var(--blurple-hover);text-decoration:none}
button.ghost,.btn.ghost{background:var(--bg-active);color:var(--text)}button.ghost:hover,.btn.ghost:hover{background:#4e5058}
button.danger,.btn.danger{background:var(--red-strong)}button.danger:hover{background:#a12828}
button.sm,.btn.sm{padding:4px 10px;font-size:13px}
button.on{background:var(--blurple);color:#fff;box-shadow:inset 0 0 0 2px var(--text-strong)}
.row-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}.row-form input,.row-form select{width:auto;min-width:100px;padding:5px 8px}
.flash{padding:10px 12px;border-radius:4px;margin:0 0 12px;white-space:pre-line}
.flash.ok{background:#1f3d2c;color:#c9f5d8;border-left:4px solid var(--green)}.flash.err{background:#47202a;color:#ffd6da;border-left:4px solid var(--red)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.toolbar form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0}
.toolbar select,.toolbar input{width:auto;min-width:120px;padding:6px 10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 12px;border-radius:999px;background:var(--bg-side);color:var(--text);font-size:13px}
.chip:hover{background:var(--bg-hover);text-decoration:none}.chip.on{background:var(--blurple);color:#fff}
.pager{display:flex;gap:12px;align-items:center;margin:10px 0;color:var(--text-muted);font-size:13px}
details.drop>summary{list-style:none;cursor:pointer}details.drop>summary::-webkit-details-marker{display:none}
details.drop[open]>summary{margin-bottom:10px}

/* 表格(刊登、角色、公告紀錄) */
.scroll{overflow-x:auto;border-radius:8px;background:var(--bg-side)}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}
th{color:var(--text-muted);font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap}
tr:last-child td{border-bottom:0}tbody tr:hover{background:var(--bg-hover)}

/* 清單列(看板卡片、收件匣、管理紀錄) */
.rows{display:flex;flex-direction:column;gap:6px}
.row{position:relative;display:flex;gap:12px;align-items:flex-start;background:var(--bg-side);border-radius:8px;padding:10px 14px}
.row:hover{background:var(--bg-hover)}
.row .grow{flex:1;min-width:0}
.row .title{font-weight:700;color:var(--text-strong)}
.row a.stretch::after{content:"";position:absolute;inset:0}
.row .above{position:relative;z-index:1}
.row .meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;color:var(--text-muted);font-size:13px;margin-top:4px}
.row .pick{margin-top:3px}
.bulkbar{position:sticky;bottom:0;z-index:4;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--bg-deep);border-radius:8px;padding:10px 14px;margin-top:10px;box-shadow:0 -2px 10px rgba(0,0,0,.3)}
.bulkbar select{width:auto}
[hidden]{display:none!important} /* 腳本用 hidden 收起的元素,不能被上面的 display 蓋掉 */
.avatar{width:40px;height:40px;border-radius:50%;flex:0 0 40px;background:var(--bg-active);object-fit:cover}
.avatar.sm{width:28px;height:28px;flex-basis:28px}.avatar.xs{width:20px;height:20px;flex-basis:20px}
.avatar.letter{display:inline-flex;align-items:center;justify-content:center;color:var(--text-strong);font-weight:700;background:var(--blurple)}
.who{display:inline-flex;gap:6px;align-items:center}

/* ---- 雙欄(收件匣、頻道)---- */
.split{display:flex;flex:1;min-height:0;width:100%}
.split-list{width:320px;flex:0 0 320px;background:var(--bg-side);overflow-y:auto;height:calc(100vh - 48px);position:sticky;top:48px;padding:8px}
.split-detail{flex:1;min-width:0;display:flex;flex-direction:column;height:calc(100vh - 48px)}
.split-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-muted);padding:20px;text-align:center}
.list-item{display:flex;gap:10px;align-items:center;padding:8px;border-radius:4px;color:var(--text-muted)}
.list-item:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
.list-item.on{background:var(--bg-active);color:var(--text-strong)}
.list-item .grow{flex:1;min-width:0}
.list-item .name{display:flex;gap:6px;justify-content:space-between;color:var(--text-strong);font-weight:600}
.list-item .preview{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-group{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--text-muted);padding:14px 8px 4px}
.list-item.thread{padding-left:28px;font-size:14px}
.detail-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--bg-deep)}
.detail-head .grow{flex:1;min-width:0}
.detail-head form{margin:0}
.back-link{display:none}

/* 訊息流:column-reverse 讓畫面一開就停在最下面(不用 JS) */
.stream{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column-reverse}
.stream-inner{padding:8px 0 16px}
.older{display:flex;justify-content:center;padding:10px}
.msgs{display:flex;flex-direction:column}
.msg{position:relative;display:flex;gap:14px;padding:4px 16px;margin-top:14px}
.msg.cont{margin-top:0;padding-top:1px;padding-bottom:1px}
.msg.cont .avatar{visibility:hidden;height:0}
.msg:hover,.msg:focus-within{background:#2e3035}
.msg:target{background:rgba(88,101,242,.16)}
.msg-body{flex:1;min-width:0}
.msg-head{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.msg-head b{color:var(--text-strong)}
.bot-tag{background:var(--blurple);color:#fff;font-size:10px;font-weight:700;padding:0 4px;border-radius:3px;line-height:15px}
.msg-text{word-break:break-word;color:var(--text)}
.mention{background:rgba(88,101,242,.3);color:#c9cdfb;border-radius:3px;padding:0 2px}
.quote{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--text-muted);margin:0 0 2px;padding-left:18px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quote::before{content:"";position:absolute;left:4px;top:8px;width:12px;height:8px;border-left:2px solid #4e5058;border-top:2px solid #4e5058;border-top-left-radius:6px}
.atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.thumb{max-width:min(400px,100%);max-height:300px;border-radius:8px;display:block}
.att.file{display:inline-flex;gap:6px;padding:8px 12px;background:var(--bg-side);border:1px solid var(--bg-deep);border-radius:8px}
.embed{border-left:4px solid var(--blurple);background:var(--bg-side);padding:8px 12px;margin-top:6px;border-radius:4px;font-size:14px;max-width:520px}
.msg-actions{position:absolute;right:16px;top:-14px;display:none;gap:2px;background:var(--bg-main);border:1px solid var(--bg-deep);border-radius:6px;padding:2px;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.msg:hover .msg-actions,.msg:focus-within .msg-actions{display:flex}
.msg-actions form{margin:0}
.msg-actions .icon-btn{padding:4px}
.failed{color:#ff9ea2;font-size:13px}

/* 底部輸入框 */
.composer{padding:0 16px 16px;margin:0}
.composer .reply-bar{display:flex;gap:8px;align-items:center;background:var(--bg-side);border-radius:8px 8px 0 0;padding:6px 12px;font-size:13px;color:var(--text-muted)}
.composer .opts{display:flex;flex-wrap:wrap;gap:4px 14px;padding:4px 2px}
.composer .opts .check{margin:2px 0;font-size:13px;color:var(--text-muted)}
.composer .box{display:flex;gap:8px;align-items:flex-end;background:var(--bg-hover);border-radius:8px;padding:6px 6px 6px 12px}
.composer textarea{background:transparent;min-height:44px;max-height:40vh;padding:8px 0}
.composer .box button{flex:0 0 auto}

/* 設定頁:左側目錄 */
.with-toc{display:flex;gap:20px;align-items:flex-start}
.toc{position:sticky;top:64px;width:190px;flex:0 0 190px;display:flex;flex-direction:column;gap:2px}
.toc a{padding:5px 10px;border-radius:4px;color:var(--text-muted);font-size:14px}
.toc a:hover{background:var(--bg-hover);color:var(--text);text-decoration:none}
.toc-body{flex:1;min-width:0}
.save-bar{position:sticky;bottom:0;background:var(--bg-deep);border-radius:8px;padding:10px 14px;display:flex;gap:10px;align-items:center;z-index:3}
.preview-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
.preview-box{background:var(--bg-main);border-radius:8px;padding:6px 0;border:1px solid var(--bg-deep)}

/* 登入頁 */
body.bare{background:var(--bg-deep);justify-content:center}
.center{width:100%;max-width:440px;margin:auto;padding:24px 16px}
.login{background:var(--bg-main);border-radius:8px;padding:32px 28px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.login .guild-icon{width:64px;height:64px;font-size:28px;margin:0 auto 14px}
.login h1{font-size:22px;margin-bottom:6px}
.login .btn{width:100%;padding:12px;font-size:16px;margin-top:18px}
.login .ic.logo{width:24px;height:24px;flex-basis:24px}

/* ---- 手機(< 768px):側邊欄收成漢堡選單、雙欄變單欄 ---- */
@media (max-width:767px){
  body{display:block}
  .hamburger{display:inline-flex;cursor:pointer;color:var(--text);padding:4px}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:20;transform:translateX(-100%);transition:transform .15s}
  .nav-toggle:checked~.side{transform:none}
  .nav-toggle:checked~.nav-shade{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:15}
  .nav-toggle:focus-visible~.main .hamburger{outline:2px solid var(--link)}
  .content{padding:12px}
  .split-list{width:100%;flex-basis:auto;height:auto;position:static}
  .split.has-detail .split-list{display:none}
  .split:not(.has-detail) .split-detail{display:none}
  .split-detail{height:calc(100vh - 48px)}
  .back-link{display:inline-flex}
  .with-toc{display:block}.toc{display:none}
  .preview-col{grid-template-columns:1fr}
  .stat-row{grid-template-columns:90px 1fr 32px}
  .hide-sm{display:none}
  th,td{padding:6px}
}