:root{--page:#fff;--surface:#fff;--text:#192b2c;--muted:#748281;--border:#e5ece9;--accent:#176e59;--accent-soft:#edf6f1;--ok:#237553;--warn:#946321;--bad:#b44c49;--radius:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--page);color:var(--text);font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-variant-numeric:tabular-nums}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}[hidden]{display:none!important}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #91c7ae;outline-offset:3px}.top{height:80px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1360px)/2));position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);z-index:10;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:750;letter-spacing:-.6px}.brand small{display:block;font-size:8px;font-weight:600;letter-spacing:2px;color:var(--muted)}.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;gap:1px;font-size:23px}.brand-mark span{font-size:16px}.top nav{display:flex;gap:32px;font-size:13px;color:var(--muted)}.top nav a:hover{color:var(--accent)}.secure{font-size:11px;color:var(--accent);display:flex;align-items:center;gap:8px}.secure i,.service-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:currentColor}main{max-width:1416px;padding:38px 28px 20px;margin:auto}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}.eyebrow{font-size:10px;color:var(--muted);font-weight:650;letter-spacing:1.7px;margin-bottom:7px}h1{font-size:32px;letter-spacing:-1px;line-height:1.4;margin:0;font-weight:650}h1 span{color:var(--accent)}.page-heading p{color:var(--muted);font-size:12px;margin:9px 0 0}.heading-actions{display:flex;gap:14px;align-items:center}.hint,.muted{color:var(--muted);font-size:12px}.service-strip{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-bottom:24px;font-size:11px}.service-item{display:inline-flex;gap:7px;align-items:center;color:var(--ok)}.service-item.bad{color:var(--bad)}.service-item b{color:var(--text);font-weight:500}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}.stat{border:1px solid var(--border);border-radius:var(--radius);padding:21px 23px;min-width:0;background:#fff;transition:box-shadow .2s}.stat:first-child{background:var(--accent-soft);border-color:#dcece2}.stat:hover{box-shadow:0 6px 24px #183b2810}.stat .label{font-size:12px;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between}.stat .value{font-size:29px;font-weight:650;line-height:1.2;letter-spacing:-1px}.stat .sub2{font-size:11px;color:var(--muted);margin-top:12px}.meter{height:4px;background:#edf1ee;border-radius:8px;margin-top:17px;overflow:hidden}.meter i{height:100%;display:block;background:var(--accent);border-radius:8px}.card{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px;overflow:hidden;min-width:0}.card-head{display:flex;align-items:center;justify-content:space-between;padding:23px 24px;gap:16px}.card-head .eyebrow{font-size:9px;margin-bottom:4px}h2{margin:0;font-size:17px;font-weight:650;letter-spacing:-.3px}.count{display:inline-block;color:var(--muted);font-size:11px;font-weight:400;margin-left:8px;letter-spacing:0}.card-foot{border-top:1px solid var(--border);padding:13px 24px;color:var(--muted);font-size:10px;display:flex;justify-content:space-between;gap:12px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}th,td{text-align:left;padding:16px 20px;border-bottom:1px solid #edf1ee;white-space:nowrap}th{font-weight:500;font-size:10px;color:var(--muted);background:#f9fbfa;position:sticky;top:0;z-index:1}tr:last-child td{border-bottom:0}tbody tr:hover{background:#fafcfb}td .muted{font-size:10px;margin-top:3px}.num{font-variant-numeric:tabular-nums}.user-cell{display:flex;align-items:center;gap:11px}.avatar{width:34px;height:34px;border:1px solid #dfeae5;border-radius:11px;background:#f1f7f3;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:11px;font-weight:600}.user-cell strong{font-size:12px;font-weight:600}.port{font-size:11px;background:#f3f6f4;border:1px solid #e6ece8;padding:3px 7px;border-radius:5px;font-family:ui-monospace,monospace}.mini-meter{width:90px;height:3px;background:#edf1ee;border-radius:5px;margin-top:8px}.mini-meter i{display:block;background:#79a58e;height:3px;border-radius:5px}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:6px;font-size:10px;line-height:1.7}.badge.ok{background:#ecf6ef;color:var(--ok)}.badge.bad{background:#fbeeed;color:var(--bad)}.badge.warn{background:#fbf5e9;color:var(--warn)}.badge.neutral{background:#f3f6f4;color:var(--muted)}.btn{padding:8px 13px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font-size:12px;transition:background .15s,border-color .15s;white-space:nowrap}.btn:hover{background:#f3f7f4;border-color:#cbdcd0}.btn.primary{background:var(--accent);border-color:var(--accent);color:white;box-shadow:0 2px 3px #17492b12}.btn.primary:hover{background:#10523f}.btn.mini{padding:6px 9px;font-size:11px}.btn.danger{border-color:transparent;color:var(--bad);background:transparent}.btn.danger:hover{background:#fbefed}.btn:disabled{opacity:.55;cursor:wait}.add-panel{margin:0 24px 20px;padding:20px;background:#f7faf8;border:1px solid var(--border);border-radius:10px}.add-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.add-row label{display:grid;gap:6px;flex:1;font-size:11px;color:var(--muted)}input,select{border:1px solid #dce5df;border-radius:8px;padding:9px 11px;background:#fff;color:var(--text);font-size:12px;min-width:0}input:focus,select:focus{outline:2px solid #d5eadc;border-color:var(--accent)}.add-row input{width:100%;min-width:210px}.note{font-size:11px;color:var(--muted);margin:10px 0 0}.warning{color:var(--warn)}.insights-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:start}.insights-grid .card{display:flex;flex-direction:column}.trend-card .card-foot{margin-top:auto}#trend{padding:8px 24px 22px;min-height:235px}.trend-chart{display:block;width:100%;height:195px}.legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;font-size:11px;color:var(--muted)}.legend i{display:inline-block;width:7px;height:7px;border-radius:3px;margin-right:6px}.source-scroll{flex:1}.source-scroll td{padding:14px 20px}.source-scroll td:nth-child(2){white-space:normal;min-width:170px}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;flex:none;animation:live-pulse 2.4s ease-out infinite}@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(35,117,83,.35)}70%{box-shadow:0 0 0 7px rgba(35,117,83,0)}100%{box-shadow:0 0 0 0 rgba(35,117,83,0)}}.live-tag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:650;letter-spacing:1px;color:var(--ok);background:#ecf6ef;border-radius:6px;padding:3px 8px}.explain{border-top:1px solid var(--border);padding:13px 24px;font-size:11px;color:var(--muted)}.explain summary{cursor:pointer;width:fit-content}.explain p{margin:8px 0 0;line-height:1.9}.filters{display:flex;gap:8px}.audit-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px 19px;gap:12px}.segments{display:flex;padding:3px;background:#f2f5f3;border-radius:8px;gap:3px}.segment{border:0;background:transparent;color:var(--muted);font-size:11px;border-radius:6px;padding:6px 13px}.segment.active{color:var(--accent);background:#fff;box-shadow:0 1px 4px #193c2212}.audit-scroll{max-height:390px}.domain-cell{display:flex;align-items:center;gap:12px}.rank{color:#9caaa1;font-size:10px;min-width:18px}.domain-text{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px}footer{display:flex;justify-content:space-between;gap:15px;color:#95a199;font-size:10px;padding:5px 0 18px}.footer-brand{letter-spacing:.5px}.empty,.trend-empty{padding:45px 24px;text-align:center;color:var(--muted);font-size:12px}.modal{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;background:#102a2460;backdrop-filter:blur(4px)}.modal-box{width:min(650px,100%);max-height:88vh;overflow:auto;padding:25px;background:#fff;border-radius:18px;box-shadow:0 24px 90px #14291f25}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.modal-head h3{font-size:16px;margin:0}.link-block{padding:15px;border:1px solid var(--border);border-radius:10px;margin-bottom:12px}.link-block .k{color:var(--muted);font-size:11px;margin-bottom:8px}.link-block .v{font-family:ui-monospace,monospace;font-size:11px;word-break:break-all;background:#f6f9f7;padding:10px;border-radius:6px}.link-block .row{margin-top:10px}.qr{text-align:center;margin:16px 0}.qr img{max-width:100%;height:auto}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:40;background:#173e30;color:white;box-shadow:0 6px 24px #18302025;border-radius:10px;padding:12px 20px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw}.toast.show{opacity:1}@media(min-width:1600px){main{padding-top:48px}}@media(max-width:1050px){.insights-grid{grid-template-columns:1fr}.cards{gap:12px}.stat{padding:18px}.stat .value{font-size:25px}.top{padding:0 24px}}@media(max-width:640px){.top{height:66px;padding:0 18px;gap:12px}.brand{font-size:18px}.brand-mark{width:32px;height:32px}.brand small{font-size:7px}.top nav{gap:15px;font-size:11px}.secure{display:none}main{padding:25px 16px 15px}.page-heading{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:19px}h1{font-size:28px}.page-heading p{font-size:10px;overflow-wrap:anywhere}.heading-actions{width:100%;justify-content:space-between}.service-strip{gap:10px 17px;font-size:10px;margin-bottom:18px}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}.stat{padding:15px}.stat .value{font-size:24px}.stat .label{font-size:11px}.stat .sub2{font-size:9px}.card{margin-bottom:18px;border-radius:12px}.card-head{padding:18px 16px}.card-head h2{font-size:16px}.card-head .count{display:block;margin:3px 0 0}.card-head .eyebrow{font-size:8px}.card-foot{padding:12px 16px;font-size:9px;flex-wrap:wrap}.insights-grid{gap:0}th,td{padding:13px 16px}.add-panel{margin:0 16px 16px;padding:15px}.add-row{display:grid;width:100%}.add-row input{min-width:0}.explain{padding:13px 16px}#trend{padding:0 16px 18px}.filters{gap:5px}.filters select{font-size:10px;padding:7px;max-width:112px}.audit-toolbar{padding:0 16px 15px;flex-wrap:wrap}.audit-toolbar .hint{font-size:10px}footer{flex-direction:column;gap:4px}.modal{padding:12px}.modal-box{padding:18px;max-height:90vh}.modal-head h3{font-size:14px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}} /* Traffic measurement and subscription guidance */ .traffic-stat .label{align-items:center;gap:8px;flex-wrap:wrap} .traffic-stat .stat-note{margin-top:6px;font-size:10px;color:var(--accent)} .traffic-stat.unavailable .value{font-size:25px;letter-spacing:0;color:var(--muted)} .traffic-info{margin:-14px 0 26px;padding:0 2px;font-size:11px;color:var(--muted)} .traffic-info summary{cursor:pointer;width:fit-content;line-height:1.9} .traffic-info summary span{margin-left:12px;color:var(--warn)} .traffic-info p{margin:8px 0 0;line-height:1.9;max-width:1100px} .traffic-meta{display:flex;gap:6px 24px;flex-wrap:wrap;margin-top:10px} .usage-foot span{display:block;margin-top:3px} .subscription-reminder{display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px 18px;padding:11px 24px;border-top:1px solid var(--border);background:#f7faf8;color:var(--accent);font-size:11px} .subscription-reminder span{color:var(--muted);font-size:10px} .subscription-note{margin-bottom:18px;padding:14px 15px;border:1px solid #dcece2;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-size:12px} .subscription-note strong{font-weight:600} .subscription-note p{margin:5px 0 0;color:#55756b;font-size:11px;line-height:1.9} @media(max-width:640px){.traffic-info{margin:-7px 0 20px;font-size:10px}.traffic-info summary span{display:block;margin-left:15px}.traffic-meta{display:grid;gap:4px}.traffic-stat .stat-note{font-size:9px}.traffic-stat.unavailable .value{font-size:20px}.subscription-reminder{padding:11px 16px;font-size:10px}} #activity .audit-toolbar{flex-wrap:wrap;padding-bottom:10px} .audit-options{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px} .audit-toggle{display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--text);font-size:12px;cursor:pointer;white-space:nowrap} .audit-toggle input{width:16px;height:16px;margin:0;padding:0;accent-color:var(--accent);cursor:pointer} .audit-filter-status{padding:0 24px 17px;color:var(--muted);font-size:11px;line-height:1.7} @media(max-width:640px){#activity .card-head{flex-wrap:wrap}#activity .filters{flex-wrap:wrap}.audit-options{width:100%;justify-content:space-between}.audit-toggle{min-height:40px}.audit-filter-status{padding:0 16px 15px;font-size:10px}} /* Account access */ .account-controls{display:flex;align-items:center;gap:14px;min-width:0} .account-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)} .auth-status{max-width:1416px;margin:0 auto;padding:48px 28px;text-align:center;color:var(--muted);font-size:13px} .auth-pending main{display:none} .login-page{min-height:100vh;background:radial-gradient(ellipse at 50% 40%,#edf6f160,transparent 68%),#fcfdfc;display:flex;flex-direction:column} .login-header{width:100%;max-width:1440px;margin:0 auto;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px} .login-main{display:flex;align-items:center;justify-content:center;flex:1;width:100%;max-width:none;padding:38px 24px 58px} .login-card{width:100%;max-width:438px;padding:39px 38px 26px;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 16px 50px #173e3008} .login-card .eyebrow{margin-bottom:12px;font-size:9px;letter-spacing:1.9px} .login-card h1{font-size:32px} .login-intro{margin:10px 0 31px;color:var(--muted);font-size:12px;line-height:1.8} #login-form{display:flex;flex-direction:column} #login-form label{font-size:12px;margin-bottom:8px;color:#526a62;font-weight:500} #login-form input{width:100%;padding:12px 14px;border-radius:9px;font-size:14px;line-height:1.5;height:48px;background:#fcfdfc} #login-form input::placeholder{color:#9caaa4;font-size:12px} #login-form input:focus{background:#fff} #login-form label[for="password"]{margin-top:21px} .login-error{min-height:21px;margin:12px 0 11px;color:var(--bad);font-size:11px;line-height:1.8;overflow-wrap:anywhere} #login-submit{min-height:46px;border-radius:9px;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:13px} #login-submit span{font-size:18px;line-height:1} .login-note{border-top:1px solid var(--border);margin-top:29px;padding-top:20px;display:flex;justify-content:center;align-items:center;gap:7px;color:var(--muted);font-size:10px} .login-note-dot{width:5px;height:5px;border-radius:50%;background:#79a58e} .login-footer{width:100%;max-width:1440px;margin:0 auto;padding:0 40px 28px;letter-spacing:.2px} @media(max-width:960px){.account-controls{gap:9px}.account-controls .secure{display:none}.top nav{gap:20px}} @media(max-width:640px){.top{height:auto;min-height:66px;display:grid;grid-template-columns:1fr auto;gap:11px 18px;padding:14px 18px 11px}.account-controls{grid-column:1/-1;border-top:1px solid var(--border);padding-top:9px;justify-content:flex-end;gap:12px}.account-name{margin-right:auto;max-width:220px}.account-controls .btn{padding:4px 9px}.login-header{padding:23px 24px}.login-header .secure{display:flex;font-size:9px;gap:6px}.login-main{padding:24px 20px 42px}.login-card{padding:31px 25px 23px;border-radius:17px}.login-card h1{font-size:29px}.login-intro{font-size:11px;margin-bottom:27px}.login-footer{padding:0 24px 23px;font-size:9px;gap:5px}html{scroll-padding-top:126px}} /* Shared dashboard refinements */ :root{--muted:#62786f} .skip-link{position:fixed;left:16px;top:-80px;z-index:99;background:var(--accent);color:white;padding:12px 18px;border-radius:8px} .skip-link:focus{top:12px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .top nav{gap:24px;white-space:nowrap} .top nav a{padding:8px 0;border-bottom:2px solid transparent} .top nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600} .refresh-meta{display:grid;gap:3px;text-align:right} .refresh-meta .hint:last-child{font-size:10px;color:#74867f} .btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px} .btn.mini{min-height:32px} .btn:disabled{cursor:not-allowed} .trend-link{color:var(--accent);border-color:#dcebe2;background:#f6fbf8} .trend-segment{cursor:pointer;transition:opacity .15s} .trend-chart.has-selection .trend-segment{opacity:.18} .trend-chart.has-selection .trend-segment.is-selected{opacity:1;stroke:#192b2c;stroke-width:1.5} .trend-segment:focus-visible{outline:2px solid #192b2c;outline-offset:2px} .trend-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:16px} .trend-legend button{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-height:36px;padding:6px 9px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font-size:11px;text-align:left} .trend-legend button.is-selected{border-color:var(--text);background:#f3f6f4;font-weight:600} .trend-legend i{flex:none;width:12px;height:12px;border-radius:3px} .trend-legend span{overflow-wrap:anywhere;min-width:0} .trend-selection{margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.7;overflow-wrap:anywhere} .trend-selection:empty{display:none} @media(max-width:640px){.trend-legend{gap:6px}.trend-legend button{min-height:44px}} .audit-retention{margin:0 24px 18px;padding:10px 13px;background:#f6f9f7;border-left:3px solid #a8caba;color:#597067;font-size:11px;line-height:1.8;border-radius:0 6px 6px 0} .audit-filter-status{padding-bottom:9px} #event-table td:nth-child(3),#domain-table td:first-child{max-width:440px;white-space:normal;overflow-wrap:anywhere} #users-table td:last-child{min-width:242px} #users-table td:last-child .btn{margin:2px 0} .traffic-layout{display:grid;grid-template-columns:224px minmax(0,1fr);gap:24px;align-items:start;margin-bottom:24px} .traffic-content{min-width:0} .traffic-sidebar{border:1px solid var(--border);border-radius:16px;background:#fff;position:sticky;top:100px;overflow:hidden} .sidebar-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 18px 14px} .sidebar-heading h2{font-size:16px} .user-search{display:block;margin:0 12px 12px} .user-search input{width:100%;font-size:12px;background:#f9fbfa;min-height:40px} .traffic-user-list{padding:0 8px 10px;max-height:calc(100vh - 340px);min-height:200px;overflow-y:auto;scrollbar-width:thin} .traffic-user{width:100%;border:1px solid transparent;background:white;display:flex;align-items:center;gap:10px;padding:11px 10px;border-radius:9px;text-align:left;color:var(--text);margin-bottom:3px;min-height:64px} .traffic-user:hover{background:#f7faf8} .traffic-user.selected{background:#edf6f1;border-color:#d9e9df} .traffic-user.selected .avatar{background:var(--accent);color:white;border-color:var(--accent)} .traffic-user .avatar{flex-shrink:0;width:32px;height:32px;border-radius:9px} .traffic-user-label{display:grid;min-width:0;gap:1px;flex:1} .traffic-user-label strong{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .traffic-user-label small{color:var(--muted);font-size:10px} .user-arrow{color:var(--accent);opacity:0} .traffic-user.selected .user-arrow{opacity:1} .sidebar-note{margin:0;padding:14px 18px;border-top:1px solid var(--border);color:var(--muted);font-size:10px;line-height:1.8} .user-empty{font-size:12px;color:var(--muted);text-align:center;padding:24px 5px} .minute-card{margin:0 0 16px} .minute-card .card-head{flex-wrap:wrap;align-items:flex-start;gap:20px;padding:24px} .minute-card h2{font-size:20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .minute-card .eyebrow{margin-bottom:8px} .section-description{font-size:12px;color:var(--muted);margin:7px 0 0} .minute-filters{display:flex;flex-wrap:wrap;gap:10px;width:100%;padding-top:16px;border-top:1px solid var(--border)} .minute-filters label{display:grid;gap:5px;font-size:11px;color:var(--muted)} .minute-filters label:first-child{flex:1;max-width:300px} .minute-filters select{min-height:38px;max-width:100%;font-size:12px} .minute-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 24px 22px;border:1px solid var(--border);border-radius:10px;background:#fcfdfc} .minute-summary>div{padding:17px 18px;border-right:1px solid var(--border);min-width:0;display:flex;flex-direction:column;gap:6px} .minute-summary>div:first-child{background:#f0f7f3;border-radius:10px 0 0 10px} .minute-summary>div:last-child{border:0} .minute-summary span{font-size:11px;color:var(--muted)} .minute-summary strong{font-size:23px;letter-spacing:-.7px;font-weight:650;line-height:1.3;overflow-wrap:anywhere} .minute-summary small{font-size:10px;color:var(--muted)} .minute-chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 24px 4px;flex-wrap:wrap} .curve-legend{display:flex;gap:20px;color:var(--muted);font-size:11px} .curve-legend span{display:inline-flex;gap:7px;align-items:center} .curve-legend i{display:inline-block;width:17px;height:3px;border-radius:2px} .line-total{background:#176e59}.line-down{background:#4680b8}.line-up{background:#b16b33} .minute-chart{margin:0 16px;min-width:0;min-height:242px;position:relative;touch-action:pan-y} .minute-chart svg{display:block;width:100%;height:auto} .minute-chart svg text{font-family:inherit;letter-spacing:0} .minute-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:260px;padding:22px;gap:10px} .minute-empty strong{font-size:15px;font-weight:600} .minute-empty p{max-width:420px;font-size:12px;color:var(--muted);margin:0;line-height:1.9} .empty-signal{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#edf6f1;color:var(--accent);font-size:36px;line-height:1} .minute-inspection{margin:0 24px 16px;padding:16px 18px;border:1px solid var(--border);border-radius:10px;background:#fbfcfb} .minute-point{min-height:82px;color:var(--text);font-size:12px} .minute-point>div:first-child{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap} .minute-point small{display:block;color:var(--muted);font-size:10px;margin-top:7px} .point-values{display:flex;gap:8px 22px;flex-wrap:wrap;color:var(--muted);font-size:11px} .point-values b{color:var(--text);font-weight:550} .minute-scrubber{display:flex;align-items:center;gap:15px;color:var(--muted);font-size:10px;padding-top:9px} .minute-scrubber input{flex:1;min-width:0;accent-color:var(--accent);padding:0;height:26px;background:transparent;cursor:ew-resize;border:0} .minute-scrubber input:disabled{cursor:default} .minute-notice{margin:0 24px 18px;padding:10px 12px;border-radius:8px;font-size:11px;line-height:1.9;background:#f1f7f3;color:#536e61} .minute-notice.has-gap{background:#faf7ef;color:#806733} .minute-details{border-top:1px solid var(--border)} .minute-details>summary{padding:13px 24px;color:var(--text);font-size:12px;cursor:pointer} .minute-details>summary span{font-size:10px;margin-left:7px} .minute-details .table-wrap{max-height:320px} .minute-details th,.minute-details td{padding:12px 16px;font-size:11px} .minute-foot{font-size:10px;flex-wrap:wrap} .sampling-help{font-size:12px;color:var(--muted);padding:0 6px} .sampling-help summary{cursor:pointer;min-height:32px;line-height:32px} .sampling-help>div{padding:5px 14px 12px;line-height:1.9} .sampling-help p{margin:10px 0;font-size:11px} .traffic-page .page-heading{margin-bottom:28px} .traffic-page .page-heading h1{font-size:30px} .page-note{margin:24px 0 0;border:1px solid var(--border);border-radius:var(--radius);padding:0} .page-note summary{padding:15px 22px} .page-note p{margin:10px 22px;font-size:11px} .mobile-user-actions,.mobile-user-delete{display:none} /* Mobile: wide data tables become labelled cards instead of scrolling sideways */ @media(max-width:780px){ .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%} .table-wrap thead{display:none} .table-wrap tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 14px;padding:15px 16px;border-bottom:1px solid #edf1ee} .table-wrap tbody tr:last-child{border-bottom:0} .table-wrap tbody tr:hover{background:transparent} .table-wrap td{padding:0;border:0;white-space:normal;min-width:0;overflow-wrap:anywhere;font-size:12px} .table-wrap td[data-label]::before{content:attr(data-label);display:block;font-size:10px;color:var(--muted);margin-bottom:3px;font-weight:400} .table-wrap td:first-child,.table-wrap td[colspan]{grid-column:1/-1} .table-wrap td[colspan]{text-align:center;padding:24px 0} .table-wrap td.row-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;min-width:0} .table-wrap td.row-actions .btn{flex:1 1 0;min-width:88px;justify-content:center;min-height:38px} .table-wrap .mini-meter{width:100%} #domain-table td:nth-child(4),#event-table td:nth-child(3),#event-table td:nth-child(5),#minute-table td:nth-child(6){grid-column:1/-1} #users .table-wrap{overflow:visible} /* A fixed column order keeps each phone user row compact and aligned. */ #users-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) 62px 62px 48px;align-items:center;gap:8px;padding:9px 12px;min-height:66px} #users-table td{width:auto;grid-column:auto} #users-table td[data-label="SS 端口"],#users-table td[data-label="H2 端口"],#users-table td[data-label="H2 服务"],#users-table td[data-label="在线连接"],#users-table .mini-meter{display:none} #users-table td[data-label="用户"]{grid-column:1;min-width:0;max-width:none} #users-table td[data-label="用户"]::before{content:none} #users-table .user-cell{min-width:0;gap:7px} #users-table .user-cell>div{min-width:0} #users-table .user-cell strong,#users-table .user-cell .muted{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #users-table td[data-label="今日用量"],#users-table td[data-label="历史累计"]{width:auto;font-size:12px;white-space:nowrap;text-align:right} #users-table td[data-label="今日用量"]{grid-column:2} #users-table td[data-label="历史累计"]{grid-column:3} #users-table td[data-label="今日用量"]::before{content:"今日"} #users-table td[data-label="历史累计"]::before{content:"累计"} #users-table td[data-label="今日用量"]::before,#users-table td[data-label="历史累计"]::before{display:block;margin:0 0 2px;font-size:10px;color:var(--muted)} #users-table td[data-label="今日用量"] .muted{display:none} #users-table td[data-label="历史累计"] .muted{display:none} #users-table td.row-actions{grid-column:4;display:flex;gap:0;margin:0;min-width:0} #users-table td.row-actions .btn{display:none} #users-table td.row-actions [data-detail]{display:inline-flex;flex:1;min-height:44px;min-width:0;padding:6px;font-size:12px} #users-table .avatar{flex:none;width:26px;height:26px;border-radius:8px;font-size:10px} #users-table .user-cell strong{font-size:12px} #users-table .user-cell strong .badge{display:block;width:fit-content;padding:0 4px;font-size:9px} #users-table td[colspan]{grid-column:1/-1} .mobile-user-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px} .mobile-user-actions .btn{min-height:44px} .mobile-user-delete{display:block;margin-top:20px;padding-top:14px;border-top:1px solid var(--border)} .mobile-user-delete .btn{min-height:44px} /* Client sources: keep each row to a couple of lines on phones */ .source-scroll tbody tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who when" "where where"} #clients-table td[data-label="用户 / 连接来源"]{grid-area:who} #clients-table td[data-label="当前连接"]{grid-area:when;text-align:right} #clients-table td[data-label="IP 归属 / 来源说明"]{grid-area:where} #clients-table td[data-label="用户 / 连接来源"]::before, #clients-table td[data-label="当前连接"]::before{content:none} #clients-table td[data-label="IP 归属 / 来源说明"]::before{content:"归属";display:inline;margin-right:4px} /* Audit filters get their own row instead of squeezing next to the title */ #activity .card-head{flex-direction:column;align-items:stretch;gap:14px} #activity .filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px} #activity .filters select{width:100%;max-width:none;min-height:42px;font-size:14px} /* Bigger tap targets inside the subscription dialog */ .modal-box .link-block .row .btn{width:100%;min-height:40px} .modal-head .btn{min-height:36px} .audit-scroll,.source-scroll,.minute-details .table-wrap{overflow:auto} .audit-scroll,.minute-details .table-wrap{max-height:70vh} } @media(min-width:1440px){.minute-card .card-head{flex-wrap:nowrap;align-items:center}.minute-filters{width:auto;border:0;padding:0;flex-wrap:nowrap}.minute-filters label:first-child{max-width:185px}.traffic-layout{grid-template-columns:232px minmax(0,1fr)}} @media(max-width:1050px){.top nav{gap:16px}.top{gap:16px}.traffic-layout{grid-template-columns:198px minmax(0,1fr);gap:16px}.minute-summary strong{font-size:20px}.minute-summary>div{padding:14px 12px}.minute-summary{margin:0 20px 18px}.minute-card .card-head{padding:20px}} @media(max-width:780px){.traffic-layout{grid-template-columns:minmax(0,1fr)}.traffic-sidebar{display:none}.minute-card .card-head{padding:22px 20px}.minute-filters label:first-child{max-width:none}.minute-card h2{font-size:19px}.top nav{gap:15px}.top .secure{display:none}.traffic-page .page-heading h1{font-size:27px}.minute-summary strong{font-size:22px}} @media(max-width:640px){.top{grid-template-columns:1fr auto;padding:12px 16px 10px;gap:12px}.top nav{grid-column:1/-1;grid-row:2;justify-content:space-between;font-size:12px;gap:12px}.account-controls{grid-column:2;grid-row:1;border:0;padding:0}.account-name{display:none}.account-controls .btn{min-height:32px;padding:6px 9px}.brand small{letter-spacing:1.5px}.refresh-meta{text-align:left}.heading-actions{gap:10px}.refresh-meta .hint:last-child{font-size:9px}.traffic-page .page-heading{gap:16px;margin-bottom:22px}.traffic-page .page-heading h1{font-size:26px;letter-spacing:-.8px}.traffic-page .page-heading p{font-size:11px}.minute-card .card-head{padding:19px 16px;gap:16px}.minute-filters{gap:9px;padding-top:12px}.minute-filters label{flex:1;min-width:0;font-size:11px}.minute-filters label:first-child{flex-basis:100%}.minute-filters select{font-size:14px;width:100%;min-height:42px}.minute-summary{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 16px 18px}.minute-summary>div{padding:15px 13px}.minute-summary>div:nth-child(2){border-right:0}.minute-summary>div:nth-child(-n+2){border-bottom:1px solid var(--border)}.minute-summary>div:first-child{border-radius:10px 0 0 0}.minute-summary strong{font-size:22px}.minute-summary small{font-size:9px}.minute-chart-head{padding:0 16px 8px}.minute-chart-head .hint{font-size:10px}.curve-legend{gap:14px}.minute-chart{margin:0 4px}.minute-inspection{margin:0 16px 14px;padding:13px}.minute-notice{margin:0 16px 16px;font-size:10px}.minute-point{min-height:96px}.point-values{gap:6px 15px;font-size:10px}.minute-details>summary{padding:13px 16px}.minute-foot{font-size:9px;gap:4px}.section-description{font-size:11px}.audit-retention{margin:0 16px 15px;font-size:10px}.top{position:sticky}.traffic-page main{padding-top:25px}.traffic-page footer{padding-top:4px}.sampling-help{padding:0 2px}.minute-empty{min-height:242px;padding:20px 16px}.minute-empty p{font-size:11px}html{scroll-padding-top:135px}} /* Traffic summary: four boxes on one row on phones (notes stay in the notice below) */ @media(max-width:640px){ .minute-summary{grid-template-columns:repeat(4,minmax(0,1fr));margin:0 12px 16px} .minute-summary>div{padding:11px 8px;gap:4px;border-right:1px solid var(--border);border-bottom:0} .minute-summary>div:nth-child(2){border-right:1px solid var(--border)} .minute-summary>div:nth-child(-n+2){border-bottom:0} .minute-summary>div:first-child{border-radius:10px 0 0 10px} .minute-summary>div:last-child{border-radius:0 10px 10px 0;border-right:0} .minute-summary span{font-size:9.5px;line-height:1.4} .minute-summary strong{font-size:clamp(11px,3.4vw,14px);letter-spacing:-.3px;overflow-wrap:anywhere} .minute-summary small{display:none} } /* Mobile readability and tap-target floor */ @media(max-width:640px){ .hint,.sub2,.stat-note,.card-foot{font-size:10px} .card-foot{line-height:1.7} .eyebrow{font-size:9.5px} .segment{min-height:38px;padding:8px 15px;font-size:12px} .audit-toggle input{width:18px;height:18px} .audit-toggle{min-height:44px} .minute-scrubber input{height:34px} .port{font-size:12px} } /* Mobile: the three traffic filters share one row (labels stay for screen readers) */ @media(max-width:640px){ .stat .sub2{font-size:10px} .minute-filters{display:grid;grid-template-columns:1.45fr 1.3fr 1fr;gap:7px;padding-top:12px} .minute-filters label{display:block;min-width:0;flex:none} .minute-filters .filter-label{display:none} .minute-filters select{width:100%;min-width:0;font-size:clamp(11px,3vw,12px);min-height:42px;padding:9px 4px} } /* Audit page: toolbar on one line, every list entry on one line */ .audit-toggle .short{display:none} @media(max-width:640px){ #activity .audit-toolbar{flex-wrap:nowrap;align-items:center;gap:8px;padding:0 14px 12px} .segments{flex:0 0 auto;gap:2px;padding:2px} .segment{padding:7px 9px;font-size:11px;min-height:34px} .audit-options{flex-wrap:nowrap;gap:10px;min-width:0} .audit-toggle{min-height:34px;font-size:11px;gap:5px} .audit-options .hint{display:none} .audit-toggle .full{display:none} .audit-toggle .short{display:inline} .audit-toggle input{width:16px;height:16px} .audit-scroll tbody tr{display:flex;flex-wrap:nowrap;align-items:center;gap:9px;padding:11px 14px} #domain-table td,#event-table td{width:auto;min-width:0;padding:0;border:0} #domain-table td[data-label]::before,#event-table td[data-label]::before{content:none} #domain-table td[data-label="域名"],#event-table td[data-label="域名"]{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #domain-table td[data-label="用户"],#domain-table td[data-label="连接次数"],#domain-table td[data-label="最后访问"], #event-table td[data-label="时间"],#event-table td[data-label="用户"],#event-table td[data-label="连接来源 IP"], #event-table td[data-label="出站"]{flex:0 0 auto;font-size:11px} #domain-table .domain-cell{min-width:0} #domain-table .domain-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #domain-table td[data-label="连接次数"]::after{content:"次";margin-left:1px;font-size:10px;color:var(--muted)} } /* Audit list: aligned columns and a slim header so rows scan cleanly */ .audit-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 24px 16px;color:var(--muted);font-size:11px;flex-wrap:wrap} .audit-meta #audit-retention{font-variant-numeric:tabular-nums;white-space:nowrap} .audit-retention{margin:0;padding:0;background:none;border:0} @media(max-width:640px){ .audit-meta{padding:0 14px 12px;font-size:10px;gap:6px} .audit-filter-status{padding:0} #domain-table thead,#event-table thead{display:block} #domain-table thead tr,#event-table thead tr{display:grid;gap:0 8px;padding:0 14px 7px;border-bottom:1px solid var(--border)} #domain-table thead tr{grid-template-columns:minmax(0,1fr) 44px 38px 52px 54px} #event-table thead tr{grid-template-columns:52px 46px minmax(0,1fr) 92px 44px} #domain-table th,#event-table th{display:block;position:static;padding:0;background:transparent;border:0;font-size:10px;font-weight:500;color:var(--muted)} #domain-table th:nth-child(3),#event-table th:last-child{text-align:right} #domain-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) 44px 38px 52px 54px;gap:0 6px;align-items:center;padding:12px 14px} #event-table tbody tr{display:grid;grid-template-columns:52px 46px minmax(0,1fr) 92px 44px;gap:0 8px;align-items:center;padding:12px 14px} /* Reset the column spans left over from the earlier stacked-card layout. The original selectors use :nth-child, so the override must match that weight. */ #domain-table td:nth-child(4),#event-table td:nth-child(3),#event-table td:nth-child(5){grid-column:auto} #domain-table td,#domain-table th,#event-table td,#event-table th{grid-column:auto} #domain-table td,#event-table td{padding:0;border:0;width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px} #domain-table td[data-label="连接次数"],#domain-table td[data-label="流量"],#event-table td[data-label="出站"]{text-align:right} #domain-table td[data-label="用户"],#event-table td[data-label="用户"]{color:var(--muted)} #domain-table td[data-label="最后访问"],#event-table td[data-label="时间"]{color:var(--muted);font-size:11px} #domain-table td[data-label="连接次数"]::after{content:none} #domain-table tbody tr:nth-child(-n+3) .rank{color:var(--accent);font-weight:650} #domain-table tbody tr:nth-child(-n+3) .domain-text{color:#0f2a2b} #domain-table .rank{min-width:20px} } /* Audit controls: filters and view controls share one line when the screen allows it and wrap to a second line when it does not. The card title repeats the page heading. */ @media(max-width:640px){ #activity{display:flex;flex-wrap:wrap;align-items:center} #activity .card-head{flex:0 1 auto;width:auto;padding:12px 0 12px 10px;gap:0} #activity .card-head>div:first-child{display:none} /* An older rule sets flex-wrap:wrap here, which stacks the two selects. */ #activity .filters{display:flex;flex-wrap:nowrap;gap:4px;width:auto} #activity .filters select{width:auto;flex:0 1 auto;font-size:11px;padding:8px 4px;min-height:36px;min-width:0} #activity .audit-toolbar{flex:1 1 auto;width:auto;padding:12px 8px 12px 0;justify-content:flex-end;gap:6px} #activity .audit-options{width:auto;gap:4px 6px} #activity .filters select{max-width:104px} #activity .segment{font-size:10px;padding:6px 6px;min-height:32px} #activity .audit-toggle{font-size:10px;min-height:32px;gap:3px} #activity .audit-toggle input{width:15px;height:15px} #activity .audit-meta,#activity #ranking-view,#activity #events-view,#activity .explain{flex:1 0 100%} #activity .audit-meta{padding-top:2px} } /* Audit tables: centred content (headers follow so the columns still read as columns) */ #domain-table th,#domain-table td,#event-table th,#event-table td{text-align:center} #domain-table .domain-cell{justify-content:center} #domain-table td[data-label="连接次数"],#domain-table td[data-label="流量"],#event-table td[data-label="出站"]{text-align:center} /* Earlier :nth-child header rules outrank a plain `#domain-table th` selector. */ #domain-table th:nth-child(3),#domain-table th:nth-child(4),#event-table th:last-child{text-align:center} /* Domains read as text, not as figures: keep that column left aligned. */ #domain-table th:first-child,#domain-table td:first-child, #event-table th:nth-child(3),#event-table td[data-label="域名"]{text-align:left} #domain-table .domain-cell{justify-content:flex-start} /* Traffic chart + point inspector: cleaner curve, structured readout */ .minute-chart svg{shape-rendering:geometricPrecision} .minute-inspection{padding:14px 16px;border-color:#e8efeb} .point-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px} .point-head strong{font-size:13px;font-weight:650;letter-spacing:-.2px} .point-head small{margin-left:auto;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums} .point-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:9px;overflow:hidden} .point-values span{display:flex;flex-direction:column;gap:3px;background:#fff;padding:9px 11px;min-width:0} .point-values i{font-style:normal;font-size:10px;color:var(--muted);white-space:nowrap} /* Never clip a measurement: wrap it inside the cell instead. */ .point-values b{font-size:13px;font-weight:600;letter-spacing:-.2px;line-height:1.3;overflow-wrap:anywhere} .point-empty{margin:0;font-size:11px;color:var(--muted);line-height:1.9} .minute-scrubber{padding-top:12px;border-top:1px solid var(--border);margin-top:12px;gap:10px} .minute-scrubber input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:22px;margin:0} .minute-scrubber input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#e7eeea} .minute-scrubber input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px #16361f2e} .minute-scrubber input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:#e7eeea} .minute-scrubber input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 1px 4px #16361f2e} .minute-scrubber input[type=range]:focus-visible{outline:2px solid #91c7ae;outline-offset:4px;border-radius:4px} @media(max-width:640px){ .point-values span{padding:8px 7px;gap:2px} .point-values i{font-size:9.5px} .point-values b{font-size:12px} .minute-inspection{margin:0 14px 14px;padding:12px 13px} .point-head{margin-bottom:9px;gap:7px} .point-head small{margin-left:0;flex-basis:100%} .minute-scrubber{padding-top:9px;margin-top:9px} } /* Audit detail view: collapsed runs read as one line */ .run-count{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:10px;font-weight:600} .domain-link{color:inherit;text-decoration:none;border-bottom:1px solid transparent} .domain-link:hover,.domain-link:focus-visible{color:var(--accent);border-bottom-color:#a9cdbb} #event-table th:last-child{text-align:center} #event-table td[data-label="流量"]{text-align:center} #event-table td[data-label="域名"]{color:var(--text)} @media(max-width:640px){ #event-table thead tr{grid-template-columns:52px 40px minmax(0,1fr) 84px 52px} #event-table tbody tr{grid-template-columns:52px 40px minmax(0,1fr) 84px 52px} /* the outbound tag is the least useful column on a phone */ #event-table td[data-label="出站"],#event-table th:nth-child(5){display:none} .run-count{padding:0 5px} } /* ---- 用户行活动状态：在用连接醒目、零值降噪（桌面与手机共用） ---- */ #users-table td.zero{color:var(--muted)} #users-table td.hot{color:var(--accent);font-weight:700} #users-table .live{display:inline-flex;align-items:center;gap:4px} #users-table .live i{flex:none;width:5px;height:5px;border-radius:50%;background:currentColor} @media(max-width:360px){ #users-table tbody tr{grid-template-columns:minmax(0,1fr) 52px 52px 44px;gap:6px;padding-left:10px;padding-right:10px} #users-table .avatar{display:none} #users-table td[data-label="今日用量"],#users-table td[data-label="历史累计"]{font-size:11px} } @media(max-width:640px){ /* 页头与卡片头部紧凑化，首屏多露出列表内容 */ .top{padding:10px 16px 8px;gap:8px 12px} main{padding-top:20px} .page-heading{gap:12px;margin-bottom:14px} h1{font-size:25px} .page-heading p{margin-top:6px} .refresh-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 8px;text-align:left} .refresh-meta .hint{font-size:10px} .refresh-meta .hint:last-child{font-size:10px} .service-strip{margin-bottom:14px} .card-head{padding:15px 16px} } /* Shared interaction states, 2026-10-10. Existing compact table layouts are retained. */ .sync-status { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid #c58c2e; background: #fff8eb; color: #805e23; font-size: 13px; line-height: 1.6; } .sync-status[hidden] { display: none; } .coverage-note { margin: 12px 20px; color: #6b7b75; font-size: 12px; line-height: 1.7; } main > .coverage-note { margin-left: 0; margin-right: 0; } .users-toolbar, .audit-search-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #edf1ee; } .search-field { display: block; min-width: 0; flex: 1; max-width: 340px; } .search-field input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; border: 1px solid #dbe5df; border-radius: 8px; background: #fff; color: #22352b; font: inherit; font-size: 13px; } .users-toolbar select { min-height: 40px; border: 1px solid #dbe5df; border-radius: 8px; background: #fff; padding: 8px 10px; font: inherit; font-size: 13px; } .search-field input:focus-visible, .users-toolbar select:focus-visible { outline: 2px solid #176e59; outline-offset: 2px; } .primary-link { border-color: #bdd8ca; background: #f6faf7; } .backup-links { margin-top: 20px; border-top: 1px solid #e4ebe6; padding-top: 16px; } .backup-links summary { cursor: pointer; font-size: 13px; color: #526c5e; padding: 8px 0; } .link-block .v:focus-visible { outline: 2px solid #176e59; outline-offset: 3px; } @media (max-width: 640px) { .users-toolbar, .audit-search-row { padding: 12px; gap: 8px; } .audit-search-row { flex-wrap: wrap; } .audit-search-row .search-field { max-width: none; flex-basis: 100%; } .coverage-note { margin: 10px 12px; font-size: 11px; } .users-toolbar input, .users-toolbar select, .audit-search-row input { min-height: 44px; font-size: 14px; } .sync-status { font-size: 12px; padding: 10px 12px; } } /* ---- 用户详情弹窗 ---- */ .detail-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 18px; padding: 16px 18px; background: #f7faf8; border: 1px solid var(--border); border-radius: 10px; } .detail-info > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; min-width: 0; } .detail-info > div span { color: var(--muted); font-size: 11px; flex: none; } .detail-actions { display: flex; gap: 10px; margin: 14px 0 2px; flex-wrap: wrap; align-items: center; } .detail-actions input { width: 190px; max-width: 100%; } .detail-act { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 14px; } .detail-act-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; } .detail-act-head strong { font-weight: 650; } .detail-act-head .muted { font-size: 11px; } .detail-fields { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .detail-fields label { display: grid; gap: 6px; font-size: 11px; color: var(--muted); } .detail-fields label input:not([type=checkbox]) { width: 220px; max-width: 100%; } .chk { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); cursor: pointer; padding: 10px 0; } .chk input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); flex: none; } .detail-table { max-height: 300px; } .detail-table th, .detail-table td { padding: 11px 16px; font-size: 11px; } .ch-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 12px; min-width: 0; } .ch-row + .ch-row { border-top: 1px dashed #eef2ef; } .ch-name { flex: none; width: 86px; font-weight: 600; font-size: 11px; } .ch-val { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .ch-pct { margin-left: auto; flex: none; width: 46px; text-align: right; font-variant-numeric: tabular-nums; } .mini-meter.over { background: #f6e3cf; } .mini-meter.over i { background: var(--warn); } /* ---- 停用行 ---- */ tr.row-paused td { background: #f5f8f5; } tr.row-paused .user-cell strong, tr.row-paused .user-cell .muted { color: #8a9791; } tr.row-paused .avatar { opacity: .55; } tr.row-paused .port { opacity: .5; } tr.row-paused .num { color: #8a9791; } tbody tr.row-paused:hover td { background: #f1f5f1; } @media (max-width: 640px) { .detail-info { grid-template-columns: 1fr; } .detail-fields label { flex: 1 1 100%; } .detail-fields label input:not([type=checkbox]) { width: 100%; } .ch-name { width: 74px; } } /* Clearflow identity: the same mark at header and browser-icon sizes. */ .brand{gap:11px} .brand .brand-mark{display:block;flex:none;width:40px;height:40px;border-radius:11px;background:transparent;box-shadow:0 3px 9px #105b4920} .brand .brand-name{display:block;font-size:23px;line-height:1.15;font-weight:650;letter-spacing:2px} .brand .brand-name small{margin-top:4px;color:#628176;font-size:8px;line-height:1.2;font-weight:600;letter-spacing:2.2px} @media(max-width:640px){ .brand{gap:9px} .brand .brand-mark{width:34px;height:34px;border-radius:10px} .brand .brand-name{font-size:20px;letter-spacing:1.5px} .brand .brand-name small{font-size:7px;letter-spacing:1.6px;margin-top:3px} } /* iPhone-width layout: keep controls readable inside a 390-430px viewport. */ @media (max-width: 430px) { body { overflow-x: hidden; } .top { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } .top nav { gap: 7px; font-size: 11px; } .top nav a { min-height: 34px; display: inline-flex; align-items: center; } .brand { gap: 8px; min-width: 0; font-size: 18px; } .brand small { font-size: 6.5px; letter-spacing: 1.2px; } .brand-mark { flex: none; } .account-controls .btn { min-height: 36px; } main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } .page-heading { gap: 12px; } .page-heading h1 { overflow-wrap: anywhere; } .heading-actions { align-items: stretch; } .refresh-meta { min-width: 0; flex: 1 1 auto; } .heading-actions > .btn { min-height: 42px; } .traffic-layout { gap: 14px; } .minute-card .card-head { padding: 16px 14px; gap: 14px; } .minute-card h2 { font-size: 18px; line-height: 1.35; } .minute-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .minute-filters select { padding-left: 8px; padding-right: 8px; text-overflow: ellipsis; } .minute-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 14px; margin-right: 14px; } .minute-summary > div { padding: 13px 10px; } .minute-summary > div:nth-child(2) { border-right: 0; } .minute-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); } .minute-summary > div:first-child { border-radius: 10px 0 0 0; } .minute-summary > div:nth-child(2) { border-radius: 0 10px 0 0; } .minute-summary > div:nth-child(3) { border-radius: 0 0 0 10px; } .minute-summary > div:last-child { border-radius: 0 0 10px 0; } .minute-summary strong { font-size: 20px; } .minute-summary small { display: block; font-size: 9px; line-height: 1.45; } .minute-chart-head { padding-left: 14px; padding-right: 14px; } .minute-chart { margin-left: 4px; margin-right: 4px; } .minute-inspection { margin-left: 14px; margin-right: 14px; padding: 12px 13px; } .point-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } .point-values span { padding: 9px 8px; } #activity .card-head { display: flex; flex-wrap: wrap; width: 100%; padding: 15px 14px 10px; gap: 10px; } #activity .card-head > div:first-child { display: block; flex: 1 1 100%; } #activity .filters { width: 100%; gap: 7px; } #activity .filters select { flex: 1 1 0; max-width: none; min-height: 42px; padding: 9px 8px; font-size: 13px; } #activity .audit-toolbar { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100%; padding: 0 14px 12px; } #activity .segments { width: 100%; } #activity .segment { flex: 1 1 0; min-height: 38px; } #activity .audit-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; } #activity .audit-toggle { min-height: 42px; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: #fff; font-size: 12px; } #activity .audit-toggle input { flex: none; } #activity .audit-toggle .full { display: inline; } #activity .audit-toggle .short { display: none; } .audit-search-row { padding-left: 14px; padding-right: 14px; } .audit-meta { padding-left: 14px; padding-right: 14px; } .login-header { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .login-header .secure { font-size: 8px; } .login-main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } .login-card { padding-left: 20px; padding-right: 20px; } .login-footer { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } } /* Phone navigation: one contained tab bar instead of four links pushed to the edges. */ @media (max-width: 640px) { .top nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; width: 100%; padding: 3px; border-radius: 10px; background: #f2f5f3; font-size: 12px; color: var(--muted); } .top nav a { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 4px; border-bottom: 0; border-radius: 8px; white-space: nowrap; } .top nav a[aria-current="page"] { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 1px 4px #193c2212; } } /* ---- 导航图标：2026-10-19 ---- */ .top nav a { display: inline-flex; align-items: center; gap: 6px; } .top nav .nav-icon { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 640px) { .top nav a { gap: 0; min-height: 40px; } .top nav a .nav-text { display: none; } .top nav .nav-icon { width: 21px; height: 21px; } } /* ---- 手机端悬浮玻璃标签栏：2026-10-19 ---- */ @media (max-width: 640px) { /* backdrop-filter 会让 .top 成为 fixed 的包含块，这里关掉才能让标签栏相对视口悬浮 */ .top { backdrop-filter: none; -webkit-backdrop-filter: none; } .top nav { position: fixed; left: 14px; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; width: auto; max-width: 480px; margin: 0 auto; padding: 6px; gap: 4px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(250, 253, 251, .58)); box-shadow: 0 16px 40px rgba(16, 40, 32, .20), 0 3px 10px rgba(16, 40, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(16, 40, 32, .05); backdrop-filter: blur(26px) saturate(190%); -webkit-backdrop-filter: blur(26px) saturate(190%); } .top nav a { min-height: 48px; border-radius: 16px; color: #64756f; transition: background .18s ease, color .18s ease, transform .12s ease; } .top nav a:active { transform: scale(.95); } .top nav a[aria-current="page"] { background: rgba(23, 110, 89, .12); color: var(--accent); box-shadow: none; } .top nav .nav-icon { width: 23px; height: 23px; } .top nav a[aria-current="page"] .nav-icon { stroke-width: 2.1; } body:not(.login-page) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .toast { bottom: calc(108px + env(safe-area-inset-bottom)); } } /* ---- 切页后聚焦标题仅用于读屏，不显示 Safari 的默认聚焦框：2026-10-19 ---- */ h1[tabindex="-1"], h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; } /* Clearflow workspace: shared visual system for all five pages. */ :root { --page: #f7f9f7; --surface: #fff; --text: #20382e; --muted: #687c71; --border: #e3eae5; --accent: #22684e; --accent-soft: #e9f2eb; --rule: #e9eeea; --soft: #f0f4f0; --radius: 18px; } html { scroll-padding-top: 100px; } body { background: var(--page); font-size: 14px; -webkit-font-smoothing: antialiased; } main { max-width: 1344px; padding: 36px 32px 24px; } .top { height: 76px; padding: 0 max(32px, calc((100vw - 1280px) / 2)); background: #fff; border-bottom: 1px solid var(--border); gap: 24px; backdrop-filter: none; -webkit-backdrop-filter: none; } .brand { gap: 10px; } .brand .brand-mark { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; } .brand .brand-name { font-size: 21px; letter-spacing: 2px; } .brand .brand-name small { font-size: 7px; letter-spacing: 2px; } .top nav { gap: 4px; padding: 4px; background: var(--soft); border-radius: 12px; } .top nav a { gap: 7px; min-height: 36px; padding: 7px 15px; border: 0; border-radius: 9px; color: var(--muted); font-size: 12px; transition: background .18s, color .18s; } .top nav a:hover { background: #e7eee7; } .top nav a[aria-current="page"] { background: #fff; color: var(--accent); box-shadow: 0 1px 4px #20382e0d; } .top nav .nav-icon { width: 16px; height: 16px; } .account-controls { gap: 12px; } .secure { font-size: 10px; color: var(--muted); } .account-name { font-size: 11px; max-width: 120px; } .page-heading { align-items: center; margin-bottom: 26px; gap: 20px; } .eyebrow { font-size: 9px; letter-spacing: 1.8px; font-weight: 600; color: var(--muted); margin-bottom: 8px; } .eyebrow::before { content: none; } h1, .traffic-page .page-heading h1 { font-size: 30px; line-height: 1.3; letter-spacing: -1px; font-weight: 650; } .page-heading p { font-size: 11px; margin-top: 8px; color: var(--muted); } .heading-actions { gap: 16px; } .refresh-meta .hint { font-size: 11px; } .card, .traffic-sidebar { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .card { margin-bottom: 30px; overflow: visible; } .card .card-head { padding: 0 0 18px; align-items: center; gap: 14px; } .card .card-head h2 { font-size: 18px; font-weight: 650; letter-spacing: -.4px; } .card-head .eyebrow { font-size: 8px; letter-spacing: 1.5px; margin-bottom: 6px; } .card-head .count { font-size: 10px; } .card-foot { padding: 12px 0; border: 0; } .btn { min-height: 38px; padding: 8px 14px; border: 1px solid #dbe5dc; border-radius: 10px; background: #fff; color: var(--text); font-size: 12px; box-shadow: 0 1px 2px #20382e04; transition: background .16s, border-color .16s; } .btn:hover { border-color: #b9cdbf; background: #f0f5f0; } .btn.primary { background: var(--accent); border-color: var(--accent); box-shadow: none; } .btn.primary:hover { background: #18533c; } .btn.mini { min-height: 32px; padding: 5px 10px; font-size: 11px; background: transparent; border-color: transparent; box-shadow: none; } .btn.mini:hover { background: var(--soft); } .btn.danger { background: transparent; border-color: transparent; } .btn:active { transform: translateY(1px); } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #4f9470; outline-offset: 3px; } input, select, .users-toolbar select, .search-field input { min-height: 40px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 12px; box-shadow: none; } input::placeholder { color: #7c8b80; } input:focus, select:focus { background: #fff; border-color: #7da88c; outline: 2px solid #dbeadd; } .cards { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) repeat(2, minmax(0, .9fr)); gap: 0; padding: 28px; margin: 0 0 16px; border-radius: 20px; background: #eaf1e9; } .stat, .stat:first-child { min-width: 0; padding: 0 26px; border: 0; border-radius: 0; background: transparent; } .stat:first-child { padding-left: 0; } .stat:last-child { padding-right: 0; } .stat + .stat { border-left: 1px solid #d5e2d6; } .stat:hover { box-shadow: none; } .stat .label { margin-bottom: 12px; font-size: 11px; color: #58705f; } .stat .value { font-size: 34px; line-height: 1.1; font-weight: 650; letter-spacing: -1.3px; } .stat:first-child .value { color: var(--accent); font-size: 42px; } .stat .sub2 { margin-top: 10px; font-size: 10px; line-height: 1.6; color: #617666; } .traffic-stat .stat-note { color: #617666; font-size: 9px; margin-top: 4px; } .stat .meter { height: 3px; margin-top: 16px; background: #d4e1d5; } .stat .meter i { background: #709b7d; } .service-strip { gap: 7px; margin-bottom: 30px; } .service-item { gap: 6px; padding: 5px 9px; border-radius: 6px; background: #edf2ed; color: var(--ok); font-size: 10px; } .service-item b { font-size: 10px; font-weight: 600; } .service-detail { color: #667b6d; } .service-item.bad { background: #f9eeeb; } .service-item.bad .service-detail { color: var(--bad); } .service-dot { width: 5px; height: 5px; flex: none; } .insights-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } .insights-grid > .card { padding-top: 20px; border-top: 1px solid #dfe7df; } #trend { padding: 10px 0 0; min-height: 240px; } .trend-chart { height: auto; aspect-ratio: 480 / 210; } .trend-legend { justify-content: center; gap: 6px; margin-top: 20px; } .trend-legend button { min-height: 30px; padding: 4px 8px; border: 0; background: transparent; border-radius: 7px; font-size: 10px; } .trend-legend button:hover { background: #eaf0e9; } .trend-legend button.is-selected { background: #dfebdf; color: var(--accent); } .trend-legend i { width: 8px; height: 8px; border-radius: 3px; } .badge { border-radius: 6px; font-size: 10px; } .badge.neutral { background: #eaf0e9; color: #58705f; } .live-tag { gap: 5px; padding: 2px 6px; font-size: 8px; border-radius: 5px; } .live-dot { width: 5px; height: 5px; animation: none; } .source-scroll { max-height: none; overflow: visible; } .table-wrap { border: 0; } table { font-size: 12px; } th { background: var(--page); color: var(--muted); font-size: 10px; font-weight: 500; } th, td { border-bottom: 1px solid var(--rule); padding: 15px 16px; } tbody tr:hover { background: #eef3ed; } .source-scroll th, .source-scroll td { padding: 13px 12px; } .source-scroll th:first-child, .source-scroll td:first-child { padding-left: 0; } .source-scroll th:last-child, .source-scroll td:last-child { padding-right: 0; } .source-scroll td:nth-child(2) { min-width: 0; } td .muted { color: #6b7d70; font-size: 10px; } .avatar { border: 0; border-radius: 10px; background: #e9f0e6; color: #486d51; } .user-cell strong { font-weight: 600; } .port { border: 0; background: #eaf0e9; border-radius: 5px; } #users .card-head { padding-bottom: 18px; } .users-toolbar, .audit-search-row { padding: 0 0 16px; gap: 10px; border-bottom: 1px solid var(--border); } .users-toolbar .search-field { max-width: 360px; } .users-toolbar select { margin-left: auto; } .add-panel { margin: 0 0 18px; padding: 20px; background: #eef3ed; border: 0; border-radius: 12px; } .subscription-reminder { padding: 12px 0; background: transparent; font-size: 10px; border-top: 1px solid var(--border); } #activity { display: block; } #activity .card-head { padding: 0 0 18px; } .filters { gap: 8px; } .filters select { min-width: 140px; padding: 8px 12px; } #activity .audit-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 16px; } .segments { background: #eaf0e9; padding: 3px; gap: 3px; border-radius: 10px; } .segment { min-height: 34px; padding: 7px 16px; border-radius: 7px; font-size: 11px; } .segment.active { background: #fff; color: var(--accent); box-shadow: 0 1px 3px #20382e0a; } .audit-toggle { font-size: 11px; gap: 7px; min-height: 36px; } .audit-toggle input { min-height: 0; } .audit-meta { padding: 12px 0; font-size: 10px; gap: 8px; } .audit-scroll { max-height: 520px; } .audit-search-row .search-field { max-width: 360px; } .traffic-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; } .traffic-sidebar { top: 100px; padding: 0 20px 0 0; border-right: 1px solid var(--border); overflow: visible; } .sidebar-heading { padding: 0 0 16px; } .sidebar-heading h2 { font-size: 14px; } .user-search { margin: 0 0 14px; } .user-search input { background: #fff; } .traffic-user-list { max-height: 600px; padding: 0; } .traffic-user { border: 0; border-radius: 10px; background: transparent; padding: 10px; margin-bottom: 3px; } .traffic-user:hover { background: #edf2ea; } .traffic-user.selected { border-color: transparent; background: #e5eee2; } .traffic-user-label strong { font-size: 12px; } .sidebar-note { padding: 12px 0; font-size: 10px; } .card.minute-card .card-head { padding: 0 0 22px; gap: 18px; } .minute-filters { width: auto; border: 0; padding: 0; gap: 8px; flex-wrap: nowrap; } .minute-filters label { gap: 6px; } .minute-filters label:first-child { max-width: 210px; } .minute-filters select { min-width: 130px; } .minute-summary { margin: 0 0 24px; padding: 20px; gap: 20px; background: #eaf1e9; border: 0; border-radius: 14px; } .minute-summary > div, .minute-summary > div:first-child { border: 0; padding: 0; border-radius: 0; background: transparent; gap: 7px; } .minute-summary span { font-size: 10px; color: #58705f; } .minute-summary strong { font-size: 25px; font-weight: 650; letter-spacing: -.7px; } .minute-summary small { color: #617666; font-size: 9px; } .minute-chart-head { padding: 0 0 14px; } .curve-legend { gap: 16px; font-size: 10px; } .minute-chart { margin: 0 -8px; } .minute-inspection { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; margin: 20px 0 0; padding: 16px 0 0; } .point-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border: 0; background: transparent; } .point-values span { padding: 0; background: transparent; } .point-values b { font-size: 15px; } .minute-point { min-height: 0; } .modal { background: #18332655; backdrop-filter: blur(5px); padding: 24px; } .modal-box { width: min(660px, 100%); border: 1px solid #e3eae5; padding: 26px; border-radius: 20px; box-shadow: 0 24px 100px #18332626; } .detail-info { border: 0; padding: 16px; border-radius: 12px; background: var(--soft); } .link-block { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0; padding: 16px 0; } .link-block .v { background: var(--soft); border-radius: 8px; } .subscription-note { background: var(--accent-soft); border: 0; border-radius: 12px; } footer { border-top: 1px solid var(--border); margin-top: 8px; padding: 18px 0 8px; font-size: 10px; color: var(--muted); } .footer-brand { font-weight: 600; } .login-page { background: #f2f6f1; min-height: 100svh; } .login-header { max-width: 1280px; padding: 30px 32px; } .login-main { width: 100%; max-width: 1110px; padding: 50px 32px 70px; display: grid; grid-template-columns: 1fr 400px; gap: 100px; align-items: center; } .login-story { min-width: 0; padding: 16px 0; } .login-story .eyebrow { font-size: 9px; letter-spacing: 2px; margin-bottom: 24px; } .login-story h2 { font-size: 44px; line-height: 1.5; font-weight: 550; letter-spacing: -1.8px; } .login-story p { margin: 20px 0 0; font-size: 13px; color: var(--muted); } .login-river { display: block; width: 100%; height: auto; margin: 10px 0 16px; } .story-caption { font-size: 8px; letter-spacing: 1.7px; color: #708575; } .login-card { max-width: none; padding: 34px; border: 1px solid #e7eee5; border-radius: 22px; background: #fff; box-shadow: 0 12px 48px #29483406; } .login-card h1 { font-size: 27px; margin: 0 0 28px; } .login-card .eyebrow { font-size: 8px; margin-bottom: 9px; } #login-form label { font-size: 12px; color: var(--text); } #login-form input { height: 46px; padding: 11px 13px; background: #fafcf9; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; } #login-form input:focus { background: #fff; } #login-form label[for="password"] { margin-top: 20px; } #login-submit { min-height: 46px; border-radius: 10px; font-size: 12px; } .login-error { margin: 8px 0 10px; min-height: 20px; } .login-note { font-size: 10px; padding-top: 18px; margin-top: 24px; } .login-footer { max-width: 1216px; padding: 22px 0 28px; border-top: 1px solid #dfe7db; } @media (max-width: 1100px) { .account-controls .secure { display: none; } .top { gap: 16px; padding: 0 24px; } .top nav a { padding: 7px 11px; } .account-name { max-width: 90px; } .cards { padding: 24px; } .stat, .stat:first-child { padding-left: 18px; padding-right: 18px; } .stat:first-child { padding-left: 0; } .stat:last-child { padding-right: 0; } .stat .value { font-size: 28px; } .stat:first-child .value { font-size: 36px; } .insights-grid { grid-template-columns: 1fr; gap: 0; } .trend-chart { max-height: 300px; } .traffic-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 24px; } .minute-summary { gap: 14px; } .minute-summary strong { font-size: 22px; } .login-main { gap: 50px; } } @media (max-width: 780px) { main { padding: 28px 24px 20px; } .top { gap: 12px; } .top nav a { padding: 7px 9px; } .account-name { display: none; } .top .brand .brand-name small { display: none; } .traffic-layout { grid-template-columns: minmax(0, 1fr); } .traffic-sidebar { display: none; } .minute-filters { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .minute-filters label:first-child { max-width: none; } .minute-filters select { min-width: 0; width: 100%; } .login-main { display: flex; justify-content: center; padding: 30px 24px 54px; } .login-story { display: none; } .login-card { max-width: 400px; } .login-footer { margin: 0 24px; width: auto; } } @media (max-width: 640px) { html { scroll-padding-top: 80px; } body:not(.login-page) { padding-bottom: calc(90px + env(safe-area-inset-bottom)); } main, .traffic-page main { padding: 24px max(18px, env(safe-area-inset-left)) 16px max(18px, env(safe-area-inset-right)); } .top { height: 66px; min-height: 66px; display: flex; padding: 0 max(18px, env(safe-area-inset-left)) 0 max(18px, env(safe-area-inset-right)); gap: 12px; } .top .brand .brand-mark { width: 33px; height: 33px; } .top .brand .brand-name { font-size: 19px; } .top .brand .brand-name small { display: block; font-size: 6px; letter-spacing: 1.8px; } .account-controls { margin-left: auto; padding: 0; border: 0; } .account-controls .btn { min-height: 36px; font-size: 10px; padding: 7px 9px; } .top nav { position: fixed; z-index: 40; left: 18px; right: 18px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: 440px; width: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 5px; gap: 3px; border: 1px solid #e3eae2; border-radius: 21px; background: #fffffff5; box-shadow: 0 6px 30px #20382e17, 0 1px 3px #20382e06; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .top nav a { flex-direction: column; gap: 4px; min-height: 52px; padding: 6px 2px; border-radius: 15px; line-height: 1.2; } .top nav .nav-icon { width: 21px; height: 21px; stroke-width: 1.8; } .top nav a .nav-text { display: block; font-size: 9px; } .top nav a[aria-current="page"] { color: var(--accent); background: #eaf2e8; box-shadow: none; } .top nav a[aria-current="page"] .nav-icon { stroke-width: 2; } .page-heading, .traffic-page .page-heading { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin-bottom: 22px; } .page-heading > div:first-child { min-width: 0; } .page-heading .eyebrow { font-size: 8px; letter-spacing: 1.5px; margin-bottom: 7px; } h1, .page-heading h1, .traffic-page .page-heading h1 { font-size: 26px; letter-spacing: -.8px; } .page-heading p { font-size: 9px; line-height: 1.7; margin-top: 8px; } .heading-actions { width: auto; margin-left: auto; gap: 8px; align-items: center; } .refresh-meta { display: block; flex: none; text-align: right; } .refresh-meta .hint { font-size: 9px; } .heading-actions > .btn { min-height: 36px; padding: 7px 10px; font-size: 10px; } #overview .heading-actions, main:has(#users) .heading-actions { width: 100%; justify-content: space-between; margin: 0; } #overview .refresh-meta, main:has(#users) .refresh-meta { text-align: left; } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 22px; gap: 24px 20px; margin: 0 0 14px; border-radius: 17px; } .stat, .stat:first-child, .stat:last-child { grid-column: auto; padding: 0; border: 0; } .stat + .stat { border-left: 0; } .stat .label { font-size: 10px; margin-bottom: 8px; } .stat .value, .stat:first-child .value { font-size: 30px; letter-spacing: -1px; } .stat .sub2 { font-size: 9px; margin-top: 7px; } .traffic-stat .stat-note { font-size: 8px; margin-top: 3px; } .stat .meter { margin-top: 10px; } .service-strip { gap: 6px; margin-bottom: 26px; } .service-item { font-size: 9px; padding: 5px 7px; gap: 5px; } .service-item b { font-size: 9px; } .card { margin-bottom: 26px; } .card .card-head { padding: 0 0 16px; align-items: center; } .card .card-head h2 { font-size: 17px; } .card-head .count { font-size: 9px; } .insights-grid > .card { padding-top: 20px; } .source-card .card-head { flex-wrap: wrap; gap: 8px; } .source-card .card-head > .count { margin: 0; } #trend { padding: 6px 0 0; min-height: 0; } .trend-chart { max-height: none; aspect-ratio: 480 / 230; } .trend-legend { gap: 2px 6px; margin-top: 12px; } .trend-legend button { min-height: 36px; padding: 5px; font-size: 10px; } .source-scroll tbody tr { padding: 14px 0; gap: 7px 12px; } .source-scroll td { padding: 0; } .source-scroll td[data-label="IP 归属 / 来源说明"] { font-size: 11px; line-height: 1.8; } .source-scroll td .muted { font-size: 9px; } .source-scroll td[data-label="IP 归属 / 来源说明"]::before { color: var(--muted); } .source-scroll .badge { font-size: 9px; } #users-table tbody tr { padding: 13px 0; grid-template-columns: minmax(0, 1fr) 62px 62px 46px; gap: 7px; } #users-table td[data-label="今日用量"], #users-table td[data-label="历史累计"] { font-size: 12px; } #users-table .avatar { width: 28px; height: 28px; } #users-table .user-cell strong { font-size: 12px; } #users-table td.row-actions [data-detail] { min-height: 40px; border: 0; background: #eaf0e8; font-size: 11px; padding: 6px; border-radius: 8px; } .users-toolbar, .audit-search-row { padding: 0 0 14px; } .users-toolbar input, .users-toolbar select, .audit-search-row input { min-height: 42px; font-size: 12px; } .users-toolbar .search-field { flex: 1; max-width: none; } .users-toolbar select { max-width: 110px; padding: 7px; } #toggle-add { min-height: 36px; font-size: 11px; padding: 7px 11px; } .subscription-reminder { font-size: 9px; } .add-panel { padding: 16px; margin: 0 0 16px; } #activity .card-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 0 16px; gap: 14px; width: 100%; } #activity .card-head > div:first-child { display: block; flex: 1 1 100%; } #activity .filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; } #activity .filters select { width: 100%; min-width: 0; max-width: none; min-height: 42px; padding: 9px 10px; font-size: 12px; } #activity .audit-toolbar { display: grid; grid-template-columns: 1fr; width: 100%; padding: 0 0 14px; gap: 10px; } #activity .segments { width: 100%; padding: 3px; } #activity .segment { flex: 1; min-height: 36px; font-size: 11px; padding: 7px 10px; } #activity .audit-options { display: flex; flex-wrap: wrap; width: 100%; gap: 4px 18px; } #activity .audit-toggle { justify-content: flex-start; border: 0; padding: 0; background: transparent; min-height: 44px; font-size: 10px; gap: 7px; } #activity .audit-toggle .full { display: inline; } #activity .audit-toggle .short { display: none; } #activity .audit-toggle input { width: 16px; height: 16px; } .audit-search-row .search-field { width: 100%; max-width: none; } .audit-meta, #activity .audit-meta { padding: 12px 0; font-size: 9px; } .audit-scroll { max-height: 65vh; } #domain-table thead tr, #domain-table tbody tr { grid-template-columns: minmax(0, 1fr) 38px 52px 44px 42px; gap: 4px; padding-left: 0; padding-right: 0; } #event-table thead tr, #event-table tbody tr { grid-template-columns: 45px 34px minmax(0, 1fr) 77px 43px; gap: 6px; padding-left: 0; padding-right: 0; } #domain-table th, #event-table th { font-size: 9px; } #domain-table td, #event-table td { font-size: 10px; } #domain-table td[data-label="连接次数"] { font-size: 10px; text-overflow: clip; } #domain-table .domain-cell { gap: 5px; } #domain-table .rank { min-width: 12px; font-size: 9px; } #domain-table .domain-text, #event-table .domain-text { font-size: 10px; } .card.minute-card .card-head { padding: 0 0 20px; gap: 16px; } .minute-card .eyebrow { font-size: 8px; margin-bottom: 7px; } .minute-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; } .minute-filters .filter-label { display: block; font-size: 9px; } .minute-filters label { display: grid; gap: 6px; } .minute-filters select { min-height: 42px; font-size: 12px; padding: 8px 10px; } .minute-summary { margin: 0 0 22px; padding: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; border-radius: 13px; } .minute-summary > div, .minute-summary > div:nth-child(n), .minute-summary > div:first-child { padding: 0; border: 0; border-radius: 0; } .minute-summary span { font-size: 9px; } .minute-summary strong { font-size: 24px; } .minute-summary small { display: block; font-size: 8px; } .minute-chart-head { padding: 0 0 10px; gap: 8px; } .minute-chart-head .hint { font-size: 9px; } .minute-chart { margin: 0 -8px; } .curve-legend { font-size: 9px; gap: 12px; } .minute-inspection { margin: 16px 0 0; padding: 14px 0 0; } .point-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; } .point-values span { padding: 0; } .point-values b { font-size: 14px; } .point-head { margin-bottom: 14px; } .point-head strong { font-size: 12px; } .modal { padding: 12px; } .modal-box { padding: 20px; border-radius: 18px; max-height: calc(100svh - 24px); } .detail-info { padding: 14px; } footer { flex-direction: row; flex-wrap: wrap; gap: 5px 16px; padding: 16px 0 4px; font-size: 9px; } .toast { bottom: calc(98px + env(safe-area-inset-bottom)); } .login-header { padding: 24px; } .login-header .secure { font-size: 8px; color: var(--muted); } .login-main { padding: 24px 20px 40px; } .login-card { padding: 30px 26px 24px; border-radius: 20px; } .login-card h1 { font-size: 26px; margin-bottom: 28px; } #login-form input { font-size: 16px; } .login-footer { padding: 18px 0 22px; margin: 0 24px; } } @media (max-width: 360px) { main, .traffic-page main { padding-left: 14px; padding-right: 14px; } .cards { padding: 18px; gap: 22px 16px; } .stat .value, .stat:first-child .value { font-size: 27px; } #users-table tbody tr { grid-template-columns: minmax(0, 1fr) 53px 53px 40px; gap: 5px; } #users-table td[data-label="今日用量"], #users-table td[data-label="历史累计"] { font-size: 11px; } .refresh-meta .hint { font-size: 8px; } #activity .audit-options { gap: 4px 12px; } } @media (prefers-reduced-motion: reduce) { .btn:active, .top nav a:active { transform: none; } .live-dot { animation: none; } } /* Compact overview: visible resource rows, expandable host metadata. */ .overview-summary { background: #eaf1e9; border-radius: 16px; padding: 16px 22px; margin-bottom: 24px; } .overview-summary .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0 14px; margin: 0; border-radius: 0; background: transparent; } .overview-summary .stat, .overview-summary .stat:first-child, .overview-summary .stat:last-child { grid-column: auto; padding: 0 22px; border: 0; } .overview-summary .stat:first-child { padding-left: 0; } .overview-summary .stat + .stat { border-left: 1px solid #d5e2d6; } .overview-summary .stat .label { margin-bottom: 7px; font-size: 10px; } .overview-summary .stat .value { font-size: 30px; } .overview-summary .stat .sub2 { font-size: 9px; margin-top: 6px; line-height: 1.5; } .overview-summary .stat-note { font-size: 8px; margin-top: 2px; } .hosts { display: block; border-top: 1px solid #d5e2d6; } .host { min-width: 0; padding: 0; } .host + .host { border-top: 1px solid #d5e2d6; } .host-summary { display: grid; grid-template-columns: minmax(70px, 1fr) repeat(2, minmax(0, 1fr)) auto 10px; align-items: center; gap: 16px; min-height: 40px; list-style: none; cursor: pointer; } .host-summary::-webkit-details-marker { display: none; } .host-summary::after { content: '⌄'; font-size: 13px; color: var(--muted); text-align: right; } .host[open] > .host-summary::after { transform: rotate(180deg); } .host-name { display: flex; align-items: center; gap: 7px; min-width: 0; } .host-name b { font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .host-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ok); flex: none; } .host-state { color: var(--ok); font-size: 9px; white-space: nowrap; } .host.bad .host-dot { background: var(--bad); } .host.bad .host-state { color: var(--bad); } .host-meter { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); white-space: nowrap; } .host-meter em { color: var(--text); font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; } .host-details { padding: 0 0 12px 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 10px; } .host-role { font-size: 10px; } .host-ip { font: 10px ui-monospace, SFMono-Regular, monospace; } .host-note, .host-services { flex-basis: 100%; line-height: 1.7; } .host-services { display: flex; flex-wrap: wrap; gap: 5px 12px; } .host-service { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); } .host-service.bad { color: var(--bad); } /* User detail: common actions first, diagnostics behind disclosures. */ .user-detail-modal .modal-box { width: min(600px, 100%); max-height: min(88svh, 860px); display: flex; flex-direction: column; overflow: hidden; padding: 0; } .user-detail-modal .modal-head { padding: 22px 24px 16px; margin: 0; flex: none; background: #fff; } .user-detail-modal .modal-head h3 { font-size: 18px; font-weight: 650; } .user-detail-modal #modal-close { min-height: 34px; font-size: 11px; padding: 6px 11px; } .user-detail-modal #modal-body { padding: 0 24px 20px; overflow: auto; overscroll-behavior: contain; } .detail-identity { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; } .detail-identity .port { font-size: 10px; padding: 3px 6px; } .detail-identity .badge { font-size: 10px; } .detail-last-seen { margin-left: auto; font-size: 10px; color: var(--muted); } .detail-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 18px 20px; border-radius: 13px; background: var(--accent-soft); } .detail-usage > div { display: grid; gap: 7px; } .detail-usage span { font-size: 10px; color: var(--muted); } .detail-usage strong { font-size: 28px; line-height: 1.1; font-weight: 650; letter-spacing: -.7px; } .detail-shortcuts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; margin: 14px 0 22px; } .detail-shortcuts .btn { min-height: 42px; font-size: 12px; } .detail-shortcuts .primary { justify-content: space-between; } .detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .user-detail-modal h4 { font-size: 13px; font-weight: 600; margin: 0; } .detail-section-head .btn { min-height: 30px; padding: 4px 8px; background: var(--soft); } .detail-section-head .btn.primary { background: var(--accent); } .detail-edit { margin-bottom: 16px; } .detail-edit > label:first-child { display: block; font-size: 11px; color: var(--muted); margin-bottom: 7px; } .detail-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .user-detail-modal .detail-input-row input { width: 100%; max-width: none; min-height: 40px; font-size: 13px; } .detail-input-row .btn { min-height: 40px; font-size: 11px; padding: 8px 12px; } .detail-quota-toggle { display: flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 6px; font-size: 11px; cursor: pointer; } .user-detail-modal input[type="checkbox"] { width: 16px; height: 16px; min-height: 16px; margin: 0; padding: 0; flex: none; accent-color: var(--accent); box-shadow: none; } .quota-progress { margin: 10px 0 2px; font-size: 10px; color: var(--muted); } .quota-progress .meter { margin-top: 6px; height: 3px; } .quota-progress .over i { background: var(--warn); } .detail-disclosure { border-top: 1px solid var(--border); } .detail-disclosure > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 12px; cursor: pointer; list-style: none; } .detail-disclosure > summary::-webkit-details-marker { display: none; } .detail-disclosure > summary span { margin-left: auto; font-size: 10px; color: var(--muted); } .detail-disclosure > summary::after { content: '⌄'; font-size: 15px; color: var(--muted); } .detail-disclosure[open] > summary::after { transform: rotate(180deg); } .detail-disclosure-body { padding: 3px 0 18px; } .detail-disclosure-body > h4 { margin: 6px 0 12px; } .detail-disclosure-body > h4:not(:first-child) { margin-top: 22px; } .detail-channel { display: grid; grid-template-columns: 85px repeat(2, minmax(0, 1fr)); gap: 12px; padding: 8px 0; font-size: 11px; border-bottom: 1px solid var(--rule); } .detail-channel span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; } .detail-table { max-height: 260px; } .user-detail-modal .detail-info { padding: 14px; gap: 13px 18px; } .user-detail-modal .detail-info > div { font-size: 11px; } .user-detail-modal .detail-info > div > b { font-size: 11px; font-weight: 500; } .detail-rotate { margin-top: 20px; } .detail-protocols { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 12px; } .detail-protocols label { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; font-size: 11px; cursor: pointer; } .detail-live { margin-top: 20px; font-size: 11px; } .detail-live > summary { min-height: 36px; cursor: pointer; } .detail-delete { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 18px; display: flex; justify-content: flex-end; } .subscription-back { margin-bottom: 16px; } @media (max-width: 640px) { .overview-summary { padding: 16px 18px; margin-bottom: 22px; } .overview-summary .cards { gap: 18px; padding-bottom: 12px; } .overview-summary .stat, .overview-summary .stat:first-child, .overview-summary .stat:last-child { padding: 0; } .overview-summary .stat + .stat { border-left: 0; } .overview-summary .stat .value { font-size: 28px; } .host-summary { grid-template-columns: minmax(58px, 1fr) repeat(2, minmax(0, 1fr)) auto 10px; gap: 8px; min-height: 40px; } .host-meter { font-size: 9px; gap: 5px; } .host-name { gap: 6px; } .host-name b { font-size: 11px; } .user-detail-modal .modal-box { max-height: calc(100svh - 24px); border-radius: 18px; } .user-detail-modal .modal-head { padding: 20px 20px 14px; } .user-detail-modal #modal-body { padding: 0 20px 16px; } .user-detail-modal .modal-head h3 { font-size: 17px; } .user-detail-modal .detail-input-row input { font-size: 16px; } .user-detail-modal .detail-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } .user-detail-modal .detail-info > div { flex-direction: column; align-items: flex-start; gap: 5px; } .detail-identity { gap: 6px; margin-bottom: 16px; } .detail-last-seen { font-size: 9px; } .detail-usage { padding: 16px; } .detail-usage strong { font-size: 26px; } .detail-shortcuts { gap: 8px; margin: 12px 0 20px; } .detail-shortcuts .btn { padding: 9px 11px; font-size: 11px; } .detail-table tbody tr { padding: 12px 0; } .detail-table td { padding: 0; } } @media (max-width: 360px) { .overview-summary { padding: 14px; } .overview-summary .stat .value { font-size: 26px; } .user-detail-modal .modal-head { padding-left: 16px; padding-right: 16px; } .user-detail-modal #modal-body { padding-left: 16px; padding-right: 16px; } .detail-input-row { gap: 6px; } .detail-input-row .btn { padding-left: 9px; padding-right: 9px; } } /* One subscription with four geographic paths. */ .subscription-paths { margin-top: 22px; } .subscription-routes { list-style: none; padding: 0; margin: 6px 0 0; } .subscription-route { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--border); } .route-index { color: var(--muted); font-size: 11px; min-width: 20px; } .route-identity { flex: 1; min-width: 0; } .route-identity strong { display: block; font-size: 14px; font-weight: 600; } .route-identity small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); } .route-included { color: var(--muted); font-size: 11px; } .subscription-route .btn { flex: none; min-height: 36px; } .subscription-qr { margin-top: 20px; font-size: 12px; color: var(--muted); } .subscription-qr summary { cursor: pointer; padding: 8px 0; } .detail-traffic-total { grid-template-columns: 1fr 1fr; } @media (max-width: 430px) { .subscription-route { gap: 9px; } .subscription-route .btn { padding: 7px 10px; } } /* Keep the account list focused on users and usage at desktop widths too. */ #users-table th:nth-child(2), #users-table td:nth-child(2), #users-table th:nth-child(3), #users-table td:nth-child(3), #users-table th:nth-child(6), #users-table td:nth-child(6), #users-table th:nth-child(7), #users-table td:nth-child(7) { display: none; }