/* App layout and domain-specific components. Base controls/cards: Tabler 1.5.1. */
:root{--tblr-font-sans-serif:Inter,"Segoe UI","Microsoft YaHei",sans-serif;--tblr-primary:#4263eb;--tblr-primary-rgb:66,99,235;--blue:#4263eb;--muted:#748197;--border:#e5e9f0;--green:#2b9b75;--navy:#182433}
body{background:#f5f7fa;color:#263449} [hidden]{display:none!important} a{color:var(--blue)}
#workspace{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#182433;color:#c6cfdd;padding:28px 16px 20px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;color:inherit}.brand-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#4263eb;color:white;font-size:22px;font-weight:700}.brand-name{display:flex;flex-direction:column;gap:3px;font-size:20px;font-weight:700}.brand-name small{font-size:10px;font-weight:400;letter-spacing:1.2px;color:#97a7c0}.workspace-label{font-size:10px;letter-spacing:1.5px;color:#75859e;margin:34px 12px 12px}.sidebar #nav{display:grid;gap:6px}.sidebar #nav .btn{border:0;color:#bac7d9;background:transparent;justify-content:flex-start;padding:11px 14px;gap:12px;font-weight:500;border-radius:6px;box-shadow:none}.sidebar #nav .btn.active{background:#2a3a51;color:white}.nav-icon{font-size:18px;width:20px;text-align:center}.sidebar-bottom{margin-top:auto;padding:20px 12px 0;border-top:1px solid #ffffff14;display:grid;gap:7px}.mini-label{font-size:11px;color:#8595ab}.sidebar-bottom strong{color:#e4eaf4;font-size:12px}.sidebar-bottom p{font-size:11px;color:#8595ab}.sidebar-bottom .btn{color:#b7c5d8;border-color:#445166;background:none}
.main-shell{min-width:0;display:flex;flex-direction:column}.topbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--border);background:#fff}.topbar #breadcrumb{font-size:12px;color:#8a97aa}.top-actions{display:flex;gap:18px;align-items:center;font-size:12px;color:#8a97aa}.icon-button.btn{width:32px;height:32px;padding:0;min-height:0;border:0;background:transparent}.avatar{background:#eef1ff;color:#4263eb}main{width:100%;max-width:1680px;padding:26px 28px;margin:0 auto;flex:1}footer{padding:16px 28px;color:#9aa5b6;font-size:11px;display:flex;justify-content:space-between}h1{font-size:23px;font-weight:650;letter-spacing:-.4px}h2{font-size:16px;font-weight:600;margin:0}h3{font-size:15px;font-weight:600;margin:20px 0 14px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.page-heading p{margin:6px 0 0;color:var(--muted);font-size:12px}.heading-actions,.actions,.modal-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}#page-heading:empty{display:none}.subnav{display:flex;gap:8px;margin-bottom:20px}.subnav .btn{border:0;background:transparent;color:var(--muted)}.subnav .selected{color:var(--blue);background:#e9edfc}
.card{border:1px solid var(--border);box-shadow:0 1px 3px #18243304;border-radius:8px}.panel{margin-bottom:20px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:16px 20px}.panel-body{padding:20px}.panel-head h2{margin:0}.btn{font-size:13px;font-weight:500;min-height:36px;border-radius:5px;box-shadow:none;white-space:nowrap}.btn-outline-secondary{border-color:#dce1e9;color:#45546a;background:#fff}.btn:disabled{cursor:not-allowed}.btn-primary{background:#4263eb;border-color:#4263eb}.btn.full{width:100%}.muted,.notes{color:var(--muted)}.small,small,.notes{font-size:12px}.notes{line-height:1.7;margin:12px 0}.error-text{color:#d63939;font-size:13px}.callout,.environment-note{border:1px solid #dbe5f6;border-radius:6px;background:#f3f7fd;padding:12px 16px;margin-bottom:18px;font-size:12px;line-height:1.7;color:#62748e}.callout.warn{background:#fffbf2;border-color:#f5e6c5;color:#9c7839}.service-help{color:#8995a6;font-size:12px;margin:0 0 16px}.service-help summary{cursor:pointer}.service-help p{margin-top:10px;line-height:1.7}
label{display:block;font-size:12px;font-weight:500;color:#65758d;margin-bottom:14px}.form-control,.form-select{margin-top:6px;min-height:38px;font-size:13px;border-color:#dce2eb;border-radius:5px;box-shadow:none;background-color:#fff}.form-control:read-only{background-color:#f6f8fb}.form-control:focus,.form-select:focus{border-color:#91a3ef;box-shadow:0 0 0 3px #4263eb0d}textarea{min-height:80px}select[multiple]{min-height:110px}.check{display:flex;align-items:center;gap:8px;margin:14px 0}.check input{margin:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.span-two{grid-column:1/-1}.filters,.channel-toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:16px}.filters>.form-control,.filters>.form-select{width:auto;min-width:130px;margin:0}.channel-toolbar{margin:0}.channel-toolbar label{flex:1;min-width:220px;max-width:680px;margin:0}.channel-toolbar .btn{height:38px}.channel-toolbar select{margin:0;width:100%;text-overflow:ellipsis}.channel-toolbar label{font-size:0}.channel-toolbar label select{font-size:13px}
.table-responsive{width:100%;overflow:auto}.table{margin:0;font-size:13px}.table thead th{background:#f8fafc;font-size:11px;font-weight:600;color:#77859a;border-bottom:1px solid var(--border);padding:12px 16px;text-transform:none;letter-spacing:0;white-space:nowrap}.table td{padding:13px 16px;border-color:#edf0f5;vertical-align:middle}.table tbody tr:hover{background:#fbfcfe}.table small{display:block;color:#93a0b2;margin-top:4px}.service-name{max-width:340px;min-width:160px;overflow-wrap:anywhere}.money{font-variant-numeric:tabular-nums;white-space:nowrap}.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;background:#f0f3f8;color:#718199;font-size:11px;white-space:nowrap}.badge.blue{background:#edf1ff;color:#4c68d7}.badge.green{background:#e9f7f0;color:#279a70}.badge.amber{background:#fff5df;color:#ae822d}.badge.red{background:#fcecef;color:#cc5364}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 20px;border-bottom:1px solid #edf0f5}.settings-row p{font-size:12px;color:var(--muted);margin:5px 0 0}.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.tool-grid .btn{white-space:normal;min-height:42px}.empty{text-align:center;padding:42px 20px;color:var(--muted)}.empty h3{color:#47566e}.empty p{font-size:13px}
dialog{border:1px solid var(--border);border-radius:10px;width:min(840px,94vw);max-height:90vh;padding:0;box-shadow:0 24px 70px #18243333;color:#263449}dialog::backdrop{background:#18243377;backdrop-filter:blur(2px)}.modal-head{position:sticky;top:0;background:white;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border)}#modal-body{padding:24px}.modal-actions{justify-content:flex-end;border-top:1px solid var(--border);padding-top:18px;margin-top:20px}.modal-actions .btn{min-width:100px}fieldset{border:1px solid var(--border);border-radius:7px;padding:15px 18px;margin-bottom:18px}legend{float:none;width:auto;padding:0 7px;font-size:13px;margin:0}legend label{margin:0}.emoji-options{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.emoji-chip{display:flex;align-items:center;gap:5px;border:1px solid var(--border);padding:6px 9px;border-radius:5px;margin:0}.emoji-chip:has(:checked){background:#edf1ff;border-color:#a8b7ff}.emoji-chip input{margin:0}.rule-row{padding:16px;background:#f8fafc;border:1px solid var(--border);border-radius:6px;margin:12px 0}.rule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:12px}
.monitor-content>h3{margin:26px 0 14px}.monitor-content>.table-responsive,.monitor-content>#post-charts{background:#fff;border-radius:8px}.monitor-content>.actions{background:white;padding:14px 18px;border-top:1px solid var(--border);margin-bottom:26px}.actions label{display:flex;align-items:center;gap:8px;margin:0}.actions .form-select{width:auto;margin:0}.monitor-overview{display:grid;grid-template-columns:minmax(0,2fr) minmax(285px,1fr);gap:20px;margin:16px 0 28px}.trend-card,.leader-card{padding:22px;min-width:0}.trend-card h3,.leader-card h3{margin:0 0 20px;font-size:15px}.trend-toolbar,.trend-dates,.trend-controls,.leader-heading,.leader-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.trend-toolbar{margin-top:12px}.trend-dates{margin-left:auto}.trend-dates .form-control{width:150px;margin:0}.trend-controls{margin-bottom:20px}.trend-controls .form-select{width:auto;max-width:100%;margin:0}.trend-controls #trend-post{flex:1;min-width:0}.trend-caption{display:flex;justify-content:space-between;font-size:12px;color:#60708b}.trend-caption strong{font-size:22px;color:#273954;font-weight:600}.trend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5269f8;margin-right:7px}.trend-svg{width:100%;min-height:230px;display:block;margin:14px 0}.chart-empty{min-height:260px;display:grid;place-items:center;color:#8995a8}.leader-heading{justify-content:space-between}.leader-heading h3{margin:0}.leader-heading .form-select{width:auto;margin:0}.leader-controls{margin:16px 0}.leader-controls .form-select{flex:1;min-width:100px;margin:0}.leader-controls input{width:145px;margin:0}.post-leaders{list-style:none;margin:0;padding:0}.post-leaders li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #edf0f5;font-size:12px}.post-leaders li:last-child{border:0}.rank-number{width:21px;height:21px;display:grid;place-items:center;background:#f0f3f8;color:#6d7890;border-radius:3px;flex-shrink:0}.post-leaders li:nth-child(-n+3) .rank-number{background:#e5f6ec;color:#20a069}.post-leaders a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;color:#31496c}.post-leaders strong{white-space:nowrap;color:#172b48;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}.stat{padding:20px;background:#fff;border:1px solid var(--border);border-radius:8px;position:relative}.stat-label,.stat small{display:block;color:var(--muted);font-size:12px}.stat strong{font-size:24px;display:block;margin:8px 0}.stat-icon{position:absolute;right:20px;color:#8d9abc}.grid-two{display:grid;grid-template-columns:2fr 1fr;gap:20px}.plan-row{display:flex;gap:14px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}.row-content{flex:1}.row-content p{margin:5px 0 0;color:var(--muted);font-size:12px}.channel-symbol{width:36px;height:36px;display:grid;place-items:center;background:#edf1ff;color:#5269f8;border-radius:7px;font-weight:600}.plan-timeline{list-style:none;padding:0;margin:20px 0}.plan-timeline li{display:flex;align-items:center;gap:14px;padding:14px;border-left:2px solid #a3b0f5;border-bottom:1px solid var(--border)}.plan-timeline li>div{flex:1}.plan-timeline small,.candidate small{display:block;color:var(--muted);margin-top:5px}.plan-timeline .skipped{opacity:.5}.candidate{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#f8fafc;padding:12px;border-radius:5px;margin:8px 0}.diagnostic-row{padding:16px 0;border-bottom:1px solid var(--border)}.metric-line{display:flex;justify-content:space-between;gap:14px;margin:14px 0}.progress-track{height:5px;background:#eef1f5;border-radius:5px;overflow:hidden}.progress-fill{height:100%;background:#5269f8}.bar-chart{height:180px;display:flex;gap:14px;align-items:flex-end}.bar-column{flex:1;text-align:center}.bar{background:#7486ed;border-radius:4px 4px 0 0;min-height:2px}.legend{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:10px}
.login-shell{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:white}.login-brand{background:#182433;color:white;padding:48px;display:flex;flex-direction:column;justify-content:space-between}.login-brand h1{font-size:38px;line-height:1.4}.login-brand p{color:#aab9d0;line-height:1.8}.eyebrow{font-size:11px;letter-spacing:2px;color:#718acb}.login-brand>small{color:#7d8ea8}.login-chips{display:flex;gap:10px}.login-chips span{border:1px solid #455268;border-radius:5px;padding:7px 12px;font-size:11px;color:#b5c3d7}.login-card{align-self:center;justify-self:center;width:min(370px,85%)}.login-card h2{font-size:26px;margin:12px 0}.login-card form{margin-top:30px}.login-card .full{margin:8px 0 16px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#182433;color:white;box-shadow:0 6px 24px #18243325;padding:12px 20px;border-radius:7px;z-index:9999;max-width:90vw;font-size:13px}
@media(max-width:1100px){#workspace{grid-template-columns:190px minmax(0,1fr)}main{padding:20px}.monitor-overview{grid-template-columns:1fr}.trend-dates{margin-left:0}.stats{grid-template-columns:repeat(2,1fr)}.grid-two{grid-template-columns:1fr}}
@media(max-width:700px){#workspace{display:block}.sidebar{position:static;height:auto;padding:16px}.sidebar .workspace-label,.sidebar-bottom{display:none}.sidebar #nav{grid-template-columns:repeat(4,1fr);margin-top:16px;gap:3px}.sidebar #nav .btn{padding:9px 3px;font-size:11px;justify-content:center;gap:4px}.nav-icon{display:none}.topbar{height:48px;padding:0 16px}.top-actions #time-label{display:none}main{padding:16px}.form-grid{grid-template-columns:1fr}.span-two{grid-column:auto}.page-heading{align-items:flex-start}.heading-actions{flex-wrap:wrap;justify-content:flex-end}.channel-toolbar label{min-width:100%;max-width:100%}.panel-head,.panel-body{padding:16px}.trend-card,.leader-card{padding:16px}.trend-dates{gap:5px}.trend-dates .form-control{width:130px}.trend-svg{min-height:170px}.plan-row{flex-wrap:wrap}.login-shell{display:block;padding:50px 20px;min-height:100vh}.login-brand{display:none}.login-card{margin:auto;width:100%;max-width:380px}footer{padding:14px 16px}footer span{display:none}.actions{gap:8px}.settings-row{padding:16px;align-items:flex-start}.table td,.table th{padding:10px!important}#modal-body{padding:18px}}

.channel-trend-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.channel-trend-legend span,.channel-trend-legend small{display:block;font-size:11px;color:#748197}.channel-trend-legend strong{display:block;font-size:20px;color:var(--series-color);margin:6px 0}.channel-trend-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--series-color);margin-right:6px}@media(max-width:700px){.channel-trend-legend{grid-template-columns:repeat(2,1fr)}}