:root{
  --purple:#6f49b8;
  --purple-dark:#55328f;
  --purple-deep:#452778;
  --purple-soft:#f3effa;
  --purple-soft-2:#faf8fd;
  --ink:#2f3440;
  --muted:#7d8491;
  --line:#e2deea;
  --line2:#eeeaf3;
  --panel:#ffffff;
  --bg:#f7f5fa;
  --green:#198866;
  --amber:#a77718;
  --red:#b64f55;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px}
button,input,textarea{font:inherit}
.topbar{
  height:60px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 28px;
}
.brand-wrap{display:flex;align-items:center}
.brand{font-weight:800;font-size:25px;letter-spacing:-.5px;color:var(--purple)}
.brand-line{height:24px;width:1px;background:#d8d2e2;margin:0 14px}
.brand-meta{font-size:11px;line-height:1.25;color:#7d7488;letter-spacing:.6px}
.top-status{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:#766e80}
.live-dot{width:8px;height:8px;border-radius:50%;background:#24a67a;box-shadow:0 0 0 3px #e4f5ef}
.sep{color:#c8c0d1;margin:0 6px}
.mainnav{
  height:42px;background:var(--purple);display:flex;align-items:stretch;padding:0 28px;color:#e9e0f5
}
.mainnav span{display:flex;align-items:center;padding:0 18px;border-left:1px solid rgba(255,255,255,.09)}
.mainnav .active{background:var(--purple-dark);color:#fff;font-weight:600}
.wrap{max-width:1440px;margin:0 auto;padding:18px 24px 30px}
.summary-bar{
  display:grid;grid-template-columns:repeat(6,1fr);background:#fff;border:1px solid var(--line);margin-bottom:14px
}
.summary-bar>div{padding:14px 17px;border-right:1px solid var(--line2)}
.summary-bar>div:last-child{border-right:0}
.summary-bar small{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.summary-bar strong{font-size:23px;color:#4d4557}
.danger-text{color:var(--red)!important}
.panel{background:#fff;border:1px solid var(--line);margin-bottom:14px}
.panel-head{
  height:44px;border-bottom:1px solid var(--line);background:var(--purple-soft-2);
  display:flex;align-items:center;padding:0 15px;font-weight:600;color:#51465f
}
.panel-note{margin-left:auto;font-weight:400;font-size:12px;color:#91889a}
.search-area{
  padding:17px 16px;display:grid;grid-template-columns:85px minmax(260px,440px) 90px auto;gap:10px;align-items:center
}
.search-area label{text-align:right;color:#5f5868}
.search-area input{
  height:36px;border:1px solid #cfc7d8;background:#fff;padding:0 11px;outline:none
}
.search-area input:focus{border-color:#8d70bd;box-shadow:0 0 0 2px rgba(111,73,184,.09)}
.search-area button,.primary-btn{
  border:1px solid var(--purple-dark);background:var(--purple);color:#fff;height:36px;padding:0 18px;cursor:pointer
}
.search-area button:hover,.primary-btn:hover{background:var(--purple-dark)}
#searchHint{font-size:12px;color:#8a8192}
.search-error{margin:0 16px 16px;padding:10px 12px;background:#fff2f2;border:1px solid #efd0d0;color:#a34d53}
.result-grid{
  margin:0 16px 17px;border:1px solid var(--line);display:grid;
  grid-template-columns:150px 150px 150px 1fr 190px
}
.result-grid>div{padding:12px 13px;border-right:1px solid var(--line2);min-height:68px}
.result-grid>div:last-child{border-right:0}
.result-grid small{display:block;color:#8a8192;font-size:11px;margin-bottom:8px}
.result-grid strong,.result-grid span{color:#443b4f}
.message-cell span{white-space:pre-wrap}
.table-scroll{overflow:auto}
table{width:100%;border-collapse:collapse;table-layout:fixed}
th{
  text-align:left;height:38px;padding:0 12px;background:#faf9fc;color:#776e80;
  font-weight:600;font-size:12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line2)
}
td{
  height:46px;padding:0 12px;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4f4858
}
th:last-child,td:last-child{border-right:0}
tbody tr:hover{background:#fbf9fd}
.status{display:inline-flex;align-items:center;gap:7px}
.status:before{content:"";width:7px;height:7px;border-radius:50%;background:#aaa}
.status.ok{color:var(--green)} .status.ok:before{background:#22a27a}
.status.wait{color:var(--amber)} .status.wait:before{background:#d0a13c}
.status.err{color:var(--red)} .status.err:before{background:#ca5a60}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.msg-preview{max-width:680px}
.empty-row{text-align:center;color:#999;height:80px}

.admin-bg{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#f1edf8 0%,#faf8fc 52%,#eee8f6 100%);padding:24px
}
.login-card{
  width:390px;background:#fff;border:1px solid var(--line);padding:30px;
  box-shadow:0 18px 45px rgba(75,48,110,.11)
}
.login-brand{font-size:25px;font-weight:800;color:var(--purple)}
.login-card h1{font-size:18px;margin:7px 0 3px}
.login-card p{margin:0 0 22px;color:#8d8594;font-size:13px}
.login-card label{display:block;margin:12px 0 7px;color:#665d6d;font-size:13px}
.login-card input{
  width:100%;height:38px;border:1px solid #cfc7d8;padding:0 10px;outline:none
}
.login-error{background:#fff2f2;border:1px solid #efd1d1;color:#aa4d55;padding:9px 10px;margin-bottom:10px}
.full{width:100%;margin-top:18px}
.admin-page{background:#f6f4f8}
.admin-top{
  height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px
}
.admin-top>div{display:flex;align-items:center;gap:13px}
.admin-top b{font-size:22px;color:var(--purple)}
.admin-top span{font-size:12px;color:#847b8c}
.admin-top form{margin-left:auto}
.ghost-btn,.mini-btn{
  border:1px solid #d4ccdc;background:#fff;color:#5e5268;padding:6px 10px;cursor:pointer
}
.admin-wrap{max-width:1500px;margin:0 auto;padding:20px}
.admin-summary{background:#fff;border:1px solid var(--line);display:inline-flex;align-items:center;gap:25px;padding:13px 18px;margin-bottom:14px}
.admin-summary span{color:#82798b}
.admin-summary strong{font-size:23px;color:var(--purple)}
.admin-message{background:#f2ecfa;border:1px solid #ddd0ed;color:#62498a;padding:10px 12px;margin-bottom:14px}
.admin-grid{display:grid;grid-template-columns:420px 1fr;gap:14px}
.admin-panel{background:#fff;border:1px solid var(--line)}
.admin-panel-head{
  height:43px;padding:0 14px;display:flex;align-items:center;background:#faf8fc;border-bottom:1px solid var(--line);font-weight:600
}
.admin-panel-head span{margin-left:auto;font-size:11px;font-weight:400;color:#918799}
.admin-panel-body{padding:14px}
.admin-help{font-size:12px;color:#817889}
.admin-panel textarea{
  width:100%;min-height:310px;border:1px solid #d1c9da;resize:vertical;padding:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;outline:none;margin-bottom:10px
}
.security-note{
  margin-top:12px;background:#f8f5fc;border:1px solid #e3d9ef;padding:10px;color:#7d6f89;font-size:12px;line-height:1.6
}
.actions-cell{display:flex;gap:5px;align-items:center}
.actions-cell form{display:inline}
.danger-btn{color:#ab4f55;border-color:#e3c7ca}
@media(max-width:980px){
  .summary-bar{grid-template-columns:repeat(3,1fr)}
  .summary-bar>div:nth-child(3n){border-right:0}
  .search-area{grid-template-columns:1fr}
  .search-area label{text-align:left}
  .result-grid{grid-template-columns:1fr 1fr}
  .admin-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .wrap{padding:12px}
  .summary-bar{grid-template-columns:1fr 1fr}
  .summary-bar>div:nth-child(2n){border-right:0}
  .brand-line,.brand-meta,.top-status{display:none}
  .result-grid{grid-template-columns:1fr}
  .result-grid>div{border-right:0;border-bottom:1px solid var(--line2)}
}

/* v2 layout additions */
html{scroll-behavior:smooth}
.mainnav a{
  display:flex;align-items:center;padding:0 18px;border-left:1px solid rgba(255,255,255,.09);
  color:#e9e0f5;text-decoration:none
}
.mainnav a.active,.mainnav a:hover{background:var(--purple-dark);color:#fff;font-weight:600}
.result-grid-v2{grid-template-columns:150px 150px 160px 190px 190px}
.result-grid-v2 .full-width-cell{grid-column:1/-1;border-top:1px solid var(--line2);border-right:0;min-height:92px}
.full-message,.message-cell span{white-space:pre-wrap!important;word-break:break-word!important;overflow:visible!important;text-overflow:clip!important;line-height:1.6}
.message-table{table-layout:auto}
.message-table th:nth-child(1){min-width:130px}.message-table th:nth-child(2){min-width:120px}.message-table th:nth-child(3){min-width:110px}
.message-table th:nth-child(4){min-width:170px}.message-table th:nth-child(5){min-width:180px}.message-table .message-col{min-width:520px}
.message-table td{height:auto;min-height:46px;padding-top:11px;padding-bottom:11px;white-space:normal;vertical-align:top}
.code-detected{color:#6f49b8;font-weight:600}.muted-text{color:#999}
.pager{display:flex;justify-content:center;align-items:center;gap:14px;padding:12px;border-top:1px solid var(--line2);background:#fbfafd}
.pager button,.pager a,.pager span.disabled{border:1px solid #d6cfdf;background:#fff;color:#5c5266;padding:6px 12px;text-decoration:none;cursor:pointer}
.pager button:disabled,.pager span.disabled{opacity:.45;cursor:not-allowed}
.admin-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.admin-toolbar .admin-summary{margin-bottom:0}
.primary-link{display:inline-flex;align-items:center;height:42px;padding:0 16px;background:var(--purple);border:1px solid var(--purple-dark);color:#fff;text-decoration:none}
.primary-link:hover{background:var(--purple-dark)}
.telegram-state{font-size:12px;padding:8px 10px;border:1px solid var(--line);background:#fff}.telegram-state.on{color:#198866}.telegram-state.off{color:#8a8290}
.admin-grid-v2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.admin-grid-v2 .admin-panel textarea{min-height:210px}
.admin-grid-v2 .delete-box{min-height:210px}
.danger-fill{background:#a94e58!important;border-color:#913f48!important}.danger-fill:hover{background:#913f48!important}
.admin-list-panel{margin-bottom:14px}.admin-search{display:flex;gap:6px;margin-left:auto}.admin-search input{height:30px;border:1px solid #d3cbdc;padding:0 8px;width:180px;outline:none}
.admin-pager{justify-content:flex-end}.telegram-help-panel{margin-bottom:30px}.telegram-help{display:flex;flex-direction:column;gap:8px}.telegram-help code{display:block;background:#f7f4fa;border:1px solid #e6deef;padding:9px 10px;word-break:break-all}.telegram-help p{font-size:12px;color:#817889;margin:3px 0 0}
@media(max-width:980px){.result-grid-v2{grid-template-columns:1fr 1fr}.admin-grid-v2{grid-template-columns:1fr}.message-table .message-col{min-width:360px}}
@media(max-width:620px){.result-grid-v2{grid-template-columns:1fr}.admin-search{width:100%;margin-left:0}.admin-search input{flex:1}}


/* v3 public navigation */
.mainnav a{
  min-width:160px;
  justify-content:center;
  text-decoration:none;
  color:#eee7f7;
  transition:background .12s ease;
}
.mainnav a.active{
  background:var(--purple-dark);
  color:#fff;
  font-weight:700;
}
.mainnav a:hover{
  background:#6240a2;
  color:#fff;
}


/* v4 */
.mainnav a{
  min-width:150px;
}
.message-table .full-message{
  white-space:pre-wrap;
  overflow:visible;
  text-overflow:clip;
  line-height:1.55;
  padding-top:10px;
  padding-bottom:10px;
}


/* v5 COM sequence column */
.com-index{
  font-weight:700;
  color:var(--purple-dark);
  letter-spacing:.2px;
}

/* v6 */
.panel-head .panel-note:empty{display:none;}


/* v7 */
.result-grid-v2{
  grid-template-columns:150px 150px 160px 190px;
}
.result-grid-v2 .full-width-cell{
  grid-column:1 / -1;
  border-top:1px solid var(--line2);
  border-right:0;
}
.message-table th:nth-child(1){width:150px;}
.message-table th:nth-child(2){width:150px;}
.message-table th:nth-child(3){width:150px;}
.message-table th:nth-child(4){width:200px;}
.message-table th:nth-child(5){width:auto;}

.full-message,
.message-cell span{
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.65;
}


/* v8 */
.message-table th:nth-child(1){width:110px;}
.message-table th:nth-child(2){width:150px;}
.message-table th:nth-child(3){width:150px;}
.message-table th:nth-child(4){width:140px;}
.message-table th:nth-child(5){width:200px;}
.message-table th:nth-child(6){width:auto;}


/* Number list: online/offline connection state */
.status.line-online{
  color:#16845f;
  font-weight:600;
}
.status.line-online::before{
  background:#22a276;
}
.status.line-offline{
  color:#b64f55;
  font-weight:600;
}
.status.line-offline::before{
  background:#d15b62;
}