#telegram-notifications-page{max-width:1320px;margin:0 auto;color:var(--text,#ebf3fc)}
#telegram-notifications-page .tg-overview{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 26px;margin-bottom:20px;border:1px solid var(--line,#20364d);border-radius:16px;background:radial-gradient(ellipse at top left,rgba(49,216,205,.09),transparent 65%),var(--panel,#0b1828)}
#telegram-notifications-page .tg-eyebrow{display:block;color:var(--cyan,#31d8cd);font-size:10px;font-weight:750;letter-spacing:2px;margin-bottom:9px}
#telegram-notifications-page .tg-overview h2{font-size:22px;letter-spacing:0;margin:0 0 8px}
#telegram-notifications-page p{font-size:12px;line-height:1.7;color:var(--muted,#8ea4bd);margin:0}
.tg-metrics{display:flex;gap:30px;flex-shrink:0}.tg-metrics>div{display:grid;gap:3px;padding-left:24px;border-left:1px solid var(--line,#20364d)}.tg-metrics strong{font-size:27px;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums}.tg-metrics small{font-size:14px;color:var(--muted,#8ea4bd);font-weight:400}.tg-metrics span{font-size:11px;color:var(--muted,#8ea4bd)}
#telegram-notifications-page .tg-feedback:empty{display:none}#telegram-notifications-page .tg-feedback{margin:0 0 16px;padding:12px 16px;border:1px solid;border-radius:10px}#telegram-notifications-page .tg-ok{color:var(--green,#3cdda0);background:rgba(60,221,160,.07);border-color:rgba(60,221,160,.25)}#telegram-notifications-page .tg-error{color:var(--red,#ff6882);background:rgba(255,104,130,.07);border-color:rgba(255,104,130,.25)}
.tg-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:start}.tg-card{background:var(--panel,#0b1828);border:1px solid var(--line,#20364d);border-radius:16px;min-width:0;overflow:hidden;margin-bottom:20px;padding:22px}
.tg-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.tg-card-head>div{display:flex;align-items:center;gap:10px}.tg-card-head h2{font-size:16px;margin:0;font-weight:650}.tg-step{font-size:11px;color:var(--cyan,#31d8cd);font-variant-numeric:tabular-nums;background:var(--cyan-soft,rgba(49,216,205,.12));border-radius:7px;padding:6px}
.tg-channel-list{display:grid;gap:9px;max-height:260px;overflow:auto;margin-bottom:22px}#telegram-notifications-page .tg-channel{display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:13px 12px;background:var(--panel-soft,#0a1523);border:1px solid var(--line,#20364d);border-radius:10px;color:var(--text,#ebf3fc);font:inherit;box-shadow:none;min-height:66px}
#telegram-notifications-page .tg-channel:hover{border-color:var(--line-strong,#2d4d68)}#telegram-notifications-page .tg-channel[aria-pressed=true]{border-color:var(--cyan,#31d8cd);background:rgba(49,216,205,.06)}.tg-channel-icon{width:33px;height:33px;border-radius:9px;display:grid;place-items:center;background:rgba(104,167,255,.09);color:var(--blue,#68a7ff);font-size:21px;flex-shrink:0}.tg-channel-copy{display:grid;gap:4px;flex:1;min-width:0}.tg-channel-copy strong{font-size:13px;overflow-wrap:anywhere}.tg-channel-copy small{font-size:11px;color:var(--muted,#8ea4bd);overflow-wrap:anywhere}
.tg-pill{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:4px 8px;font-size:10px;white-space:nowrap}.tg-pill::before{content:'';width:5px;height:5px;display:inline-block;border-radius:50%;background:currentColor}.tg-pill.is-on{color:var(--green,#3cdda0);background:rgba(60,221,160,.09)}.tg-pill.is-muted{color:var(--muted,#8ea4bd);background:rgba(142,164,189,.09)}.tg-pill.is-error{color:var(--red,#ff6882);background:rgba(255,104,130,.09)}
.tg-editor-title{border-top:1px solid var(--line,#20364d);padding-top:18px;margin-bottom:15px;display:flex;align-items:center;justify-content:space-between;gap:8px}.tg-editor-title h3{margin:0;font-size:13px}.tg-secure{color:var(--muted,#8ea4bd);font-size:10px}
.tg-card form{display:grid;gap:16px}.tg-card label{display:grid;gap:7px;margin:0;font-weight:500;color:var(--muted,#8ea4bd);font-size:12px}.tg-card label small{font-size:10px;font-weight:400;color:var(--muted,#8ea4bd)}.tg-optional{display:inline;font-size:10px;color:var(--muted,#8ea4bd)}
#telegram-notifications-page input:not([type=checkbox]),#telegram-notifications-page select{width:100%;min-width:0;padding:10px 11px;height:41px;border:1px solid var(--line-strong,#2d4d68);border-radius:8px;box-sizing:border-box;color:var(--text,#ebf3fc);background:var(--panel-soft,#0a1523);font:inherit;font-size:12px;outline:none}
#telegram-notifications-page input::placeholder{color:#637c95}#telegram-notifications-page input:focus-visible,#telegram-notifications-page select:focus-visible,#telegram-notifications-page button:focus-visible{outline:2px solid var(--cyan,#31d8cd);outline-offset:3px}#telegram-notifications-page input:disabled{opacity:.5}.tg-inline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.tg-rule{border:1px solid var(--line,#20364d);border-radius:12px;overflow:hidden;background:var(--panel-soft,#0a1523)}#telegram-notifications-page .tg-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 0;cursor:pointer}.tg-toggle-row>span:first-child{display:grid;gap:5px}.tg-toggle-row strong{font-size:13px;font-weight:600;color:var(--text,#ebf3fc)}.tg-rule .tg-toggle-row{padding:17px!important}.tg-rule-fields{padding:0 17px 17px}.tg-switch{position:relative;flex-shrink:0;width:36px;height:21px}.tg-switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}.tg-switch>span{display:block;width:36px;height:21px;border:1px solid #38516a;border-radius:20px;background:#1d3043;transition:background .15s}.tg-switch>span:after{content:'';position:absolute;left:4px;top:4px;width:13px;height:13px;border-radius:50%;background:#99afc4;transition:transform .15s}.tg-switch input:checked+span{background:var(--cyan,#31d8cd);border-color:var(--cyan,#31d8cd)}.tg-switch input:checked+span:after{background:#063b3b;transform:translateX(15px)}.tg-switch input:focus-visible+span{outline:2px solid var(--cyan,#31d8cd);outline-offset:3px}
.tg-actions{display:flex;align-items:center;gap:10px;padding-top:4px}#telegram-notifications-page .tg-button{border:1px solid var(--line-strong,#2d4d68);border-radius:8px;padding:9px 14px;min-height:36px;color:var(--text,#ebf3fc);background:var(--panel-strong,#0e2034);font:inherit;font-size:12px;font-weight:550;cursor:pointer;box-shadow:none;white-space:nowrap}#telegram-notifications-page .tg-button-primary{background:var(--cyan,#31d8cd);border-color:var(--cyan,#31d8cd);color:#053c3c;font-weight:700}#telegram-notifications-page .tg-button-quiet{background:transparent;border-color:var(--line,#20364d);color:var(--muted,#8ea4bd)}#telegram-notifications-page button:disabled{opacity:.4;cursor:not-allowed;transform:none}#telegram-notifications-page .tg-button:hover:not(:disabled){filter:brightness(1.1)}
#telegram-notifications-page .tg-help{font-size:11px}.tg-next{font-size:11px;color:var(--muted,#8ea4bd);padding:10px 12px;border-left:2px solid var(--line-strong,#2d4d68);background:var(--panel-soft,#0a1523);border-radius:0 7px 7px 0}.tg-preview-wrap{margin-top:20px;padding:16px;border:1px solid var(--line,#20364d);border-radius:10px;background:var(--panel-soft,#0a1523)}.tg-preview-wrap pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:12px;line-height:1.9;margin:0;color:var(--text,#ebf3fc)}
.tg-empty{text-align:center;padding:18px;border:1px dashed var(--line-strong,#2d4d68);border-radius:10px;display:grid;gap:8px}.tg-empty>span{font-size:23px;color:var(--cyan,#31d8cd)}.tg-empty strong{font-size:13px;font-weight:500}
@media(max-width:960px){.tg-overview{align-items:flex-start!important;flex-direction:column}.tg-metrics{width:100%;justify-content:space-between;gap:12px}.tg-metrics>div:first-child{padding-left:0;border:0}.tg-layout{grid-template-columns:1fr 1fr}.tg-card{padding:17px}.tg-inline{grid-template-columns:1fr}}
@media(max-width:700px){#telegram-notifications-page .tg-overview{padding:18px;margin-bottom:14px}.tg-overview h2{font-size:20px!important}.tg-metrics strong{font-size:23px}.tg-metrics>div{padding-left:14px}.tg-metrics span{font-size:10px}.tg-layout{grid-template-columns:1fr;gap:0}.tg-card{border-radius:12px;margin-bottom:14px}.tg-inline{grid-template-columns:1fr 1fr}.tg-actions .tg-button{flex:1}}
@media(max-width:380px){.tg-inline{grid-template-columns:1fr}.tg-secure{font-size:9px}.tg-metrics>div{padding-left:10px}.tg-channel-icon{display:none}}
@media(prefers-reduced-motion:reduce){.tg-switch>span,.tg-switch>span:after{transition:none}}
/* 渠道列表会裁切滚动区域，禁用全局按钮悬停位移并为描边保留空间。 */
#telegram-notifications-page .tg-channel-list{padding:3px;margin-left:-3px;margin-right:-3px}
#telegram-notifications-page .tg-channel:hover,#telegram-notifications-page .tg-channel:active{transform:none}
.tg-token-field{position:relative;display:block}
#telegram-notifications-page .tg-token-field input{padding-right:68px}
#telegram-notifications-page .tg-token-toggle{position:absolute;right:4px;top:4px;min-height:32px;height:32px;padding:4px 10px;border:0;background:transparent;color:var(--cyan,#31d8cd);transform:none}
#telegram-notifications-page .tg-instant{padding:0 17px 17px}

.tg-pair-source{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:12px 16px;border:1px solid var(--line,#20364d);border-radius:10px;background:var(--panel-soft,#0a1523);font-size:12px}.tg-pair-source strong{color:var(--cyan,#31d8cd);font-weight:500}.tg-pair-source span{color:var(--muted,#8ea4bd);overflow-wrap:anywhere}
