/* ============================================================ TeleAgent-Matrix 运营控制台 — Design System Dark control-room base, Telegram-blue accent, status semantics. ============================================================ */ :root { /* surfaces — cool near-black */ --bg: #0a0c10; --bg-grad: radial-gradient(1200px 700px at 78% -8%, rgba(41,163,224,.10), transparent 60%); --panel: #11141b; --panel-2: #161a23; --panel-3: #1c212c; --rail: #0c0e13; --hairline: rgba(255,255,255,.07); --hairline-2:rgba(255,255,255,.04); --inset: rgba(0,0,0,.25); /* text */ --text: #e8ebf2; --text-2: #aab2c2; --muted: #7c8598; --faint: #565e70; /* brand + status */ --accent: #29a3e0; /* Telegram blue */ --accent-2:#5bc2f0; --accent-ink:#06121b; --ok: #34d39e; --warn: #f4b740; --limit: #f08a3c; --down: #8b93a3; --bad: #f56b6b; --info: #7c9cff; --purple: #a98bf0; /* tints */ --ok-bg: rgba(52,211,158,.12); --warn-bg: rgba(244,183,64,.12); --limit-bg:rgba(240,138,60,.12); --bad-bg: rgba(245,107,107,.12); --down-bg: rgba(139,147,163,.12); --accent-bg:rgba(41,163,224,.12); /* geometry */ --r-xs: 5px; --r-sm: 8px; --r-md: 11px; --r-lg: 15px; --r-xl: 20px; --pad: 18px; /* density-controlled */ --gap: 14px; --row: 38px; --fs: 14px; /* base font scale */ --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.6); --shadow-pop: 0 18px 50px -16px rgba(0,0,0,.7); --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* density variants set on */ html[data-density="compact"] { --pad: 13px; --gap: 10px; --row: 32px; } html[data-density="cozy"] { --pad: 22px; --gap: 18px; --row: 42px; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs); color: var(--text); background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv05","ss01"; } ::selection { background: var(--accent-bg); } /* scrollbars */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: #232936; border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: #2e3545; background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } .mono { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: -.01em; } .tnum { font-variant-numeric: tabular-nums; } /* ============================================================ APP SHELL */ .app { display: grid; grid-template-columns: 232px 1fr; height: 100vh; overflow: hidden; } html[data-rail="collapsed"] .app { grid-template-columns: 64px 1fr; } /* ---- sidebar ---- */ .rail { background: var(--rail); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; overflow: hidden; } .rail-brand { display: flex; align-items: center; gap: 11px; padding: 17px 16px 15px; border-bottom: 1px solid var(--hairline); min-height: 60px; } .rail-logo { width: 30px; height: 30px; border-radius: 8px; flex: none; background: linear-gradient(150deg, var(--accent), #1f7fb8); display: grid; place-items: center; color: #fff; box-shadow: 0 4px 14px -4px rgba(41,163,224,.6); position: relative; } .rail-logo svg { width: 17px; height: 17px; } .rail-title { display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; } .rail-title b { font-size: 13.5px; letter-spacing: .2px; white-space: nowrap; } .rail-title span { font-size: 10.5px; color: var(--muted); white-space: nowrap; } html[data-rail="collapsed"] .rail-title { display: none; } .rail-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 16px; } .rail-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--faint); padding: 14px 8px 6px; font-weight: 600; } html[data-rail="collapsed"] .rail-group-label { text-align: center; font-size: 8px; padding: 12px 0 5px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 9px; border-radius: var(--r-sm); color: var(--text-2); cursor: pointer; user-select: none; font-size: 13px; position: relative; margin-bottom: 1px; transition: background .13s, color .13s; white-space: nowrap; } .nav-item:hover { background: rgba(255,255,255,.04); color: var(--text); } .nav-item.active { background: var(--accent-bg); color: #cdeafd; } .nav-item.active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: var(--accent); } .nav-item .ic { width: 17px; height: 17px; flex: none; opacity: .9; } .nav-item .nav-badge { margin-left: auto; font-size: 10.5px; font-family: var(--mono); background: var(--panel-3); color: var(--text-2); padding: 1px 6px; border-radius: 20px; min-width: 18px; text-align: center; } .nav-item .nav-badge.alert { background: var(--bad-bg); color: #ffb4b4; } .nav-item .nav-badge.warn { background: var(--warn-bg); color: #ffd98a; } html[data-rail="collapsed"] .nav-item { justify-content: center; padding: 9px 0; } html[data-rail="collapsed"] .nav-item span.lbl, html[data-rail="collapsed"] .nav-badge { display: none; } .rail-foot { border-top: 1px solid var(--hairline); padding: 11px 12px; display: flex; align-items: center; gap: 10px; } .rail-foot .op-av { width: 30px; height: 30px; border-radius: 8px; flex: none; background: linear-gradient(140deg,#39414f,#262b38); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text); } .rail-foot .op-meta { line-height: 1.2; overflow: hidden; } .rail-foot .op-meta b { font-size: 12.5px; white-space: nowrap; } .rail-foot .op-meta span { font-size: 10.5px; color: var(--muted); white-space: nowrap; } html[data-rail="collapsed"] .rail-foot .op-meta { display: none; } html[data-rail="collapsed"] .rail-foot { justify-content: center; } /* ---- main ---- */ .main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .topbar { height: 60px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(17,20,27,.92), rgba(17,20,27,.7)); backdrop-filter: blur(10px); } .topbar .crumb { display: flex; align-items: center; gap: 9px; min-width: 0; } .topbar .crumb .pg-title { font-size: 16px; font-weight: 650; letter-spacing: .2px; white-space: nowrap; } .topbar .crumb .pg-sub { font-size: 12px; color: var(--muted); border-left: 1px solid var(--hairline); padding-left: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; } .topbar .rail-toggle { width: 32px; height: 32px; border-radius: var(--r-sm); flex: none; border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text-2); display: grid; place-items: center; cursor: pointer; } .topbar .rail-toggle:hover { color: var(--text); border-color: var(--accent); } .topbar .spacer { flex: 1; } .clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .clock b { font-family: var(--mono); font-size: 14px; letter-spacing: .4px; font-variant-numeric: tabular-nums; } .clock span { font-size: 10.5px; color: var(--muted); } .content { flex: 1; overflow-y: auto; padding: 20px; scroll-behavior: smooth; } .content-inner { max-width: 1500px; margin: 0 auto; } /* ============================================================ PRIMITIVES */ .card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow); } .card-pad { padding: var(--pad); } .card-hd { display: flex; align-items: center; gap: 10px; padding: 13px var(--pad); border-bottom: 1px solid var(--hairline); } .card-hd h3 { margin: 0; font-size: 13.5px; font-weight: 620; letter-spacing: .2px; white-space: nowrap; } .card-hd .sub { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .card-hd .hd-r { margin-left: auto; display: flex; align-items: center; gap: 8px; } .grid { display: grid; gap: var(--gap); } /* section title */ .sec-title { display:flex; align-items:center; gap:10px; margin: 4px 2px 12px; } .sec-title h2 { margin:0; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; } .sec-title .line { flex:1; height:1px; background: var(--hairline); } /* status dot */ .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; position: relative; } .dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.limit { background: var(--limit); } .dot.down { background: var(--down); } .dot.bad { background: var(--bad); } .dot.pulse::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid currentColor; opacity:.5; animation: ping 1.8s ease-out infinite; } .dot.ok.pulse { color: var(--ok); } .dot.bad.pulse { color: var(--bad); } .dot.limit.pulse{color:var(--limit);} @keyframes ping { 0%{transform:scale(.6);opacity:.6;} 80%,100%{transform:scale(1.7);opacity:0;} } /* badges / chips */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 560; padding: 2.5px 8px; border-radius: 20px; border: 1px solid transparent; white-space: nowrap; line-height: 1.4; } .badge .dot { width: 6px; height: 6px; } .badge.ok { background: var(--ok-bg); color: #7ff0c8; } .badge.warn { background: var(--warn-bg); color: #ffd98a; } .badge.limit { background: var(--limit-bg); color: #ffc28f; } .badge.down { background: var(--down-bg); color: #c2c9d6; } .badge.bad { background: var(--bad-bg); color: #ffb0b0; } .badge.accent{ background: var(--accent-bg); color: #aadcf7; } .badge.purple{ background: rgba(169,139,240,.13); color: #cbb6f7; } .badge.ghost { background: var(--panel-2); color: var(--text-2); border-color: var(--hairline); } .chip { display:inline-flex; align-items:center; gap:6px; font-size: 11.5px; padding: 4px 10px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text-2); cursor: pointer; user-select: none; transition: all .12s; white-space: nowrap; } .chip:hover { color: var(--text); border-color: var(--faint); } .chip.on { background: var(--accent-bg); border-color: rgba(41,163,224,.4); color: #cdeafd; } /* buttons */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family: var(--font); font-size: 13px; font-weight: 560; padding: 8px 14px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--hairline); background: var(--panel-2); color: var(--text); transition: all .13s; white-space: nowrap; } .btn:hover { border-color: var(--faint); background: var(--panel-3); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #04222f; font-weight: 650; } .btn.primary:hover { background: var(--accent-2); } .btn.danger { background: var(--bad-bg); border-color: rgba(245,107,107,.4); color: #ffb0b0; } .btn.danger:hover { background: rgba(245,107,107,.2); } .btn.sm { padding: 5px 10px; font-size: 12px; } .btn.icon { padding: 7px; width: 32px; } .btn:disabled { opacity: .45; cursor: not-allowed; } /* toggle switch */ .switch { width: 38px; height: 22px; border-radius: 20px; background: var(--panel-3); border: 1px solid var(--hairline); position: relative; cursor: pointer; transition: background .15s; flex: none; } .switch::after { content:""; position:absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: all .15s; } .switch.on { background: var(--accent); border-color: var(--accent); } .switch.on::after { left: 18px; background: #fff; } .switch.danger.on { background: var(--bad); border-color: var(--bad); } /* KPI tile */ .kpi { padding: 15px var(--pad) 16px; position: relative; overflow: hidden; } .kpi .kpi-top { display:flex; align-items:center; gap:8px; margin-bottom: 11px; } .kpi .kpi-top .ic { width: 15px; height: 15px; color: var(--muted); } .kpi .kpi-label { font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; } .kpi .kpi-val { font-family: var(--mono); font-size: 27px; font-weight: 600; letter-spacing: -.5px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .kpi .kpi-val small { font-size: 14px; color: var(--muted); margin-left: 3px; font-weight: 500; } .kpi .kpi-foot { display:flex; align-items:center; gap:6px; margin-top: 9px; font-size: 11.5px; color: var(--muted); white-space: nowrap; } .delta { display:inline-flex; align-items:center; gap:2px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; } .delta.up { color: var(--ok); } .delta.down { color: var(--bad); } .delta.flat { color: var(--muted); } .kpi .spark { position:absolute; right:0; bottom:0; opacity:.85; } /* table */ .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { text-align: left; font-weight: 500; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 9px var(--pad); border-bottom: 1px solid var(--hairline); white-space: nowrap; position: sticky; top: 0; background: var(--panel); z-index: 1; } .tbl td { padding: 10px var(--pad); border-bottom: 1px solid var(--hairline-2); vertical-align: middle; } .tbl tbody tr { transition: background .1s; } .tbl tbody tr:hover { background: rgba(255,255,255,.025); } .tbl tbody tr:last-child td { border-bottom: none; } .tbl .num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; } /* mini progress bar */ .bar { height: 6px; border-radius: 20px; background: var(--panel-3); overflow: hidden; } .bar > i { display:block; height:100%; border-radius: 20px; background: var(--accent); } /* avatar */ .av { border-radius: 8px; display: grid; place-items: center; font-weight: 650; flex: none; color: #fff; font-size: 12px; } /* meter ring uses svg */ /* progress segmented */ .segbar { display:flex; height: 8px; border-radius: 20px; overflow:hidden; background: var(--panel-3); } .segbar > i { height:100%; } /* tooltip-ish kbd */ kbd { font-family: var(--mono); font-size: 10.5px; background: var(--panel-3); border: 1px solid var(--hairline); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; color: var(--text-2); } /* empty state */ .empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding: 48px; color: var(--muted); text-align:center; } .empty .ic { width: 34px; height: 34px; opacity: .4; } /* skeleton */ .sk { background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 6px; } @keyframes shimmer { 0%{background-position: 200% 0;} 100%{background-position: -200% 0;} } .spin { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* entrance — transform-only so content is NEVER hidden if animations are paused */ .fade { animation: fade .28s ease; } @keyframes fade { from { transform: translateY(6px); } to { transform: none; } } .stagger > * { animation: fade .3s ease; } .stagger > *:nth-child(1){animation-delay:.02s} .stagger > *:nth-child(2){animation-delay:.05s} .stagger > *:nth-child(3){animation-delay:.08s} .stagger > *:nth-child(4){animation-delay:.11s} .stagger > *:nth-child(5){animation-delay:.14s} .stagger > *:nth-child(6){animation-delay:.17s} /* generic layout helpers */ .row { display:flex; align-items:center; gap: var(--gap); } .col { display:flex; flex-direction:column; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .mut { color: var(--muted); } .faint { color: var(--faint); } .tar { text-align: right; } .nowrap { white-space: nowrap; } .divider { height:1px; background: var(--hairline); margin: 4px 0; } .vdiv { width:1px; align-self: stretch; background: var(--hairline); } /* tweaks panel */ .tweaks-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 44px; height: 44px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text-2); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-pop); } .tweaks-fab:hover { color: var(--text); border-color: var(--accent); } .tweaks-panel { position: fixed; right: 18px; bottom: 72px; z-index: 61; width: 290px; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; } .tweaks-panel .tw-hd { display:flex; align-items:center; padding: 12px 14px; border-bottom: 1px solid var(--hairline); } .tweaks-panel .tw-hd b { font-size: 13px; } .tweaks-body { padding: 6px 14px 14px; } .tw-row { padding: 11px 0; border-bottom: 1px solid var(--hairline-2); } .tw-row:last-child { border-bottom: none; } .tw-row .tw-label { font-size: 12px; color: var(--text-2); margin-bottom: 9px; display:flex; justify-content: space-between; } .tw-swatches { display:flex; gap: 8px; } .tw-sw { width: 26px; height: 26px; border-radius: 7px; cursor: pointer; border: 2px solid transparent; position: relative; } .tw-sw.on { border-color: var(--text); } .tw-seg { display:flex; background: var(--panel-2); border:1px solid var(--hairline); border-radius: var(--r-sm); padding: 2px; } .tw-seg button { flex:1; border:none; background:transparent; color: var(--muted); font-family: var(--font); font-size: 12px; padding: 6px; border-radius: 6px; cursor:pointer; } .tw-seg button.on { background: var(--panel-3); color: var(--text); } /* funnel */ .funnel-row { display:flex; align-items:center; gap: 14px; padding: 7px 0; } .funnel-bar { height: 34px; border-radius: var(--r-sm); display:flex; align-items:center; padding: 0 12px; color: #fff; font-family: var(--mono); font-weight: 600; font-size: 13px; min-width: 64px; transition: width .5s cubic-bezier(.2,.8,.2,1); } /* heat cells */ .heat { width: 100%; aspect-ratio: 1; border-radius: 4px; } /* account matrix tile */ .acct-tile { background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 12px; cursor: pointer; transition: all .13s; position: relative; overflow: hidden; } .acct-tile:hover { border-color: var(--faint); transform: translateY(-1px); } .acct-tile.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .acct-tile .strip { position:absolute; left:0; top:0; bottom:0; width: 3px; } /* chat */ .chat-msg { display:flex; gap: 9px; margin-bottom: 14px; max-width: 78%; } .chat-msg.out { margin-left: auto; flex-direction: row-reverse; } /* pre-wrap: Telegram messages are full of meaningful newlines that used to collapse into one run-on line; break rules keep long URLs from overflowing. */ .bubble { padding: 9px 12px; border-radius: 13px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .chat-msg.in .bubble { background: var(--panel-3); border-top-left-radius: 4px; } .chat-msg.out .bubble { background: linear-gradient(160deg,#1f7fb8,#176394); color: #eaf6ff; border-top-right-radius: 4px; } /* rendered Telegram-markdown inside bubbles (renderTgText) */ .bubble a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .chat-msg.out .bubble a { color: #cfeaff; } .bubble code, .bubble .tg-pre { font-family: var(--mono); font-size: 12px; background: rgba(0,0,0,.28); padding: 1px 5px; border-radius: 5px; } .bubble .tg-pre { display: block; padding: 7px 9px; margin: 4px 0; overflow-x: auto; } .bubble .tg-spoiler { background: currentColor; border-radius: 4px; cursor: pointer; transition: opacity .15s; } .bubble .tg-spoiler:hover { background: transparent; } .chat-msg .meta { font-size: 10.5px; color: var(--faint); margin-top: 4px; } .chat-msg.out .meta { text-align: right; } /* toast */ .toast-wrap { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 80; display:flex; flex-direction:column; gap:8px; align-items:center; } .toast { background: var(--panel-3); border:1px solid var(--hairline); border-radius: var(--r-md); padding: 10px 16px; font-size: 13px; box-shadow: var(--shadow-pop); animation: fade .2s ease; display:flex; align-items:center; gap:9px; } /* banner (global pause etc) */ .banner { display:flex; align-items:center; gap:11px; padding: 10px 16px; border-radius: var(--r-md); font-size: 13px; } .banner.bad { background: var(--bad-bg); border: 1px solid rgba(245,107,107,.3); color: #ffc4c4; } .banner.warn { background: var(--warn-bg); border: 1px solid rgba(244,183,64,.3); color: #ffe1a6; } /* form controls */ .ta-select, .ta-input { width: 100%; background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--r-sm); color: var(--text); font-family: var(--font); font-size: 13px; padding: 9px 11px; outline: none; resize: vertical; } .ta-select:focus, .ta-input:focus { border-color: var(--accent); } .ta-select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8598' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; } .ta-select option { background: var(--panel); color: var(--text); } /* ============================================================ ACCESSIBILITY Keyboard focus ring for all interactive elements (custom & native). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .btn:focus-visible, .chip:focus-visible, .nav-item:focus-visible, .acct-tile:focus-visible, .switch:focus-visible, .tweaks-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } .nav-item:focus-visible { outline-offset: -2px; } /* hide ring for mouse users (focus-visible already handles this); ensure no default */ :focus:not(:focus-visible) { outline: none; }