@layer foundation, specialized, workspaces, unified; @layer foundation{ /* kedu-ui-v4 · main dashboard stylesheet Order: foundation → specialized components → workspaces → unified responsive system. */ /* ===== Foundation, layout and reusable components ===== */ /* ============ 刻度 Scale · 设计系统 ============ */ *{box-sizing:border-box;margin:0;padding:0} :root{ --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace; } html,body{height:100%;max-width:100%;overflow-x:hidden} body{font-family:var(--font-sans);font-size:14px;line-height:1.5} .mono{font-family:var(--font-mono);font-feature-settings:"tnum"} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} .muted{color:var(--ink-3)} .tiny{font-size:11px} b,strong{font-weight:650} a{color:var(--brand-ink);text-decoration:none} a:hover{text-decoration:underline} /* ---------- 布局骨架 ---------- */ .app{display:flex;min-height:100vh} .sidebar{position:sticky;top:0;display:flex;flex-direction:column;gap:4px;z-index:20} .sb-brand{display:flex;align-items:center} .sb-brand .brandMark{overflow:hidden;flex:0 0 34px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2))} .sb-brand .bmImg{width:100%;height:100%;object-fit:cover} .sb-brand b{display:block} .sb-nav{display:flex;flex-direction:column} .sb-nav button{display:flex;align-items:center;gap:11px;width:100%;font-family:inherit;cursor:pointer;text-align:left;transition:.12s;position:relative} .sb-nav button svg{flex:0 0 18px} .sb-nav button.active::before{content:"";position:absolute} .sb-foot{display:flex;align-items:center;gap:7px;font-size:11.5px} .sb-ver{margin-left:auto;font-family:var(--font-mono);opacity:.7} .liveDot{width:7px;height:7px;border-radius:50%;background:var(--go);box-shadow:0 0 0 3px var(--go-soft)} .main{flex:1;display:flex;flex-direction:column} .topbar{position:sticky;z-index:15} .topInner{display:flex;align-items:center} .topTitle{min-width:0} .topActions{margin-left:auto;display:flex;align-items:center;min-width:0} /* ---------- 段落容器 / 卡片 ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1)} .section>.card,.card+.card{margin-top:14px} .head{display:flex;gap:12px} .head .toolbar{margin-left:auto} .head .muted{font-weight:450} .grid{display:grid} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .cols{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start} .row{display:flex;gap:12px} .row>*{flex:1} .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .hr{border:0;border-top:1px solid var(--line);margin:14px 0} .rightSticky{position:sticky;top:80px} .subline{font-size:12px;color:var(--ink-3);margin-top:2px} .copyName{cursor:pointer}.copyName:hover{text-decoration:underline dotted;text-underline-offset:2px} .ccpaWrap{margin:14px 0 4px;padding-top:13px;border-top:1px solid var(--line)}.ccpaHd{font-size:12px;color:var(--ink-3);font-weight:600;margin-bottom:9px}.ccRow{display:flex;align-items:center;gap:12px;margin-bottom:8px}.ccRow .ccCode{flex:0 0 84px;font-size:13px;font-weight:600}.cgWrap{display:flex;flex-direction:column;gap:10px;margin:10px 0}.cgRow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:10px;border:1px solid var(--line2,#eee);border-radius:10px;background:var(--card2,rgba(255,255,255,.02))}.cgCell{display:flex;flex-direction:column;gap:4px}.cgCell label{font-size:11px;color:var(--muted,#8a94a6)}.cgCell input[type=text],.cgCell input[type=number]{padding:7px 9px;border:1px solid var(--line,#333);border-radius:8px;background:var(--bg,#111);color:inherit;font-size:13px;font-variant-numeric:tabular-nums}.cgCellName{flex:1 1 130px}.cgCellCC{flex:2 1 220px}.cgCellCpa{flex:0 1 120px}.cgCellEn{flex:0 0 auto}.cgSw{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;user-select:none}.cgDel{align-self:flex-end;margin-bottom:1px}.cgActions{display:flex;gap:10px;margin-top:6px}.cgQuick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 10px}.ccRow input{flex:1} .anaScroll{max-height:70vh;overflow:auto}.anaScroll thead th{position:sticky;top:0;background:var(--surface);z-index:3} .desc{font-size:12.5px;color:var(--ink-2);line-height:1.45} .empty{text-align:center;font-size:13px} .hint{font-size:12px;color:var(--ink-3);line-height:1.5} .fieldHelp{font-size:11.5px;margin-top:5px} /* ---------- 按钮 ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:inherit;cursor:pointer;white-space:nowrap;line-height:1} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.primary:hover{border-color:var(--brand-2)} .btn.danger:hover{background:var(--stop-soft)} .btn.block{display:flex} .iconbtn{display:inline-grid;place-items:center;cursor:pointer;transition:.12s} .iconbtn svg{width:17px;height:17px} .lkbtn{border:0;background:transparent;color:var(--ink-2);font-size:12.5px;font-family:inherit;cursor:pointer;padding:5px 8px;border-radius:6px;transition:.12s} .lkbtn:hover{background:var(--surface-2);color:var(--ink)} .lkbtn.danger{color:var(--stop)} .lkbtn.danger:hover{background:var(--stop-soft)} /* 顶栏周期切换 seg */ .seg{display:inline-flex;gap:2px} .seg button{border:0;background:transparent;font-family:inherit;cursor:pointer;transition:.12s} .segBtn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font-size:12.5px;font-weight:550;font-family:inherit;padding:6px 12px;border-radius:7px;cursor:pointer} .segBtn:hover{background:var(--surface-2);color:var(--ink)} .segBtn.on{border-color:var(--brand);color:#fff} /* ---------- 输入 ---------- */ .field{display:flex;flex-direction:column;margin-bottom:12px} .fxGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:13px 14px;margin-bottom:16px} .fxGrid .field{margin-bottom:0} .fxAccountGrid{grid-template-columns:repeat(auto-fit,minmax(238px,1fr));margin-top:16px;margin-bottom:0} .fxAccount{display:grid;gap:10px;min-height:132px;padding:15px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,var(--surface),var(--surface-2))} .fxAccount.ok{border-color:color-mix(in srgb,var(--go) 26%,var(--line))} .fxAccount.blocked{border-color:color-mix(in srgb,var(--watch) 34%,var(--line));background:linear-gradient(145deg,var(--surface),var(--watch-soft))} .fxAccount>div:first-child{display:flex;min-width:0;flex-direction:column;gap:3px} .fxAccount>div:first-child b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px} .fxAccount>div:first-child small{overflow:hidden;text-overflow:ellipsis;color:var(--ink-3)} .fxAccountRate{font-size:17px;font-weight:680;letter-spacing:-.015em;color:var(--ink)} .fxAccount.blocked .fxAccountRate{font-size:14px;color:var(--watch)} .fxAccountMeta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink-3);font-size:11.5px} .field label{font-size:12.5px;font-weight:550;color:var(--ink-2)} input,select,textarea{width:100%;padding:0 12px;font-size:13.5px;font-family:inherit;transition:.12s;outline:none} textarea{height:auto;line-height:1.5} select{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='%2398a1b2' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px} input[type=file]{height:auto;font-size:12.5px} /* ---------- 表格 ---------- */ .tableWrap{overflow-x:auto} .table{width:100%;border-collapse:collapse} .table thead th{text-align:left;font-size:11.5px;white-space:nowrap} .table th.num,.table td.num{text-align:right} .table tbody td{vertical-align:middle} .table tbody tr:last-child td{border-bottom:0} .table tbody tr{transition:background .1s} .table .name{color:var(--ink)} .table tr.clk{cursor:pointer} .table tr.clk:hover{background:var(--surface-2)} .table tr.drill td{padding:9px 14px} .respCard{min-width:520px} /* ---------- chip / pill / badge ---------- */ .chip{display:inline-flex;align-items:center;gap:6px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent} .chip .d{width:6px;height:6px;border-radius:50%;background:currentColor} .chip.go{color:var(--go);background:var(--go-soft);border-color:var(--go-line)} .chip.stop{color:var(--stop);background:var(--stop-soft);border-color:var(--stop-line)} .chip.watch,.chip.alert{color:var(--watch);background:var(--watch-soft);border-color:var(--watch-line)} .chip.idle,.chip.gray{color:var(--ink-3);background:var(--surface-3);border-color:transparent} .chip.info{color:var(--info);background:var(--info-soft);border-color:transparent} .pill{display:inline-flex;align-items:center;gap:4px;border-radius:6px;font-size:11px;font-weight:600} .pill .d{width:6px;height:6px;border-radius:50%;background:currentColor} .pill.ok,.pill.go{color:var(--go);background:var(--go-soft)} .pill.bad,.pill.stop{color:var(--stop);background:var(--stop-soft)} .pill.warn,.pill.watch{color:var(--watch);background:var(--watch-soft)} .pill.info{color:var(--info);background:var(--info-soft)} .pill.gray{color:var(--ink-3);background:var(--surface-3)} /* ---------- 指标卡 stat / vital ---------- */ .vitals{display:grid;grid-template-columns:repeat(4,1fr)} .vital,.stat{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1)} .vital.alert{border-color:var(--watch-line);background:var(--watch-soft)} .vk,.label{display:flex;align-items:center;gap:7px;font-size:12px;margin-bottom:9px} .vk i,.label i{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block} .vv,.value{line-height:1;font-variant-numeric:tabular-nums} .vs,.sub{font-size:11.5px;margin-top:7px} /* ---------- 列表 item ---------- */ .list{display:flex;flex-direction:column} .item{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line-2)} .item:last-child{border-bottom:0} .itemTitle{font-weight:600;font-size:13.5px} .itemMeta{font-size:11.5px;color:var(--ink-3);margin-top:2px} /* ---------- note 提示条 ---------- */ .note{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);font-size:12.5px} .note b{font-size:13px} .note span{color:var(--ink-2);line-height:1.5} .note.warn{background:var(--watch-soft);border-color:var(--watch-line)} .note.warn b{color:var(--watch)} .note.stop{background:var(--stop-soft);border-color:var(--stop-line)} .note.stop b{color:var(--stop)} .note.go{background:var(--go-soft);border-color:var(--go-line)} .note.go b{color:var(--go)} /* ---------- 作战室 directive / queue ---------- */ @keyframes ldspin{to{transform:rotate(360deg)}} .ldspin{display:inline-block;width:14px;height:14px;border:2px solid var(--line,#e2e8f0);border-top-color:var(--brand,#2563eb);border-radius:50%;animation:ldspin .7s linear infinite;vertical-align:-2px;margin-right:8px} .spine{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start;margin-bottom:18px} .spine>*,.cols>*,.launchLayout>*{min-width:0} @media(max-width:1180px){.spine,.cols,.launchLayout{grid-template-columns:1fr}.rightSticky{position:static}} .directive{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--ink-4);box-shadow:var(--sh-1)} .directive.stop{border-left-color:var(--stop)} .directive.go{border-left-color:var(--go)} .directive.watch{border-left-color:var(--watch)} .directive h1{margin:8px 0 7px} .directive p{line-height:1.5} .directive .acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px} /* ---------- 决策分组 buckets（投放台） ---------- */ .buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px} .bucket{background:var(--surface);border:1px solid var(--line);cursor:pointer;transition:.12s;box-shadow:var(--sh-1);border-top:3px solid var(--ink-4)} .bucket.stop{border-top-color:var(--stop)} .bucket.go{border-top-color:var(--go)} .bucket.watch{border-top-color:var(--watch)} .bucket.idle{border-top-color:var(--ink-4)} .bucket .k{font-size:12px;display:flex;align-items:center;gap:6px} .bucket .v{margin-top:6px;font-variant-numeric:tabular-nums} .bucket.stop .v{color:var(--stop)} .bucket.go .v{color:var(--go)} .bucket.watch .v{color:var(--watch)} /* ---------- 上品台 steps ---------- */ .launchLayout{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start} .steps{display:flex;flex-direction:column;gap:14px} .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1)} .stepHead{display:flex;align-items:center;margin-bottom:14px} .stepNum{flex:0 0 26px;display:grid;place-items:center;font-size:13px;font-weight:700} .quickFill{display:flex;gap:8px;flex-wrap:wrap} .flow{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .stickyAct{position:sticky;bottom:0;padding-top:12px;margin-top:6px} /* ---------- 落地页 / 短链（素材库） ---------- */ .lcTools{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap} .assetOpsHead{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px;padding:16px 18px} .assetOpsHead>div:first-child{min-width:0}.assetOpsHead h2{font-size:17px;letter-spacing:-.25px}.assetOpsHead p{margin:4px 0 0;color:var(--ink-3);font-size:12px;line-height:1.45} .assetOpsStats{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;flex:none}.assetOpsStats>span{display:inline-flex;align-items:baseline;gap:5px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink-3);font-size:11px}.assetOpsStats>span b{color:var(--ink);font-size:14px}.assetOpsStats>span.ok b{color:var(--go)}.assetOpsStats>span.warn b{color:var(--watch)} .lcSearch{flex:1;min-width:200px} .lcSortLabel,.slSortLabel{font-size:12px;color:var(--ink-3);margin:0 2px 0 6px} .lcList{display:flex;flex-direction:column;gap:10px} .lpCard{background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);transition:.12s} .lpCard:hover{box-shadow:var(--sh-2)} .lpHead{display:flex;align-items:center;gap:11px;cursor:pointer} .lpChev{color:var(--ink-3);width:14px;transition:.15s} .lpBadge{font-size:11px;color:var(--brand-ink);padding:2px 8px;border-radius:20px} .bindPill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line)} .bindPill.on{color:var(--brand-ink);background:var(--brand-soft);border-color:transparent} .lpSum{font-size:12px;color:var(--ink-3);margin-left:auto;white-space:nowrap} .lpActs{display:flex;gap:4px;align-items:center} .lpSplit{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .lpSecHead{font-weight:780;font-size:14px;color:var(--brand-ink);margin:2px 2px 9px} .lpSplit .lpHead{flex-wrap:wrap;row-gap:6px} @media(max-width:1100px){.lpSplit{grid-template-columns:1fr}} .lpBody{border-top:1px solid var(--line-2)} .slTools{display:flex;align-items:center;gap:8px;padding:10px 0 8px} .slList{display:flex;flex-direction:column} .slRow{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line-2)} .slRow:last-child{border-bottom:0} .slCode{font-family:var(--font-mono);font-size:13px} .slDom{font-size:11.5px;color:var(--ink-3)} .slStat{font-size:12px;color:var(--ink-2)} .slActs{margin-left:auto;display:flex;gap:3px;align-items:center} .slActs .primaryLink{color:var(--brand);font-weight:720} .slEmpty{padding:14px;text-align:center;color:var(--ink-3);font-size:12.5px} .slNew{margin-top:8px} .lcMore,.lcUp{margin:8px 4px 2px;font-size:12.5px;color:var(--brand-ink);background:none;border:0;cursor:pointer;padding:6px;font-family:inherit;font-weight:550} .lcMore:hover{text-decoration:underline} @media(max-width:640px){.assetOpsHead{align-items:stretch;flex-direction:column}.assetOpsStats{display:grid;grid-template-columns:1fr 1fr;justify-content:stretch}.assetOpsStats .btn{grid-column:1/-1;width:100%}.slRow{align-items:flex-start;flex-wrap:wrap;padding:9px 0}.slActs{width:100%;margin-left:0;justify-content:flex-end}} /* ---------- 投放台 白名单 / 下钻 ---------- */ .anaWl{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:14px;overflow:hidden;box-shadow:var(--sh-1)} .anaWlHead{display:flex;align-items:center;gap:10px;padding:13px 16px;flex-wrap:wrap} .anaWlMaster{border-color:color-mix(in srgb,var(--brand) 28%,var(--line));box-shadow:0 10px 28px -24px color-mix(in srgb,var(--brand) 58%,transparent)} .anaWlMaster>.anaWlHead{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center} .anaWlToggle{display:inline-flex;min-width:0;min-height:32px;align-items:center;gap:10px;margin:-4px 0 -4px -6px;padding:4px 6px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer} .anaWlToggle:hover{background:var(--surface-2)} .anaWlToggle:focus-visible{outline:3px solid var(--brand-soft);outline-offset:1px} .anaWlToggle .lpBadge.hasProblem{background:var(--stop-soft);color:var(--stop)} .anaWlTitle{font-size:13px;white-space:nowrap} .anaWlHint{font-size:12px;flex:1 1 150px} .anaWlQuickActions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap} .anaWlAlerts{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 16px;border-top:1px solid var(--line-2);background:color-mix(in srgb,var(--stop) 3%,var(--surface))} .anaWlAlertLabel{flex:none;color:var(--stop);font-size:11.5px} .wlRow{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line-2);font-size:13px} .anaTable tr.clk{cursor:pointer} .drillName{padding-left:14px;font-size:12.5px} .ccTag{display:inline-block;font-size:10px;line-height:1.6;padding:1px 7px;border-radius:5px;background:var(--surface-3);color:var(--ink-2);font-weight:700;letter-spacing:.03em;vertical-align:middle} .checkItem{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0} .preflight{display:flex;flex-direction:column;gap:8px} /* ---------- 上传体检 report ---------- */ .rpItem{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13px} .rpUrl{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);word-break:break-all} .resultRow,.summaryRow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13px} .summaryBlock{display:flex;flex-direction:column;gap:2px} .copyBox{display:flex;gap:8px;align-items:center;border:1px solid var(--line);padding:9px 12px;font-family:var(--font-mono);font-size:12.5px;word-break:break-all} /* ---------- 弹窗 modal ---------- */ .modalMask{position:fixed;inset:0;display:none;place-items:center;z-index:100;padding:20px} .modalMask.show{display:grid} .modal{width:100%;max-height:88vh;overflow:auto} .modal h2,.modal h3{margin-bottom:14px} .modal .acts{display:flex;gap:9px;justify-content:flex-end;margin-top:18px} /* ---------- toast ---------- */ .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(10px);color:var(--surface);font-size:13.5px;z-index:200;max-width:90vw;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s} .toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} [data-theme="dark"] .toast{background:var(--surface-3);color:var(--ink);border:1px solid var(--line-strong)} /* ---------- 登录 ---------- */ .authChecking{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-2);font-size:13px} .login{min-height:100vh;display:grid} .login .brandSide{color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden} .login .brandSide::after{content:"";position:absolute;inset:0} .login .brandSide .lgMark{background:rgba(255,255,255,.16);display:grid;place-items:center;overflow:hidden;position:relative;z-index:1} .login .brandSide .lgMark img{width:100%;height:100%;object-fit:cover} .login .brandSide h1{line-height:1.15;position:relative;z-index:1} .login .brandSide .pitch{margin-top:14px;position:relative;z-index:1} .login .brandSide .feats{display:flex;flex-wrap:wrap;position:relative;z-index:1} .login .brandSide .feats span{font-size:12.5px;border-radius:20px;backdrop-filter:blur(4px)} .login .brandSide .lgFoot{font-size:12px;opacity:.7;position:relative;z-index:1} .login .formSide{display:grid;place-items:center} .loginCard{width:100%} .loginCard .lcMarkSm{width:40px;height:40px;border-radius:11px;overflow:hidden;margin-bottom:18px;display:none} .loginCard .sub{font-size:13.5px;line-height:1.5} .loginCard label{font-size:12.5px;font-weight:550;color:var(--ink-2);display:block;margin-bottom:6px} .fineprint{font-size:11.5px;color:var(--ink-3);margin-top:18px;line-height:1.6;display:flex;align-items:center;gap:7px;flex-wrap:wrap} .brandMark.logo{display:grid;place-items:center} /* ---------- 杂项 ---------- */ .toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .soft{color:var(--ink-3)} .bmImg{display:block} /* ---------- 响应式 ---------- */ @media(max-width:980px){.cols,.spine,.launchLayout{grid-template-columns:1fr}.rightSticky{position:static}.g4,.vitals{grid-template-columns:repeat(2,1fr)}.login{grid-template-columns:1fr}.login .brandSide{display:none}.loginCard .lcMarkSm{display:block}} @media(max-width:720px){ /* App navigation is owned by the final unified layer; keep this foundation breakpoint layout-only. */ .shell,.topInner{padding-left:16px;padding-right:16px} .g2,.g4,.vitals,.row,.row3{grid-template-columns:1fr;display:grid} } } @layer specialized{ /* ===== Specialized components retained from the visual normalization pass ===== */ [data-theme="dark"] body{ background: radial-gradient(920px 600px at 14% -10%,rgba(139,134,255,.18),transparent 60%), radial-gradient(820px 560px at 95% 4%,rgba(49,211,153,.10),transparent 58%), linear-gradient(180deg,#111620 0%,var(--bg) 56%,#090c12 100%); } [data-theme="dark"] .sb-nav button:hover{background:rgba(255,255,255,.055)} [data-theme="dark"] .sb-nav button.active{background:linear-gradient(135deg,rgba(139,134,255,.20),rgba(255,255,255,.05));border-color:rgba(139,134,255,.24)} [data-theme="dark"] .topbar{background:rgba(10,13,20,.68);border-bottom-color:rgba(255,255,255,.07)} [data-theme="dark"] .card,[data-theme="dark"] .step,[data-theme="dark"] .directive,[data-theme="dark"] .lpCard,[data-theme="dark"] .anaWl,[data-theme="dark"] .vital,[data-theme="dark"] .stat,[data-theme="dark"] .bucket{background:linear-gradient(180deg,rgba(21,25,36,.92),rgba(18,22,31,.80));border-color:rgba(255,255,255,.08)} .desc,.hint{color:var(--ink-2)} [data-theme="dark"] .empty{background:rgba(255,255,255,.035)} .btn,.iconbtn,.segBtn,.lkbtn,.seg button{transition:background .16s,border-color .16s,color .16s,box-shadow .16s,transform .16s} [data-theme="dark"] .btn{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border-color:rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.05) inset} .btn.primary{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); border-color:transparent; color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 14px 30px -18px rgba(79,70,229,.9); } [data-theme="dark"] .seg{background:rgba(255,255,255,.045)} [data-theme="dark"] .seg button.active{background:rgba(255,255,255,.10)} .field label,.loginCard label{font-weight:700;color:var(--ink-2)} [data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.04) inset} input[type=checkbox]{border-radius:4px} input[type=radio]{border-radius:50%} input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:0 0 0 3px rgba(99,91,255,.14)} .vital.alert::after{background:rgba(194,116,10,.10)} [data-theme="dark"] .tableWrap{background:rgba(255,255,255,.035)} [data-theme="dark"] .table thead th{background:rgba(255,255,255,.045)} .table tbody tr:hover{background:rgba(99,91,255,.045)} .chip.go,.pill.ok,.pill.go{color:var(--go)} .chip.stop,.pill.bad,.pill.stop{color:var(--stop)} .chip.watch,.chip.alert,.pill.warn,.pill.watch{color:var(--watch)} .spine,.launchLayout{gap:18px} .directive::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--ink-4),transparent)} .directive.stop::before{background:linear-gradient(180deg,var(--stop),rgba(226,61,61,.2))} .directive.go::before{background:linear-gradient(180deg,var(--go),rgba(19,160,95,.2))} .directive.watch::before{background:linear-gradient(180deg,var(--watch),rgba(194,116,10,.2))} .directive::after{content:"";position:absolute;right:-70px;top:-90px;width:220px;height:220px;border-radius:50%;background:rgba(99,91,255,.09)} .bucket::before{content:"";position:absolute;left:14px;right:14px;top:0;height:3px;border-radius:0 0 10px 10px;background:var(--ink-4)} .bucket.stop::before{background:var(--stop)}.bucket.go::before{background:var(--go)}.bucket.watch::before{background:var(--watch)}.bucket.idle::before{background:var(--ink-4)} .bucket:hover{transform:translateY(-2px);box-shadow:var(--sh-2)} .bucket.on{border-color:rgba(99,91,255,.34);box-shadow:0 0 0 3px rgba(99,91,255,.10),var(--sh-2)} .stepHead h2{font-size:15.5px;font-weight:780} .quickFill .btn,.flow .btn{border-radius:999px} [data-theme="dark"] .stickyAct{background:linear-gradient(to top,rgba(18,22,31,.94) 64%,rgba(18,22,31,0))} .lcTools,.slTools{gap:10px} .lpFile{font-size:14.5px;font-weight:780} [data-theme="dark"] .lpBody{background:rgba(255,255,255,.035)} [data-theme="dark"] .copyBox{background:rgba(255,255,255,.045)} [data-theme="dark"] .note{background:rgba(255,255,255,.045)} .modal *{min-width:0} [data-theme="dark"] .modal{background:linear-gradient(180deg,rgba(24,29,40,.96),rgba(18,22,31,.92))} .brandMark.logo img,.login .lgMark img,.loginCard .lcMarkSm img{width:100%;height:100%;object-fit:cover} .engineModal{width:min(560px,100%);max-width:100%;display:flex;flex-direction:column;gap:12px} .engineTitle{font-size:17px;font-weight:800;line-height:1.25} .engineHelp{color:var(--ink-3);line-height:1.6;font-size:13px} .engineHelp b{color:#dc2626} .engineStack{display:flex;flex-direction:column;gap:10px} .engineToggle{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:flex-start;line-height:1.45} .engineToggle input,.engineRule input{margin-top:2px;flex:0 0 auto} .engineFields{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:9px} .engineField label{display:block;color:var(--ink-3);font-size:11.5px;font-weight:700;margin-bottom:4px} .engineField input{width:100%;padding:8px 10px;box-sizing:border-box} .engineRules{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;font-size:12.5px} .engineRule{display:flex;align-items:flex-start;gap:7px;line-height:1.35} .engineActions{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 0} .engineActions .btn{flex:0 1 auto;white-space:normal;line-height:1.25} .engineLogTitle{font-size:13px;font-weight:700;line-height:1.45;margin-top:2px} .engineLog{max-height:34vh;overflow:auto;border:1px solid var(--line2,#eee);border-radius:10px} .engineFooter{display:flex;justify-content:flex-end;margin-top:0} .login .brandSide::before{ content:""; position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 88%); } [data-theme="dark"] .loginCard{background:linear-gradient(180deg,rgba(22,27,38,.88),rgba(18,22,31,.72))} .loginCard h2{font-size:27px;font-weight:850;letter-spacing:-.9px} .loginCard input{height:44px;margin-bottom:15px} .loginCard .fineprint{margin-top:20px} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(99,91,255,.18);outline-offset:2px} @media(max-width:720px){.topActions .seg{flex:0 0 auto} .engineFields{grid-template-columns:1fr 1fr} .engineActions .btn{flex:1 1 100%} } @media(max-width:420px){ .engineFields,.engineRules{grid-template-columns:1fr} } .vital:hover,.stat:hover{box-shadow:var(--sh-2);border-color:rgba(99,91,255,.16)} .chip .d,.pill .d{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent)} @keyframes kdPulse{0%,100%{box-shadow:0 0 0 3px var(--go-soft)}50%{box-shadow:0 0 0 5px var(--go-soft)}} .sb-nav button,.lkbtn,.seg button{-webkit-tap-highlight-color:transparent} .item:hover{background:color-mix(in srgb,var(--brand) 3%,transparent)} } @layer workspaces{ /* ===== Operations workspaces and page-specific components ===== */ .kdKpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px} .kdKpi{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,12px);padding:14px 15px;box-shadow:var(--sh-1)} .kdKpi .k{font-size:12px;color:var(--ink-3);font-weight:550} .kdKpi .v{font-size:26px;font-weight:730;letter-spacing:-.6px;margin-top:6px;line-height:1} .kdKpi .s{font-size:11.5px;color:var(--ink-3);margin-top:5px} .kdKpi .v.good{color:var(--go)} .kdKpi .v.bad{color:var(--stop)} .kdKpi.accent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)} .kdReco{display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:var(--r-md,12px);margin-bottom:14px;background:var(--stop-soft);border:1px solid var(--stop-line)} .kdReco .ic{width:30px;height:30px;border-radius:9px;background:var(--stop);color:#fff;display:grid;place-items:center;flex:0 0 30px;font-size:17px;font-weight:800} .kdReco b{color:var(--stop)} .kdReco .t{flex:1;min-width:0;font-size:13px} .kdTools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px} .kdSeg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px} .kdSeg button{border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:550;padding:6px 12px;border-radius:7px;cursor:pointer} .kdSeg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)} [data-theme="dark"] .kdSeg button.on{background:var(--surface-3)} .kdInput{height:32px;padding:0 11px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;border-radius:9px;outline:none} .kdInput:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .kdSpacer{margin-left:auto}.kdField{display:inline-flex;align-items:center;gap:4px;padding:0 9px;height:32px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px}.kdMore{position:relative;display:inline-block}.kdMoreMenu{position:absolute;top:calc(100% + 6px);right:0;min-width:160px;background:var(--surface);border:1px solid var(--line-strong);border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.22);padding:5px;z-index:60;display:none;flex-direction:column;gap:2px}.kdMore.open .kdMoreMenu{display:flex}.kdMoreMenu button{display:flex;align-items:center;gap:9px;width:100%;justify-content:flex-start;text-align:left;border:0;background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:550;padding:9px 11px;border-radius:8px;cursor:pointer;white-space:nowrap;line-height:1}.kdMoreMenu button:hover{background:var(--surface-2)}.kdMoreMenu button svg{flex:none;opacity:.85}.kdMoreMenu button.danger{color:var(--danger,#dc2626)}.kdMoreMenu button.danger:hover{background:var(--danger-bg,rgba(220,38,38,.09))}.kdMoreDiv{height:1px;background:var(--line);margin:4px 4px}.embedWrap{width:100%}.embedFrame{width:100%;height:calc(100vh - 92px);min-height:600px;border:0;border-radius:14px;background:var(--surface);display:block} table.kdTbl{width:100%;font-size:13px} table.kdTbl thead th{position:sticky;top:0;text-align:left;padding:10px 12px;white-space:nowrap} table.kdTbl thead th.num,table.kdTbl td.num{text-align:right} table.kdTbl tbody td{border-bottom:1px solid var(--line-2);vertical-align:middle} table.kdTbl tbody tr.kdCamp{cursor:pointer} table.kdTbl tbody tr.kdCamp:hover{background:var(--surface-2)} table.kdTbl tbody tr.kdCamp.kdSel{background:var(--brand-soft)} table.kdTbl tbody tr.kdSub td{background:var(--surface-2)} [data-theme="dark"] table.kdTbl tbody tr.kdSub td{background:var(--surface-3)} .kdEdge{width:4px;height:32px;border-radius:4px;display:inline-block;vertical-align:middle} .kd-go{background:var(--go)} .kd-stop{background:var(--stop)} .kd-watch{background:var(--watch)} .kd-idle{background:var(--ink-4)} .kdName{display:flex;align-items:center;gap:9px;min-width:0} .kdChev{color:var(--ink-3);font-size:11px;flex:0 0 auto} .kdProd{font-weight:600} .kdCode{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3)} .kdCode.miss{color:var(--stop);font-weight:600} .kdBig{font-size:16px;font-weight:730;letter-spacing:-.3px} .kdGood{color:var(--go)} .kdBad{color:var(--stop)} .kdS2{font-size:11px;color:var(--ink-3);margin-top:2px} .kdTag{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:var(--surface-3);color:var(--ink-2);white-space:nowrap} .kdTag.go{background:var(--go-soft);color:var(--go)} .kdTag.stop{background:var(--stop-soft);color:var(--stop)} .kdTag.watch{background:var(--watch-soft);color:var(--watch)} .kdActs{display:flex;gap:6px;justify-content:flex-end;flex-wrap:nowrap;opacity:0;transition:.1s} tr.kdCamp:hover .kdActs{opacity:1} @media(hover:none){.kdActs{opacity:1}} .kdMini{height:28px;padding:0 10px;font-size:12px;font-weight:600;border-radius:7px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);cursor:pointer;white-space:nowrap;flex:0 0 auto} .kdMini.kdMetaLink{display:inline-flex;align-items:center;text-decoration:none;line-height:26px} .kdMini:hover{background:var(--surface-2);color:var(--ink)} .kdMini.danger:hover{background:var(--stop);border-color:var(--stop);color:#fff} .kdMini.go:hover{background:var(--go);border-color:var(--go);color:#fff} .kdCk{width:16px;height:16px;border:1.5px solid var(--line-strong);border-radius:5px;display:inline-grid;place-items:center;cursor:pointer;background:var(--surface);vertical-align:middle} .kdCk.on{background:var(--brand);border-color:var(--brand);color:#fff;font-size:11px;line-height:1} .kdBulk{position:fixed;left:50%;bottom:24px;transform:translate(-50%,160%);z-index:120;display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--surface);padding:10px 12px 10px 18px;border-radius:14px;box-shadow:var(--sh-3);transition:transform .28s cubic-bezier(.2,.8,.2,1)} .kdBulk[hidden]{display:none!important} [data-theme="dark"] .kdBulk{background:#000;border:1px solid var(--line-strong)} .kdBulk.show{transform:translate(-50%,0)} .kdBulk .cnt{font-weight:700;font-size:14px} .kdBulk .cnt b{color:#fff;background:var(--brand);border-radius:6px;padding:1px 8px;margin-right:6px} .kdBulk .bb{height:34px;padding:0 13px;border-radius:9px;border:0;font:inherit;font-size:13px;font-weight:650;cursor:pointer} .kdBulk .bb.stop{background:var(--stop);color:#fff} .kdBulk .bb.gray{background:rgba(255,255,255,.16);color:#fff} .kdBulk .bb.gray:hover{background:rgba(255,255,255,.26)} .kdBulk .x{margin-left:2px;background:transparent;border:0;color:rgba(255,255,255,.6);cursor:pointer;font-size:18px} .kdLegend{margin-top:10px;font-size:11.5px;display:flex;gap:14px;flex-wrap:wrap} .kdLegend i{width:11px;height:11px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:4px} .kdEmpty{padding:30px 18px;text-align:center;color:var(--ink-3);font-size:13px;background:var(--surface-2);border-radius:var(--r-md,12px)} .kdHealth{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px} .kdAcc{flex:0 0 214px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,12px);padding:12px 13px;box-shadow:var(--sh-1);position:relative} .kdAcc .st{position:absolute;top:13px;right:13px;width:8px;height:8px;border-radius:50%} .kdAcc .nm{font-weight:650;font-size:13px;padding-right:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kdAcc .meta{font-size:11px;color:var(--ink-3);margin-top:3px} .kdAcc .stat{margin-top:9px;font-size:12px;font-weight:650} .kdHhead{display:flex;align-items:center;gap:10px;margin-bottom:10px} .kdHhead h2{font-size:15px;font-weight:650} .kdErp{margin-bottom:14px;padding:13px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,16px);box-shadow:var(--sh-1)} .kdErpHead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px} .kdErpHead>div{display:flex;align-items:baseline;gap:8px;min-width:0}.kdErpHead h2{font-size:15px;font-weight:680}.kdErpHead small{color:var(--ink-3);font-size:10.5px}.kdErpHead>a{display:inline-flex;min-height:44px;align-items:center;flex:none;font-size:11.5px;font-weight:650} .kdErpEyebrow{padding:2px 6px;border-radius:6px;background:var(--brand-soft);color:var(--brand);font-family:var(--font-mono);font-size:9.5px;font-weight:750;letter-spacing:.06em} .kdErpGrid{display:grid;grid-template-columns:minmax(160px,1.4fr) repeat(5,minmax(108px,1fr));gap:7px} .kdErpItem{display:grid;min-width:0;min-height:76px;padding:9px 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);color:var(--ink);text-decoration:none;transition:.12s} .kdErpItem:hover{border-color:color-mix(in srgb,var(--brand) 36%,var(--line));background:var(--brand-soft);text-decoration:none;transform:translateY(-1px)} .kdErpItem>span{color:var(--ink-3);font-size:10.5px;font-weight:650}.kdErpItem>b{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;line-height:1.15;font-variant-numeric:tabular-nums}.kdErpItem>b em{margin-left:3px;color:var(--ink-3);font-size:9.5px;font-style:normal;font-weight:550}.kdErpItem>small{align-self:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3);font-size:9.5px} .kdErpItem.active>b{color:var(--watch)}.kdErpItem.locked{border-color:var(--stop-line);background:var(--stop-soft)}.kdErpItem.locked>b,.kdErpItem.locked>span{color:var(--stop)} .kdErpError{margin:8px 2px 0;color:var(--watch);font-size:10.5px;line-height:1.4} .kdCtrlKpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} .kdSplit{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px} .kdCard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg,16px);box-shadow:var(--sh-1)} .kdCard h2{font-size:15px;font-weight:650;margin-bottom:12px} .kdMini2 .li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-top:1px solid var(--line-2)} .kdMini2 .li:first-child{border-top:0} .kdMini2 .rk{text-align:center} .kdMini2 .ln{flex:1;min-width:0;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kdMini2 .bar{height:6px} .kdMini2 .vv{font-family:var(--font-mono);font-weight:700;min-width:34px;text-align:right} .kdLpTools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px} .kdLpSplit{display:grid;grid-template-columns:1fr 1fr;gap:16px} .kdSecHead{font-size:12px;font-weight:650;color:var(--ink-3);letter-spacing:.03em;margin-bottom:10px;display:flex;align-items:center;gap:8px} .kdSecHead .cnt{background:var(--surface-3);border-radius:20px;padding:1px 9px;font-size:11px;color:var(--ink-2)} .kdLp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,12px);padding:13px 14px;box-shadow:var(--sh-1);margin-bottom:10px} .kdLp:hover{border-color:var(--line-strong)} .kdLpTop{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .kdLpThumb{width:40px;height:40px;border-radius:10px;flex:0 0 40px;display:grid;place-items:center;background:var(--surface-3);color:var(--ink-3);font-size:18px} .kdLpName{font-weight:650;font-size:14px;word-break:break-all} .kdLpTags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .kdLpMetrics{display:flex;gap:8px;margin-top:11px} .kdLpM{flex:1;border-radius:9px;text-align:center} .kdLpActs{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap} .kdWiz{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start} .kdStep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,12px);padding:15px 17px;box-shadow:var(--sh-1);margin-bottom:12px} .kdStepHead{display:flex;align-items:center;gap:10px;margin-bottom:13px} .kdStepNum{width:23px;height:23px;border-radius:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:0 0 23px} .kdStepHead h3{font-size:14px;font-weight:650} .kdF{margin-bottom:11px} .kdF:last-child{margin-bottom:0} .kdF label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px} .kdF .hint{font-size:11.5px;color:var(--ink-3);margin-top:5px} .kdF input,.kdF select{width:100%;height:36px;padding:0 12px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;border-radius:9px;outline:none} .kdF input:focus,.kdF select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .kdRow2{display:grid;grid-template-columns:1fr 1fr;gap:11px} .kdChips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px} .kdChip{height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer} .kdSticky{position:sticky;top:78px} .kdCopy{background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:9px;padding:10px 12px;font-family:var(--font-mono);font-size:12.5px;word-break:break-all;color:var(--ink)} .kdNote{border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.5} .kdNote.warn{background:var(--watch-soft);border:1px solid var(--watch-line);color:var(--watch)} .kdNote.stop{background:var(--stop-soft);border:1px solid var(--stop-line);color:var(--stop)} .kdNote.ok{background:var(--go-soft);border:1px solid var(--go-line);color:var(--go)} .kdBlock{width:100%} @media(max-width:1180px){.kdErpGrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:1080px){.kdCtrlKpis{grid-template-columns:repeat(2,1fr)}.kdSplit,.kdLpSplit{grid-template-columns:1fr}.kdWiz{grid-template-columns:1fr}} /* ===== 窄屏 / 移动端适配（修复 KPI 挤压、批量条溢出、表格拥挤） ===== */ @media(max-width:1080px){ .kdKpis{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .kdErp{padding:12px}.kdErpHead{align-items:flex-start}.kdErpHead>div{display:grid;grid-template-columns:auto 1fr;gap:2px 7px}.kdErpHead small{grid-column:1/-1}.kdErpGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.kdErpItem{min-height:80px} .kdKpis,.kdCtrlKpis{grid-template-columns:repeat(2,1fr)} .kdKpi{padding:12px 12px;overflow:hidden} .kdKpi .v{font-size:21px} .kdKpi .spark{display:none} .kdReco{flex-wrap:wrap;gap:8px} .kdBulk{left:10px;right:10px;bottom:14px;transform:translateY(200%);padding:10px 12px;gap:8px;flex-wrap:wrap;justify-content:center} .kdBulk.show{transform:translateY(0)} .kdBulk .cnt{width:100%;text-align:center;margin-bottom:2px} .kdBulk .bb{flex:1;min-width:120px} table.kdTbl{font-size:12px} table.kdTbl thead th,table.kdTbl tbody td{padding:8px 7px} table.kdTbl thead th{top:0} .kdBig{font-size:15px} .kdTools{gap:7px} .kdTools .kdInput{min-width:0;flex:1 1 140px} .kdWiz{grid-template-columns:1fr} .kdHealth{gap:8px} .kdAcc{flex:0 0 180px} } /* 5 卡片 KPI(含可扩) 响应式 */ .kdKpis.k5{grid-template-columns:repeat(5,1fr)} @media(max-width:1080px){.kdKpis.k5{grid-template-columns:repeat(3,1fr)}} @media(max-width:640px){.kdKpis.k5{grid-template-columns:repeat(2,1fr)}} /* ===== 作战室 · 实时在线监控 ===== */ .kdLiveWrap{margin-bottom:14px} .kdLive{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,12px);padding:14px 16px;box-shadow:var(--sh-1)} .kdLive::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--go)} .kdLiveHd{display:flex;align-items:center;gap:8px;margin-bottom:12px} .kdLiveDot{width:9px;height:9px;border-radius:50%;background:var(--go);animation:kdLivePulse 1.6s ease-out infinite} @keyframes kdLivePulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}} .kdLiveTtl{font-weight:680;font-size:13.5px;color:var(--ink)} .kdLiveUpd{margin-left:auto;font-size:11px;color:var(--ink-3)} .kdLiveBig .num{font-size:44px;font-weight:800;letter-spacing:-1.5px;line-height:.92;color:var(--go)} .kdLiveBig .lbl{font-size:11.5px;color:var(--ink-3);margin-top:7px} .kdLiveMini .mi .v{font-size:22px;font-weight:730;line-height:1;color:var(--ink)} .kdLiveMini .mi .v.go{color:var(--go)} .kdLiveMini .mi .k{font-size:11px;color:var(--ink-3);margin-top:5px} .kdLiveCcs{display:flex;flex-wrap:wrap;gap:6px} .kdLiveChip{font-size:11.5px;padding:3px 9px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)} .kdLiveChip b{color:var(--ink);font-weight:650} .kdLiveBars{margin-top:11px;display:flex;flex-direction:column;gap:5px} .kdLiveBars .li{display:flex;align-items:center} .kdLiveBars .ln{flex:0 0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)} .kdLiveBars .bar{border-radius:4px;background:var(--brand);opacity:.85;flex:0 0 auto} @media(max-width:640px){ .kdLiveBig .num{font-size:36px} .kdLiveMini{margin-left:0;width:100%;gap:26px;margin-top:4px} .kdLiveTop{gap:12px} .kdLiveBars .ln{max-width:40%} } /* ===== UI 精修:动效 / 等宽数字 / 骨架屏 / 在场卡增强 ===== */ :root{--kd-ease:cubic-bezier(.4,0,.2,1);--kd-dur:.18s} /* 会变动的大数字全部等宽对齐,刷新不跳动 */ .kdKpi .v,.kdCtrlKpis .kdKpi .v,.kdLiveMini .mi .v,.kdLiveBig .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} /* 统一微交互:卡片轻微抬起、可点行/段平滑 */ .kdKpi,.kdCard,.kdChip,.kdSeg button{transition:transform var(--kd-dur) var(--kd-ease),box-shadow var(--kd-dur) var(--kd-ease),border-color var(--kd-dur) var(--kd-ease),background var(--kd-dur) var(--kd-ease)} .kdChip:hover{border-color:var(--brand);color:var(--ink)} @media(prefers-reduced-motion:reduce){.kdKpi,.kdCard,.kdChip,.kdSeg button,.kdLiveBig .num{transition:none}.kdKpi:hover{transform:none}} /* 骨架屏(替代"正在加载…"文字) */ .kdSkel{position:relative;overflow:hidden;background:var(--surface-2);border-radius:8px} .kdSkel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);animation:kdShimmer 1.25s infinite} [data-theme="dark"] .kdSkel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)} @keyframes kdShimmer{100%{transform:translateX(100%)}} .kdSkelWrap{padding:2px} .kdSkelRow{display:flex;gap:12px;margin-bottom:12px} .kdSkelCard{height:82px;border-radius:var(--r-md,12px);flex:1} .kdSkelLine{height:12px;border-radius:6px;margin:9px 0} @media(prefers-reduced-motion:reduce){.kdSkel::after{animation:none}} /* 在场卡:sparkline + 数字滚动 */ .kdLiveBig .num{transition:color .35s var(--kd-ease);font-feature-settings:"tnum"} .kdSpark svg{display:block;width:100%;overflow:visible} .kdSpark .ln{fill:none;stroke:var(--go);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .kdSpark .ar{fill:var(--go);opacity:.10} .kdSpark .dt{fill:var(--go)} .kdSparkLbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-3);margin-top:5px} /* 投放台:该杀/达标行淡着色,一眼可扫(让位选中态) */ table.kdTbl tbody tr.kdCamp.kdRowKill:not(.kdSel) td{background:rgba(239,68,68,.05)} table.kdTbl tbody tr.kdCamp.kdRowKill:not(.kdSel):hover td{background:rgba(239,68,68,.09)} table.kdTbl tbody tr.kdCamp.kdRowScale:not(.kdSel) td{background:rgba(16,185,129,.05)} table.kdTbl tbody tr.kdCamp.kdRowScale:not(.kdSel):hover td{background:rgba(16,185,129,.09)} [data-theme="dark"] table.kdTbl tbody tr.kdCamp.kdRowKill:not(.kdSel) td{background:rgba(239,68,68,.11)} [data-theme="dark"] table.kdTbl tbody tr.kdCamp.kdRowKill:not(.kdSel):hover td{background:rgba(239,68,68,.16)} [data-theme="dark"] table.kdTbl tbody tr.kdCamp.kdRowScale:not(.kdSel) td{background:rgba(16,185,129,.10)} [data-theme="dark"] table.kdTbl tbody tr.kdCamp.kdRowScale:not(.kdSel):hover td{background:rgba(16,185,129,.15)} /* ===== 全站精修·补全:共享组件(按钮/卡片/聚焦/素材库/成功态) ===== */ .btn{transition:transform var(--kd-dur) var(--kd-ease),box-shadow var(--kd-dur) var(--kd-ease),background var(--kd-dur) var(--kd-ease),border-color var(--kd-dur) var(--kd-ease),color var(--kd-dur) var(--kd-ease)} .btn:active{transform:translateY(1px)} .card{transition:box-shadow var(--kd-dur) var(--kd-ease),border-color var(--kd-dur) var(--kd-ease)} /* 统一键盘聚焦环(原生输入/选择/文本域,不误伤勾选框) */ input:not([type=checkbox]):not([type=radio]):focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} /* 素材库卡片:hover 抬起 + 指标等宽 */ .kdLp{transition:transform var(--kd-dur) var(--kd-ease),box-shadow var(--kd-dur) var(--kd-ease),border-color var(--kd-dur) var(--kd-ease)} .kdLp:hover{transform:translateY(-1px);box-shadow:var(--sh-2)} .kdLpM .mv{font-feature-settings:"tnum"} /* 上广告:生成成功卡淡入上浮 */ .kdNote.ok{animation:kdFadeUp .4s var(--kd-ease)} @keyframes kdFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.btn:active{transform:none}.kdLp:hover{transform:none}.kdNote.ok{animation:none}} /* ===== 大厂级精修层(排版/按钮/表格/徽章统一) ===== */ /* 标题与数字字距 */ .kdKpi .v,.kdCtrlKpis .kdKpi .v,.kdLiveBig .num,.kdBig{letter-spacing:-.5px} .kdCard h2,.kdHhead h2{letter-spacing:-.2px;font-weight:660} /* 表头:大写 + 字距,更克制 */ table.kdTbl thead th{text-transform:uppercase;letter-spacing:.055em;font-size:10.5px;font-weight:680;color:var(--ink-3)} /* 表体:更舒展的行高 + 平滑 hover */ table.kdTbl tbody td{padding:12px 13px} table.kdTbl tbody tr.kdCamp{transition:background var(--kd-dur) var(--kd-ease)} /* 按钮统一:press 回弹 + 键盘聚焦环 */ .btn:active,.kdMini:active{transform:translateY(1px)} .btn:focus-visible,.kdMini:focus-visible,.kdSeg button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-soft)} .kdMini{transition:transform var(--kd-dur) var(--kd-ease),background var(--kd-dur) var(--kd-ease),border-color var(--kd-dur) var(--kd-ease),color var(--kd-dur) var(--kd-ease)} /* 徽章/标签:统一胶囊形、字重 */ .kdTag{border-radius:20px;padding:2px 9px;font-weight:600;letter-spacing:.01em} /* 卡片留白与 hover 一致 */ .kdCard{padding:17px 18px} .kdAcc{transition:box-shadow var(--kd-dur) var(--kd-ease),border-color var(--kd-dur) var(--kd-ease)} .kdAcc:hover{box-shadow:var(--sh-2)} /* 段落/说明文字更克制 */ .kdLegend{color:var(--ink-3);line-height:1.6} /* 输入统一聚焦 */ .kdInput:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} /* 滚动条更细 */ .tableWrap::-webkit-scrollbar,.kdHealth::-webkit-scrollbar{height:9px} .tableWrap::-webkit-scrollbar-thumb,.kdHealth::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px} /* ===== 大厂级精修·外壳与全局细节 ===== */ ::selection{background:var(--brand-soft);color:var(--brand-ink)} html{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--ink-4);background-clip:content-box} ::-webkit-scrollbar-track{background:transparent} /* 键盘聚焦环:统一品牌色,只在键盘导航时出现 */ button:focus-visible,a:focus-visible,[role=button]:focus-visible,.btn:focus-visible,.kdMini:focus-visible,.segBtn:focus-visible,.kdSeg button:focus-visible,select:focus-visible,.kdCk:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-soft),0 0 0 1px var(--brand)} /* 分段控件:更克制的胶囊态 */ .seg,.kdSeg{border-radius:11px} .segBtn{transition:all .16s var(--kd-ease,cubic-bezier(.4,0,.2,1))} .segBtn:active{transform:translateY(.5px)} /* Toast:更精致 */ .toast{font-weight:560;letter-spacing:-.1px} /* 弹窗:统一圆角与留白节奏 */ .modalMask{transition:opacity .18s ease} /* 空状态:去掉生硬,统一克制 */ .kdEmpty,.empty{letter-spacing:-.1px} /* 链接 hover */ a{transition:color .14s} a:hover{color:var(--brand-2)} /* 表格数字列统一等宽 */ .table td.num,.table th.num,table.kdTbl td.num,table.kdTbl th.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} /* 禁用态统一 */ button:disabled,.btn:disabled,.kdMini:disabled{opacity:.45;cursor:not-allowed} /* 顶栏标题字距 */ .topTitle,.topTitle *{letter-spacing:-.2px} /* body 渲染质量 */ body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} /* ===== 素材库指标块调轻 ===== */ .kdLpM{background:var(--surface-2);border:1px solid var(--line-2);box-shadow:none;padding:8px 9px} .kdLpM .mv{font-size:17px;font-weight:720;letter-spacing:-.3px;font-variant-numeric:tabular-nums;line-height:1.1} .kdLpM .mk{font-size:10.5px;color:var(--ink-3);margin-top:3px;letter-spacing:.01em} /* ===== 修吸顶表头重影(sticky + border-collapse 浏览器bug) ===== */ table.kdTbl{border-collapse:separate;border-spacing:0} table.kdTbl thead th{background:var(--surface);border-bottom:0;box-shadow:inset 0 -1px 0 var(--line);z-index:5} [data-theme="dark"] table.kdTbl thead th{background:var(--surface)} /* ===== 实时在场卡·单列精修 ===== */ .kdLiveTop{display:flex;align-items:flex-end;gap:38px;flex-wrap:wrap;margin-bottom:0} .kdLiveMini{display:flex;gap:28px;margin-left:0;margin-top:0} .kdLiveCcs{margin-top:16px} #kdLiveBars{margin-top:13px} .kdLiveBars{max-width:540px} .kdLiveBars .li{gap:9px;font-size:12px;margin:5px 0} .kdLiveBars .ln{max-width:160px} .kdLiveBars .bar{height:7px} .kdLiveBars .vv{margin-left:6px;font-size:12.5px;font-weight:600;color:var(--ink);font-family:var(--font-mono)} .kdSpark{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)} .kdSpark svg{height:46px} /* ===== 投放台·报表式分析层(世界一流) ===== */ .kdKpi{transition:box-shadow .18s var(--ease),transform .18s var(--ease)} .kdKpi:hover{box-shadow:var(--sh-2);transform:translateY(-1px)} .kdKpi .v{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .kdKpi.accent{background:linear-gradient(158deg,#5f57f2,#463cd4 92%);border-color:transparent;color:#fff} .kdKpi.accent::after{display:none} .kdKpi.accent .k{color:rgba(255,255,255,.82)} .kdKpi.accent .v{color:#fff} .kdKpi.accent .s{color:rgba(255,255,255,.82)} .kdTrend{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md,12px);box-shadow:var(--sh-1);margin-bottom:14px;overflow:hidden} .kdTrendHd{display:flex;align-items:baseline;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)} .kdTrendHd .t{font-weight:680;font-size:13.5px;letter-spacing:-.2px} .kdTrendHd .d{font-size:11.5px;color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums} .kdTrendBody{padding:12px 10px 4px} svg.kdChart{display:block;width:100%;height:auto} .kdChart .kdgrid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges} .kdChart .kdyl{fill:var(--ink-4);font-size:10.5px;text-anchor:end;font-variant-numeric:tabular-nums} .kdChart .kdxl{fill:var(--ink-4);font-size:10.5px;text-anchor:middle} .kdChart .kdbar{fill:rgba(91,83,240,.16)} .kdChart .kdbar.pk{fill:rgba(91,83,240,.36)} .kdChart .kdline{fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round} .kdChart .kdavg{stroke:var(--accent,#0d9488);stroke-width:1.4;stroke-dasharray:5 4;opacity:.85} .kdChart .kdavgl{fill:var(--accent,#0b7d73);font-size:10px;font-weight:650} .kdShare{height:5px;border-radius:4px;background:var(--surface-3,#eef0f4);overflow:hidden;margin-top:5px} .kdShare span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#6f67f4,var(--brand))} /* ===== 作战室·世界一流精修 ===== */ .kdMini2 .bar{background:linear-gradient(90deg,#8079f4,var(--brand));opacity:1;border-radius:6px;box-shadow:0 1px 2px rgba(91,83,240,.22)} .kdMini2 .rk{width:20px;height:20px;line-height:20px;border-radius:6px;background:var(--surface-3,#eef0f4);color:var(--ink-3);font-size:11px;font-weight:720} .kdMini2 .li:nth-child(1) .rk{background:var(--brand);color:#fff} .kdMini2 .li:nth-child(2) .rk{background:#b9b5f7;color:#fff} .kdMini2 .li:nth-child(3) .rk{background:#d7d5fb;color:var(--brand-ink,#4a41e0)} .kdCard h2{letter-spacing:-.2px} .kdShareR{height:5px;border-radius:4px;background:var(--surface-3,#eef0f4);overflow:hidden;margin-top:6px;width:100%} .kdShareR span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#6f67f4,var(--brand))} /* ===== 投放台 · 国家总控 ===== */ .cmOps{margin-bottom:14px;padding:16px 18px;overflow:hidden} .cmOps.cmLoading{display:flex;align-items:center;min-height:82px;color:var(--ink-3);font-size:13px} .cmOps.emptyState{display:flex;align-items:center;justify-content:space-between;gap:18px} .cmOps .eyebrow,.assetOpsHead .eyebrow{display:block;margin-bottom:4px;color:var(--brand);font-size:10.5px;font-weight:760;letter-spacing:.09em;text-transform:uppercase} .cmOpsTop{display:flex;align-items:flex-start;justify-content:space-between;gap:18px} .cmOpsTop>div:first-child{min-width:0;flex:1}.cmOpsTop h2{font-size:17px;letter-spacing:-.25px}.cmOpsTop p,.cmOps.emptyState p{margin:4px 0 0;color:var(--ink-3);font-size:12px;line-height:1.45} .cmOpsTitle{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .cmOpsActions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;flex:none} .cmOpsCountries{display:flex;align-items:center;gap:7px;margin-top:13px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin} .cmOpsCountry{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:11.5px;white-space:nowrap;cursor:pointer} .cmOpsCountry b{font-family:var(--font-mono);font-size:10.5px}.cmOpsCountry .cmDot{width:7px;height:7px;border-radius:50%;background:var(--go)} .cmOpsCountry.blocked .cmDot{background:var(--watch)}.cmOpsCountry.paused .cmDot{background:var(--ink-4)}.cmOpsCountry.on{border-color:color-mix(in srgb,var(--brand) 42%,var(--line));background:var(--brand-soft);color:var(--brand-ink)} .cmOpsFacts{display:grid;grid-template-columns:.75fr 1fr 1fr 1.45fr;margin-top:12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2);overflow:hidden} .cmOpsFacts>div{min-width:0;padding:10px 12px;border-right:1px solid var(--line-2)}.cmOpsFacts>div:last-child{border-right:0} .cmOpsFacts span,.cmOpsFacts small{display:block;color:var(--ink-3);font-size:10.5px}.cmOpsFacts b{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-variant-numeric:tabular-nums}.cmOpsFacts small{margin-top:2px} .cmOpsChoose,.cmOpsIssue{margin-top:11px;padding:9px 11px;border-radius:9px;font-size:11.5px}.cmOpsChoose{background:var(--surface-2);color:var(--ink-3)}.cmOpsIssue{border:1px solid var(--watch-line);background:var(--watch-soft);color:var(--watch)} .countryMaster{padding:0;overflow:hidden;margin-bottom:14px} .countryMaster.cmLoading{padding:22px;display:flex;align-items:center;gap:9px;color:var(--ink-3);font-size:13px} .cmTitle{display:flex;align-items:flex-start;gap:16px;padding:18px 20px 14px} .cmTitle>div{flex:1;min-width:0}.cmTitle .eyebrow{display:block;margin:0 0 4px;color:var(--brand);font-size:10.5px;font-weight:750;letter-spacing:.09em;text-transform:uppercase} .cmTitle h2{font-size:18px;letter-spacing:-.3px}.cmTitle p{margin:4px 0 0;color:var(--ink-3);font-size:12.5px} .cmQuickActions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap;flex:0 0 auto} .cmTabs{display:flex;gap:6px;overflow-x:auto;padding:0 20px 13px;scrollbar-width:thin} .cmTab{display:inline-flex;align-items:center;gap:7px;min-height:34px;white-space:nowrap;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink-2);padding:0 11px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer} .cmTab b{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3)}.cmTab .cmDot{width:7px;height:7px;border-radius:50%;background:var(--go)} .cmTab.on{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 35%,var(--line));color:var(--brand)}.cmTab.on b{color:inherit}.cmTab.blocked .cmDot{background:var(--watch)}.cmTab.paused .cmDot,.cmTab.off .cmDot{background:var(--ink-4)} .cmTab.add{border-style:dashed;background:transparent;color:var(--brand)} .cmOverview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)} .cmOverview>div{min-width:0;padding:15px 18px;border-right:1px solid var(--line)}.cmOverview>div:last-child{border-right:0} .cmOverview span{display:block;color:var(--ink-3);font-size:11px;font-weight:550}.cmOverview b{display:block;margin-top:5px;font-size:17px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.cmOverview small{display:block;margin-top:5px;color:var(--ink-3);font-size:10.5px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmCountryHead{display:flex;align-items:center;gap:14px;padding:14px 20px;border-top:1px solid var(--line);background:var(--surface-2)}.cmCountryHead>div:first-child{flex:1;min-width:0} .cmCountryHead h2{display:inline;margin-left:10px;font-size:16px}.cmCountryHead h2 span{margin-left:5px;color:var(--ink-3);font-family:var(--font-mono);font-size:12px}.cmCountryHead p{margin:5px 0 0;color:var(--ink-3);font-size:11px} .cmCountryActions{display:flex;gap:8px;flex-wrap:wrap}.cmNotice{margin:0 20px 14px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--ink-2);font-size:12px}.cmNotice.warn{border-color:var(--watch-line);background:var(--watch-soft);color:var(--watch)} .cmCountryGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px;padding:16px 18px 20px;border-top:1px solid var(--line);background:var(--surface-2)} .cmCountryCard{min-width:0;padding:15px;border:1px solid var(--line);border-left:4px solid var(--go);border-radius:12px;background:var(--surface);box-shadow:var(--sh-1)}.cmCountryCard.blocked{border-left-color:var(--watch)}.cmCountryCard.paused{border-left-color:var(--ink-4)} .cmCountryCardHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.cmCountryCardHead>div{min-width:0}.cmCountryCardHead h3{display:inline;margin-left:8px;font-size:15px}.cmCountryCardHead h3 b{margin-left:4px;color:var(--ink-3);font-family:var(--font-mono);font-size:10.5px}.cmCountryCardHead>.lkbtn{flex:none} .cmCountryIssue{min-height:34px;margin:10px 0;color:var(--ink-2);font-size:11.5px;line-height:1.5}.cmCountryCard.blocked .cmCountryIssue{color:var(--watch)}.cmCountryCard.paused .cmCountryIssue{color:var(--ink-3)} .cmCountryFacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.cmCountryFacts>div{min-width:0;padding:9px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface-2)}.cmCountryFacts span,.cmBudgetLine span{display:block;color:var(--ink-3);font-size:10px}.cmCountryFacts b{display:block;margin-top:4px;font-size:11.5px;line-height:1.35;word-break:break-word}.cmCountryFacts small{display:block;margin-top:3px;color:var(--ink-3);font-size:9.5px;line-height:1.35} .cmBudgetLine{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:8px 9px;border-radius:8px;background:var(--brand-soft)}.cmBudgetLine span{flex:none;color:var(--brand)}.cmBudgetLine b{min-width:0;color:var(--brand-ink);font-size:11px;text-align:right} .cmCountryCardActions{display:flex;justify-content:flex-end;gap:7px;margin-top:11px;flex-wrap:wrap} .cmAssigned{margin-bottom:14px}.cmAssignedGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.cmAssignedGrid>div{min-width:0;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}.cmAssignedGrid b{display:block;margin-bottom:9px;font-size:12px}.cmAssignedGrid>div>div{display:flex;flex-wrap:wrap;gap:6px} .cmAssignedGrid>div>.cmAssignedAccounts{display:grid;gap:7px;width:100%}.cmAssignedAccount{display:flex;align-items:center;gap:8px;min-width:0;width:100%;padding:8px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface)}.cmAssignedAccount .pill{flex:none}.cmAssignedAccount .u-truncate-flex b,.cmAssignedAccount .u-truncate-flex small{display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmAssignedAccount .u-truncate-flex small{margin-top:2px;color:var(--ink-3);font-size:10px}.cmFocusTarget{outline:3px solid var(--brand-soft);outline-offset:3px;transition:outline-color .2s}.accountBillActions{display:inline-flex;align-items:center;gap:6px;flex:none}.kdAcc .kdBillRow{margin-top:8px}.wlRow .accountBillActions{margin-left:auto} .modal.cmHost{width:min(960px,calc(100vw - 28px));height:min(88dvh,840px);padding:0;overflow:hidden}.cmModal{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:100%;height:100%;overflow:hidden}.cmModal>.head{padding:22px 22px 0}.cmModalBody{min-height:0;overflow:auto;padding:14px 22px 18px}.cmProfileTop{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:10px;margin-bottom:14px}.cmProfileTop>div,.cmProfileTop>.cmSwitch{padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}.cmProfileTop span{display:block;color:var(--ink-3);font-size:11px}.cmProfileTop b{display:block;margin-top:4px;font-size:15px}.cmProfileTop small{display:block;margin-top:3px;color:var(--ink-3);font-size:10.5px;line-height:1.4}.cmLaunchFields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.cmLaunchFields label{display:grid;gap:6px;color:var(--ink-2);font-size:11px;font-weight:700}.cmLaunchFields input{width:100%;height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit} .cmSwitch{display:flex;align-items:center;gap:8px;cursor:pointer}.cmSwitch input{width:16px;height:16px}.cmSwitch span{color:var(--ink);font-size:12.5px;font-weight:650} .cmConfigSection{margin-top:14px;border:1px solid var(--line);border-radius:11px;padding:0 12px}.cmConfigSection>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;list-style:none}.cmConfigSection>summary::-webkit-details-marker{display:none}.cmConfigSection>summary span:first-child{min-width:0}.cmConfigSection>summary b,.cmConfigSection>summary small{display:block}.cmConfigSection>summary b{font-size:13px}.cmConfigSection>summary small{margin-top:2px;color:var(--ink-3);font-size:10.5px}.cmSummaryHint{flex:none;color:var(--brand);font-size:11px;font-weight:650}.cmConfigSection[open] .cmSummaryHint{color:var(--ink-3)} .cmAssetGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}.cmAssetGrid section{min-width:0;border:1px solid var(--line);border-radius:11px;overflow:hidden}.cmSectionHead{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}.cmSectionHead b{flex:1;font-size:12.5px}.cmSectionHead span{color:var(--ink-3);font-size:11px} .cmAssetList{max-height:230px;overflow:auto;padding:4px 10px}.cmAssetRow{display:flex;align-items:center;gap:9px;padding:8px 2px;border-bottom:1px solid var(--line-2);cursor:pointer}.cmAssetRow:last-child{border-bottom:0}.cmAssetRow input{width:16px;height:16px;flex:none}.cmAssetRow span{min-width:0}.cmAssetRow b,.cmAssetRow small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cmAssetRow b{font-size:12px}.cmAssetRow small{margin-top:2px;color:var(--ink-3);font-size:10.5px}.cmAssetEmpty{padding:22px 8px;text-align:center;color:var(--ink-3);font-size:11.5px} .cmEngine{margin-top:14px;border:1px solid var(--line);border-radius:11px;padding:11px 12px}.cmEngine summary{cursor:pointer;font-size:13px;font-weight:700}.cmEngine>.cmSwitch{margin:12px 0 8px}.cmEngineFields{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:9px}.cmEngineFields label{color:var(--ink-3);font-size:10.5px}.cmEngineFields input{width:100%;height:34px;margin-top:5px;padding:0 9px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px}.cmRules{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}.cmRules label{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}.cmModalActions{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;margin:0;padding:14px 22px 18px;border-top:1px solid var(--line);background:var(--surface);box-shadow:0 -10px 24px color-mix(in srgb,var(--ink) 7%,transparent)} .cmDrillCrumb{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);font-size:12px}.cmDrillCrumb b{color:var(--ink)}.cmDrillCrumb span{color:var(--ink-3)} .wlManageBar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 16px;border-top:1px solid var(--line-2);background:var(--surface-2)} .wlManageBar input,.wlManageBar select{height:34px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px}.wlManageBar input{flex:1 1 230px;min-width:160px;padding:0 10px}.wlManageBar select{padding:0 28px 0 10px} .poolBatchActions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto;padding:5px 6px;border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));border-radius:9px;background:var(--brand-soft)}.poolBatchActions[hidden]{display:none!important}.poolBatchActions>span{padding:0 4px;color:var(--brand);font-size:11px;white-space:nowrap}.poolBatchActions>span b{font-family:var(--font-mono)}.poolBatchActions select{min-width:135px} .wlManagedRow{flex-wrap:wrap;min-width:0}.wlManagedRow[hidden],.wlPickerRow[hidden],.cmAssetRow[hidden]{display:none!important}.wlManagedRow>.anaWlCheck{flex:0 0 16px;width:16px;height:16px}.wlAccountId{flex:0 1 180px;overflow:hidden;text-overflow:ellipsis;font-size:11.5px;color:var(--ink-2)}.wlAccountName{flex:1 1 180px;font-weight:600}.wlCountries{display:inline-flex;align-items:center;gap:4px;flex:none}.wlCountries b{padding:2px 6px;border-radius:5px;background:var(--brand-soft);color:var(--brand);font-family:var(--font-mono);font-size:10px}.wlCountries.empty{color:var(--ink-3);font-size:11px}.wlManagedRow .pill{flex:none} .anaWlMaster .wlManageBar{display:grid;align-items:center;gap:8px} .wlFilterBar{display:grid;grid-template-columns:minmax(240px,1fr) 160px auto;align-items:center;gap:8px;width:100%;min-width:0}.wlFilterBar input,.wlFilterBar select,.wlFilterBar>.btn{box-sizing:border-box;width:100%;min-width:0;height:38px;min-height:38px;margin:0} .anaWlMaster .poolBatchActions{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(180px,240px) auto auto auto;align-items:center;gap:7px;width:100%;min-width:0;margin:0;padding:7px 8px}.anaWlMaster .poolBatchActions select{box-sizing:border-box;width:100%;min-width:0;height:38px}.anaWlMaster .poolBatchActions>.btn,.anaWlMaster .poolBatchActions>.lkbtn{display:inline-flex;min-height:38px;align-items:center;justify-content:center} .accountWlManagedRow{display:grid;grid-template-columns:32px minmax(210px,1.4fr) minmax(185px,.85fr) minmax(135px,.7fr) minmax(350px,auto);align-items:center;gap:12px;min-width:0}.anaWlSelect{display:grid;width:28px;height:28px;place-items:center;border-radius:7px;cursor:pointer}.anaWlSelect:hover{background:var(--surface-2)}.anaWlSelect:focus-within{outline:3px solid var(--brand-soft);outline-offset:1px}.anaWlSelect>.anaWlCheck{width:16px;height:16px;margin:0}.accountWlManagedRow>.wlAccountName,.accountWlManagedRow>.wlAccountId{min-width:0;max-width:none}.accountWlManagedRow>.pill{justify-self:start}.wlAccountActions{display:flex;min-width:0;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}.accountWlManagedRow .accountBillActions{margin:0}.wlAccountActions .lkbtn{display:inline-flex;min-height:32px;align-items:center}.wlAccountManageActions{display:inline-flex;align-items:center;gap:2px;margin-left:2px;padding-left:8px;border-left:1px solid var(--line)} .metaBatchModal{display:grid;gap:16px;width:min(620px,calc(100vw - 52px))}.metaBatchHead{display:flex;align-items:flex-start;gap:12px}.metaBatchIcon{display:grid;width:40px;height:40px;flex:0 0 40px;place-items:center;border-radius:11px;background:var(--brand-soft);color:var(--brand);font-size:22px;font-weight:800}.metaBatchHead h2{margin:1px 0 5px;font-size:17px}.metaBatchHead p{margin:0;color:var(--ink-2);font-size:12px;line-height:1.55}.metaBatchLinks{display:grid;max-height:min(42vh,340px);overflow:auto;border:1px solid var(--line);border-radius:11px}.metaBatchFallbackLink{display:flex;min-width:0;min-height:52px;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px;border-bottom:1px solid var(--line-2);color:var(--ink);text-decoration:none}.metaBatchFallbackLink:last-child{border-bottom:0}.metaBatchFallbackLink:hover{background:var(--surface-2);text-decoration:none}.metaBatchFallbackLink span{display:grid;min-width:0}.metaBatchFallbackLink b,.metaBatchFallbackLink small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.metaBatchFallbackLink b{font-size:12.5px}.metaBatchFallbackLink small{margin-top:3px;color:var(--ink-3);font-family:var(--font-mono);font-size:10.5px}.metaBatchFallbackLink strong{flex:none;color:var(--brand);font-size:11.5px}.metaBatchActions{display:flex;justify-content:flex-end;gap:8px} .wlAddModal{width:min(820px,calc(100vw - 72px));max-width:100%}.wlAddGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:16px;margin:14px 0}.wlAddGrid>section{min-width:0;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}.wlPickerHead{display:flex;align-items:center;gap:10px;margin-bottom:8px}.wlPickerHead b{flex:1;font-size:12.5px}.wlPickerHead input{width:min(220px,55%);height:34px;padding:0 9px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit}.wlPicker{max-height:330px;overflow:auto;padding:0 4px}.wlPickerAll,.wlPickerRow{display:flex;align-items:center;gap:9px;padding:8px 4px;border-bottom:1px solid var(--line-2);cursor:pointer}.wlPickerAll{position:sticky;top:0;z-index:1;background:var(--surface-2);font-size:12px;font-weight:650}.wlPickerRow input,.wlPickerAll input{flex:none;width:16px;height:16px}.wlPickerRow span{min-width:0}.wlPickerRow b,.wlPickerRow small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wlPickerRow b{font-size:12px}.wlPickerRow small{margin-top:2px;color:var(--ink-3);font-family:var(--font-mono);font-size:10.5px}.wlCountryPick{display:flex;flex-wrap:wrap;gap:7px}.wlCountryPick label{display:flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:12px;cursor:pointer}.wlCountryPick input{width:15px;height:15px}.wlCountryPick b{font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}.wlBatchResult{display:none;margin:0 0 12px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-size:12px}.wlBatchResult:not(:empty){display:block}.wlBatchResult.ok{border-color:var(--go-line);background:var(--go-soft);color:var(--go)}.wlBatchResult.warn{border-color:var(--watch-line);background:var(--watch-soft);color:var(--watch)}.wlBatchResult b,.wlBatchResult small{display:block}.wlBatchResult small{margin-top:4px;line-height:1.5} .cmSectionHead{align-items:flex-start;flex-wrap:wrap}.cmSectionHead>div:first-child{flex:1 1 120px;min-width:0}.cmSectionHead>div:first-child b,.cmSectionHead>div:first-child span{display:block}.cmSectionHead>div:first-child span{margin-top:2px}.cmAssetTools{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:1 1 230px}.cmAssetTools input{flex:1 1 110px;min-width:90px;height:30px;padding:0 8px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:11.5px}.cmAssetTools .lkbtn{white-space:nowrap;font-size:11px} .cmAuthExplain{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.cmAuthExplain>div{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}.cmAuthExplain span{display:block;color:var(--ink-3);font-size:11px}.cmAuthExplain b{display:block;margin-top:4px;font-size:22px}.cmAuthExplain .ok b{color:var(--go)}.cmAuthExplain .bad b{color:var(--stop)}.cmFixSteps{display:grid;gap:6px;padding:12px;border:1px solid var(--line);border-radius:10px}.cmFixSteps b{font-size:12px}.cmFixSteps span{color:var(--ink-2);font-size:11.5px;line-height:1.45} @media(min-width:641px) and (max-width:1180px){.anaWlMaster>.anaWlHead{grid-template-columns:auto auto auto minmax(0,1fr)}.anaWlMaster .anaWlHint{display:none}.anaWlMaster .anaWlQuickActions{grid-column:1/-1;justify-content:flex-start}.anaWlMaster .poolBatchActions{grid-template-columns:minmax(150px,1fr) minmax(170px,220px) auto auto auto}.anaWlMaster .poolBatchActions>span{grid-column:1/-1}.accountWlManagedRow{grid-template-columns:20px minmax(180px,1fr) minmax(165px,.85fr) minmax(130px,auto);row-gap:7px}.wlAccountActions{grid-column:2/-1;justify-content:flex-end}} @media(max-width:900px){.cmOverview{grid-template-columns:repeat(2,minmax(0,1fr))}.cmOverview>div:nth-child(2){border-right:0}.cmOverview>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.cmProfileTop{grid-template-columns:1fr}.cmLaunchFields{grid-template-columns:1fr}.cmAssetGrid{grid-template-columns:1fr}.cmEngineFields{grid-template-columns:repeat(2,minmax(120px,1fr))}.cmCountryGrid{grid-template-columns:1fr}} @media(max-width:640px){.cmTitle,.cmCountryHead{align-items:flex-start;flex-direction:column}.cmQuickActions,.cmCountryActions,.cmCountryActions .btn{width:100%}.cmQuickActions{display:grid;grid-template-columns:1fr 1fr}.cmQuickActions .primary{grid-column:1/-1}.cmCountryActions{display:grid;grid-template-columns:1fr 1fr}.cmTabs{padding-left:14px;padding-right:14px}.cmOverview{grid-template-columns:1fr}.cmOverview>div{border-right:0;border-bottom:1px solid var(--line)}.cmOverview>div:last-child{border-bottom:0}.cmCountryGrid{padding:12px}.cmCountryFacts{grid-template-columns:1fr}.cmCountryIssue{min-height:0}.cmCountryCardActions{display:grid;grid-template-columns:1fr 1fr}.cmCountryCardActions .btn{width:100%}.cmBudgetLine{align-items:flex-start;flex-direction:column}.cmBudgetLine b{text-align:left}.cmAssignedGrid{grid-template-columns:1fr}.modal.cmHost{width:calc(100vw - 20px);height:calc(100dvh - 20px);max-height:none}.cmModal>.head{padding:17px 17px 0}.cmModalBody{padding:12px 17px 14px}.cmEngineFields{grid-template-columns:1fr 1fr}.cmModalActions{grid-template-columns:1fr 1fr;padding:12px 17px 15px}.cmModalActions span{display:none}.cmModalActions .danger{grid-column:1/-1;grid-row:2}.cmNotice{margin-left:14px;margin-right:14px}.wlManageBar{padding:10px 12px}.wlManageBar input{flex-basis:100%}.wlFilterBar{grid-template-columns:1fr 1fr}.wlFilterBar input{grid-column:1/-1}.anaWlMaster .poolBatchActions{grid-template-columns:1fr 1fr}.anaWlMaster .poolBatchActions>span,.anaWlMaster .poolBatchActions select{grid-column:1/-1;width:100%}.anaWlMaster .poolBatchActions .danger{grid-column:1/-1}.poolBatchActions{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-left:0}.poolBatchActions>span,.poolBatchActions select{grid-column:1/-1;width:100%}.poolBatchActions .danger{grid-column:1/-1}.anaWlMaster>.anaWlHead{grid-template-columns:auto 1fr auto}.anaWlMaster .anaWlHint{display:none}.anaWlMaster .anaWlQuickActions{grid-column:1/-1}.anaWlQuickActions{display:grid;grid-template-columns:1fr;width:100%}.anaWlQuickActions .btn{width:100%}.wlManagedRow{padding:10px 12px}.wlAccountName{order:2;flex:1 1 calc(100% - 30px)}.wlAccountId{order:3;flex:1 1 100%;padding-left:26px}.wlManagedRow>.pill{order:4;margin-left:26px}.wlManagedRow>.accountBillActions{order:5;margin-left:26px}.wlManagedRow>.lkbtn{order:6}.accountWlManagedRow{grid-template-columns:20px minmax(0,1fr);gap:6px 10px}.accountWlManagedRow>.anaWlCheck{grid-column:1;grid-row:1}.accountWlManagedRow>.wlAccountName{grid-column:2;grid-row:1;order:initial}.accountWlManagedRow>.wlAccountId{grid-column:2;grid-row:2;order:initial;padding-left:0}.accountWlManagedRow>.pill{grid-column:2;grid-row:3;order:initial;margin-left:0}.accountWlManagedRow>.wlAccountActions{grid-column:1/-1;grid-row:4;display:flex;flex-wrap:wrap;justify-content:flex-start;order:initial}.metaBatchModal{width:100%}.metaBatchActions{display:grid;grid-template-columns:1fr}.metaBatchActions .btn{width:100%}.wlAddModal{width:100%}.wlAddGrid{grid-template-columns:1fr}.wlPicker{max-height:250px}.cmAssetTools{justify-content:flex-start;flex-basis:100%}} @media(min-width:641px) and (max-width:1180px){.anaWlMaster>.anaWlHead{grid-template-columns:auto minmax(0,1fr)}.accountWlManagedRow{grid-template-columns:32px minmax(180px,1fr) minmax(165px,.85fr) minmax(130px,auto)}} @media(max-width:640px){.anaWlMaster>.anaWlHead{grid-template-columns:1fr}.anaWlMaster .anaWlQuickActions{grid-column:1}.anaWlQuickActions{grid-template-columns:1fr 1fr}.anaWlQuickActions .btn:only-child,.anaWlQuickActions .ghost{grid-column:1/-1}.accountWlManagedRow{grid-template-columns:44px minmax(0,1fr)}.accountWlManagedRow>.anaWlSelect{grid-column:1;grid-row:1;width:44px;height:44px}.accountWlManagedRow>.wlAccountName{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.35}.wlAccountActions .lkbtn{min-height:44px}.wlAccountManageActions{margin-left:0;padding-left:0;border-left:0}} @media(max-width:900px){.cmOpsFacts{grid-template-columns:repeat(2,minmax(0,1fr))}.cmOpsFacts>div:nth-child(2){border-right:0}.cmOpsFacts>div:nth-child(-n+2){border-bottom:1px solid var(--line-2)}} @media(max-width:640px){.cmOpsTop,.cmOps.emptyState{align-items:stretch;flex-direction:column}.cmOpsActions{display:grid;grid-template-columns:1fr 1fr;width:100%}.cmOpsActions .btn:first-child{grid-column:1/-1}.cmOpsActions .btn{width:100%}.cmOpsFacts{grid-template-columns:1fr 1fr}.cmOpsFacts>div{border-bottom:1px solid var(--line-2)}.cmOpsFacts>div:nth-last-child(-n+2){border-bottom:0}} @media(max-width:430px){.cmQuickActions{grid-template-columns:1fr}.cmQuickActions .primary{grid-column:auto}.cmCountryCardActions{grid-template-columns:1fr}.cmAuthExplain{grid-template-columns:1fr 1fr}} } @layer unified{ /* kedu-ui-v4 · stable shell, design tokens and responsive behavior */ :root{ color-scheme:light; --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f7f9fc; --surface-3:#eef2f6; --ink:#172033; --ink-2:#48566a; --ink-3:#6f7d92; --ink-4:#98a3b3; --line:#e2e7ee; --line-2:#edf1f5; --line-strong:#cbd3df; --brand:#5753df; --brand-2:#4541c6; --brand-soft:#efefff; --brand-ink:#403cb7; --accent:#0f8b83; --go:#137a55; --go-soft:#eaf7f1; --go-line:#c5e7d7; --watch:#9d610b; --watch-soft:#fff6e8; --watch-line:#efd7b0; --stop:#c93746; --stop-soft:#fff0f2; --stop-line:#efc8cd; --info:#285fc5; --info-soft:#edf3ff; --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:18px; --sh-1:0 1px 2px rgba(16,24,40,.05); --sh-2:0 10px 28px -22px rgba(16,24,40,.36); --sh-3:0 28px 72px -32px rgba(16,24,40,.5); --side-w:236px; --line2:var(--line-2); --card:var(--surface); --card2:var(--surface-2); --muted:var(--ink-3); } html[data-theme="dark"]{ color-scheme:dark; --bg:#0e141d; --surface:#161e29; --surface-2:#1c2633; --surface-3:#253141; --ink:#f1f4f8; --ink-2:#c0c8d4; --ink-3:#95a0b1; --ink-4:#748094; --line:#293547; --line-2:#222d3b; --line-strong:#3b4a5f; --brand:#8a86ff; --brand-2:#716cf0; --brand-soft:#292a4d; --brand-ink:#c0beff; --accent:#45c2b8; --go:#48cb96; --go-soft:#112b22; --go-line:#28503f; --watch:#e3a44d; --watch-soft:#2c2215; --watch-line:#4e3c22; --stop:#ff7882; --stop-soft:#301a20; --stop-line:#57313a; --info:#7aa7ff; --info-soft:#192841; --sh-1:0 1px 2px rgba(0,0,0,.28); --sh-2:0 12px 30px -22px rgba(0,0,0,.85); --sh-3:0 32px 82px -32px rgba(0,0,0,.95); } html{ min-height:100%; height:auto; max-width:100%; overflow-x:clip; background:var(--bg); scroll-padding-top:76px; } body{ min-height:100%; height:auto; max-width:100%; overflow-x:clip; overflow-y:visible; background:var(--bg); color:var(--ink); letter-spacing:0; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } body::before{content:none} body.nav-lock{overflow:hidden} [hidden]{display:none} ::selection{background:color-mix(in srgb,var(--brand) 20%,transparent)} button,a,input,select,textarea{-webkit-tap-highlight-color:transparent} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid color-mix(in srgb,var(--brand) 20%,transparent); outline-offset:2px; } /* Application shell */ .app{ display:flex; min-width:0; min-height:100dvh; background:var(--bg); } .main{ min-width:0; width:auto; flex:1 1 auto; } .sidebar{ position:sticky; top:0; z-index:40; width:var(--side-w); height:100dvh; flex:0 0 var(--side-w); padding:16px 12px 13px; gap:4px; overflow-y:auto; overscroll-behavior:contain; background:var(--surface); color:var(--ink); border-right:1px solid var(--line); box-shadow:none; backdrop-filter:none; } html[data-theme="dark"] .sidebar{background:#121925} .sb-brand{ gap:10px; padding:7px 8px 17px; margin:0 0 10px; border-bottom:1px solid var(--line-2); } .sb-brand .brandMark{ width:36px; height:36px; flex-basis:36px; border-radius:10px; box-shadow:0 7px 18px -12px rgba(69,65,198,.75); } .sb-brand b{ color:var(--ink); font-size:15.5px; font-weight:760; line-height:1.15; letter-spacing:-.25px; } .sb-brand span{ display:block; margin-top:2px; color:var(--ink-3); font-size:11px; } .sidebarClose{ display:none; width:34px; height:34px; margin-left:auto; border:0; border-radius:8px; background:transparent; color:var(--ink-2); cursor:pointer; } .sb-nav{gap:3px;margin-top:0} .sb-nav button{ min-height:42px; padding:9px 10px; gap:11px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--ink-2); font-size:13.5px; font-weight:630; letter-spacing:0; box-shadow:none; transform:none; } .sb-nav button svg{width:18px;height:18px;color:var(--ink-3);opacity:1} .sb-nav button:hover{background:var(--surface-2);color:var(--ink);border-color:var(--line)} .sb-nav button:hover svg{color:var(--ink-2)} .sb-nav button.active, .sb-nav button[aria-current="page"]{ background:var(--brand-soft); color:var(--brand-ink); border-color:color-mix(in srgb,var(--brand) 18%,var(--line)); } .sb-nav button.active svg, .sb-nav button[aria-current="page"] svg{color:var(--brand)} .sb-nav button.active::before, .sb-nav button[aria-current="page"]::before{ left:-12px; top:9px; bottom:9px; width:3px; background:var(--brand); box-shadow:none; } .sb-foot{ margin-top:auto; padding:13px 9px 3px; border-top:1px solid var(--line-2); color:var(--ink-3); font-weight:550; } .sb-status{color:var(--ink-2)} .sb-ver{color:var(--ink-3)} .navBackdrop{display:none} .mobileNavBtn{display:none} /* Top bar */ .topbar{ position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--surface) 94%,transparent); border-bottom:1px solid var(--line); box-shadow:none; backdrop-filter:blur(12px) saturate(135%); } .topInner{ min-height:64px; padding:11px 24px; gap:12px; } .topTitle{min-width:0} .topTitle h1{ overflow:hidden; color:var(--ink); font-size:19px; font-weight:760; letter-spacing:-.35px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; } .topTitle .pageContext{ margin-top:2px; overflow:hidden; color:var(--ink-3); font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; } .topActions{gap:7px;flex-wrap:wrap;justify-content:flex-end} .shell{ width:100%; max-width:1480px; padding:20px 24px 56px; } /* Common surfaces and hierarchy */ .card,.step,.directive,.lpCard,.anaWl,.vital,.stat,.bucket,.kdCard,.kdKpi{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1); backdrop-filter:none; } .card,.step{padding:18px;border-radius:var(--r-lg)} .card:hover,.step:hover,.lpCard:hover,.anaWl:hover,.vital:hover,.stat:hover{ border-color:var(--line-strong); box-shadow:var(--sh-1); transform:none; } .head{align-items:center;margin-bottom:14px} .head h2{color:var(--ink);font-size:15px;font-weight:720;letter-spacing:-.15px} .desc,.hint,.subline,.fieldHelp{color:var(--ink-3)} .empty{ padding:24px 16px; border:1px dashed var(--line-strong); border-radius:var(--r-md); background:var(--surface-2); color:var(--ink-3); } .hr{border-top-color:var(--line-2)} .section{margin-bottom:16px} .grid{gap:12px} /* Controls */ .btn{ min-height:36px; height:auto; padding:8px 13px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--ink); font-size:13px; font-weight:630; line-height:1.25; box-shadow:none; transform:none; } .btn:hover{background:var(--surface-2);border-color:#b8c2d0;color:var(--ink);box-shadow:none;transform:none} html[data-theme="dark"] .btn:hover{border-color:#536176} .btn.primary,.btn.brand{background:var(--brand);border-color:var(--brand);color:#fff} .btn.primary:hover,.btn.brand:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff} .btn.danger{background:var(--stop-soft);border-color:var(--stop-line);color:var(--stop)} .btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)} .btn.ghost:hover{background:var(--surface-2);color:var(--ink)} .btn.sm{min-height:32px;padding:6px 10px;font-size:12.5px} .wlFilterBar>.btn,.anaWlMaster .poolBatchActions>.btn{height:38px;min-height:38px} .anaWlMaster .poolBatchActions>.lkbtn{min-height:38px} .btn.block{width:100%;min-height:44px} .iconbtn{ width:36px; height:36px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--ink-2); box-shadow:none; transform:none; } .iconbtn:hover{background:var(--surface-2);color:var(--ink);transform:none} .seg{ padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); box-shadow:none; } .seg button{ min-height:28px; padding:4px 10px; border-radius:6px; color:var(--ink-3); font-size:12px; font-weight:630; } .seg button:hover{color:var(--ink)} .seg button.active,.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)} input,select,textarea{ min-height:38px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--ink); box-shadow:none; } textarea{padding-top:9px;padding-bottom:9px} input::placeholder,textarea::placeholder{color:var(--ink-4)} input:hover,select:hover,textarea:hover{border-color:#b9c3d1} input:focus,select:focus,textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent); } input[type="checkbox"],input[type="radio"]{width:16px;height:16px;min-height:16px;padding:0} input[type="file"]{padding:8px} /* Tables and dense data */ .tableWrap,.anaScroll{ max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:none; } .table,table.kdTbl{min-width:700px;font-size:13px} .table thead th,table.kdTbl thead th{ padding:10px 12px; border-bottom:1px solid var(--line); background:var(--surface-2); color:var(--ink-3); font-size:10.5px; font-weight:720; letter-spacing:.035em; text-transform:none; } .table tbody td,table.kdTbl tbody td{ padding:11px 12px; border-bottom:1px solid var(--line-2); color:var(--ink-2); } .table tbody tr:hover td,table.kdTbl tbody tr:hover td{background:color-mix(in srgb,var(--brand) 3%,var(--surface))} .table .name,table.kdTbl b{color:var(--ink);font-weight:680} .table tr.rowGo{background:linear-gradient(90deg,var(--go-soft),transparent 72%)} .table tr.rowStop{background:linear-gradient(90deg,var(--stop-soft),transparent 72%)} /* Metrics, chips and dialogs */ .vital,.stat,.kdKpi{padding:15px 16px;border-radius:12px;overflow:hidden} .kdKpi.accent{background:linear-gradient(158deg,#5f57f2,#463cd4 92%);border-color:transparent;color:#fff} .kdKpi.accent .k,.kdKpi.accent .s{color:rgba(255,255,255,.84)} .kdKpi.accent .v{color:#fff} .vital::after,.stat::after,.bucket::after{display:none} .vv,.value,.bucket .v{color:var(--ink);font-size:26px;font-weight:760;letter-spacing:-.65px} .vk,.label,.bucket .k{color:var(--ink-3);font-weight:650} .chip,.pill{border-radius:999px;font-weight:650;box-shadow:none} .modalMask{background:rgba(9,14,24,.58);backdrop-filter:blur(5px)} .modal{ width:min(640px,calc(100vw - 28px)); max-height:min(88dvh,840px); padding:22px; border:1px solid var(--line-strong); border-radius:16px; background:var(--surface); box-shadow:var(--sh-3); animation:none; } .toast{ min-width:min(320px,calc(100vw - 32px)); padding:11px 16px; border-radius:10px; background:#172033; color:#fff; text-align:center; box-shadow:var(--sh-2); } .syncPill{ position:fixed; right:16px; bottom:max(16px,env(safe-area-inset-bottom)); z-index:300; display:none; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink-2); font-size:12px; font-weight:650; box-shadow:var(--sh-2); } .syncPill.is-visible{display:flex} /* Feature-specific presentation */ .agentHero{ position:relative; isolation:isolate; overflow:hidden; min-height:190px; padding:22px 42% 22px 22px; border-radius:14px; background:#121c2f; color:#fff; } .agentHero::after{ content:""; position:absolute; z-index:0; inset:0 0 0 40%; background:url("../ai-filter-engine.png?v=5.19.11") center/cover no-repeat; background-image:image-set( url("../ai-filter-engine.webp?v=5.19.11") type("image/webp"), url("../ai-filter-engine.png?v=5.19.11") type("image/png") ); opacity:.72; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 28%); } .agentHero>*{position:relative;z-index:1} .agentHero h2{color:#fff} .agentHero .subline{color:#c2ccda} .agentPipeline{gap:8px;padding:9px;border-color:var(--line);border-radius:10px;background:var(--surface-2)} /* Authentication */ .login{ height:100dvh; min-height:600px; overflow:hidden; grid-template-columns:minmax(480px,1.1fr) minmax(390px,.9fr); background:#eef2f7; } .login .brandSide{ min-width:0; min-height:0; padding:52px 58px; background: linear-gradient(90deg,rgba(7,13,28,.96),rgba(9,18,43,.78) 54%,rgba(18,25,62,.34)), url("../operations-signal-field.png?v=5.19.11") center/cover no-repeat; background-image: linear-gradient(90deg,rgba(7,13,28,.96),rgba(9,18,43,.78) 54%,rgba(18,25,62,.34)), image-set( url("../operations-signal-field.webp?v=5.19.11") type("image/webp"), url("../operations-signal-field.png?v=5.19.11") type("image/png") ); } .login .brandSide .lgMark{ width:72px; height:72px; border:1px solid rgba(255,255,255,.2); border-radius:20px; box-shadow:0 18px 38px -22px rgba(0,0,0,.72); } .login .brandSide h1{font-size:43px;letter-spacing:-1.8px} .login .brandSide .pitch{max-width:620px;color:#ced7e5;font-size:15.5px;line-height:1.7} .login .brandSide .feats{gap:9px;margin-top:22px} .login .brandSide .feats span{ padding:7px 11px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); } .login .formSide{min-height:0;overflow:auto;padding:42px;background:#f5f7fa} html[data-theme="dark"] .login .formSide{background:var(--bg)} .loginCard{ max-width:420px; padding:32px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 24px 64px -42px rgba(16,24,40,.55); backdrop-filter:none; } .loginCard .sub{margin:5px 0 24px;color:var(--ink-3)} .loginCard label{margin-top:2px} .loginCard input{height:44px;margin-bottom:15px} .loginSubmit{min-height:44px;margin-top:6px} .loginCodeWrap[hidden]{display:none} .authShell{max-width:540px;margin:40px auto} .appState{padding:48px 24px;text-align:center;color:var(--ink-3)} @media(max-width:1100px){ :root{--side-w:214px} .topInner{padding:10px 18px} .shell{padding:18px} .agentHero{padding-right:34%} } @media(max-width:980px){ .login{height:auto;min-height:100dvh;overflow:visible;grid-template-columns:1fr} .login .brandSide{display:none} .login .formSide{min-height:100dvh;padding:24px} .loginCard{max-width:440px} .loginCard .lcMarkSm{display:block} } @media(max-width:760px){ html{scroll-padding-top:70px} body.nav-lock{touch-action:none} .app{display:block} .main{width:100%} .sidebar{ position:fixed; inset:0 auto 0 0; z-index:60; width:min(84vw,304px); max-width:304px; height:100dvh; min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:14px 12px max(14px,env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; border-right:1px solid var(--line); border-bottom:0; box-shadow:18px 0 46px -28px rgba(15,23,42,.7); transform:translateX(-104%); transition:transform .2s ease; } .app.nav-open .sidebar{transform:translateX(0)} .sidebarClose{display:grid;place-items:center} .sb-brand{padding:5px 5px 14px;margin-bottom:8px} .sb-brand>div:last-of-type{display:block} .sb-nav{ display:flex; flex:1 1 auto; flex-direction:column; gap:3px; min-width:0; margin:0; padding:0; overflow:visible; } .sb-nav button{width:100%;min-height:44px;padding:9px 11px;white-space:normal} .sb-nav button span{display:inline;font-size:13.5px} .sb-nav button.active::before,.sb-nav button[aria-current="page"]::before{display:block} .sb-foot{display:flex} .navBackdrop{ position:fixed; inset:0; z-index:50; display:block; width:100%; height:100%; padding:0; border:0; background:rgba(8,13,23,.48); opacity:0; pointer-events:none; transition:opacity .2s ease; } .app.nav-open .navBackdrop{opacity:1;pointer-events:auto} .mobileNavBtn{display:inline-grid;place-items:center;flex:0 0 36px} .topbar{top:0} .topInner{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; min-height:58px; padding:9px 12px; gap:9px; } .topTitle{grid-column:2} .topTitle h1{font-size:17px} .topTitle .pageContext{display:none} .topActions{ grid-column:1 / -1; width:100%; margin-left:0; padding-bottom:0; display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:6px; overflow:visible; } .topActions .seg{ width:100%; min-width:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } .topActions .seg button{min-width:0;padding-right:7px;padding-left:7px} .topActions > .btn,.topActions > .iconbtn{flex:none} .topRefreshBtn,.topLogoutBtn{padding-right:10px;padding-left:10px} .shell{padding:13px 11px 42px} .card,.step{padding:14px;border-radius:12px} .g2,.g4,.vitals,.row,.row3{display:grid;grid-template-columns:1fr} .kdKpis,.kdCtrlKpis{grid-template-columns:repeat(2,minmax(0,1fr))} .agentHero{min-height:0;padding:17px} .agentHero::after{display:none} .agentPipeline{grid-template-columns:1fr} .modal{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:17px} .toast{bottom:max(18px,env(safe-area-inset-bottom))} .syncPill{right:10px;bottom:max(10px,env(safe-area-inset-bottom));max-width:calc(100vw - 20px)} } @media(max-width:430px){ .shell{padding-right:9px;padding-left:9px} .seg button{padding:4px 8px} .login .formSide{padding:16px} .loginCard{max-width:100%;padding:24px 20px} .topActions{grid-template-columns:minmax(0,1fr) auto auto auto} .topThemeBtn{display:inline-grid} .topRefreshBtn,.topLogoutBtn{min-width:44px;padding-right:8px;padding-left:8px} } @media(max-width:360px){ .kdKpis,.kdCtrlKpis{grid-template-columns:1fr} } .shortCountryControl{display:grid;gap:10px;margin-top:7px} .shortCountryModes{display:flex;flex-wrap:wrap;gap:8px} .shortCountryModes label,.shortCountryChoice{display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer} .shortCountryModes label:has(input:checked),.shortCountryChoice:has(input:checked){border-color:color-mix(in srgb,var(--brand) 50%,var(--line));background:var(--brand-soft);color:var(--brand-ink)} .shortCountryChoices{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:7px} .shortCountryChoices.isDisabled{opacity:.48} .shortCountryChoice b{font-family:var(--font-mono);font-size:11px} @media(max-width:760px){ .btn.sm,.cmTab,.wlManageBar input,.wlManageBar select,.poolBatchActions select,.anaWlMaster .poolBatchActions>.lkbtn,.cmLaunchFields input,.cmEngineFields input,.shortCountryModes label,.shortCountryChoice{min-height:44px} .sidebarClose,.mobileNavBtn,.topThemeBtn{width:44px;height:44px;min-width:44px;min-height:44px;flex-basis:44px} .topActions .seg button,.kdTools .kdSeg button{min-width:44px;min-height:44px} .kdTools .kdInput,#anaSearch,#anaCpa{height:44px;min-height:44px} .kdBulk .bb{height:44px;min-height:44px} .kdBulk .x{min-width:44px;min-height:44px} .cmTabs{scroll-snap-type:x proximity} .cmTab{scroll-snap-align:start} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms; animation-iteration-count:1; transition-duration:.01ms; scroll-behavior:auto; } } }