:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#e9eef6;background:#0c121d;font-size:15px}*{box-sizing:border-box}body{margin:0}header{max-width:1160px;margin:auto;padding:26px 28px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #263042}.brand{font-size:23px;font-weight:800;letter-spacing:2px;text-decoration:none;color:#fff}.brand span{font-weight:400;color:#63d9c4}nav{display:flex;align-items:center;gap:22px}a{color:#79e0ce}main{max-width:1100px;margin:48px auto;padding:0 24px}h1{font-size:clamp(30px,4vw,46px);letter-spacing:-1.5px;line-height:1.15;margin:14px 0 18px}h2{font-size:23px}h3{font-size:20px}p{color:#aebcd0;line-height:1.7}.lead{font-size:17px}.eyebrow{color:#6bdac5;font-size:12px;font-weight:700;letter-spacing:2px}.card{background:#141e2d;border:1px solid #29364a;border-radius:16px;padding:27px;margin-bottom:22px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-bottom:22px}.grid .card{margin-bottom:0}.login{max-width:490px;margin:65px auto}.login h1{font-size:38px}.notice{padding:20px 24px;background:#20323c;border:1px solid #3b6668;border-radius:12px;margin-bottom:26px;line-height:1.7;white-space:pre-wrap}.steps{display:flex;gap:25px;flex-wrap:wrap;margin:32px 0}.steps b{color:#70dbc6;margin-right:9px}.badge{display:inline-block;border-radius:20px;padding:7px 12px;font-size:12px;background:#233c37;color:#8cedbd}.problem{background:#442d2d;color:#ffb3a4}.maintenance{background:#3d3829;color:#f0d294}label{display:block;color:#bfcbdc;font-size:13px;margin:13px 0}input,textarea,select{display:block;width:100%;font:inherit;color:#e9eef6;background:#0e1725;border:1px solid #344359;border-radius:8px;padding:12px;margin-top:8px}input:focus,textarea:focus,select:focus{outline:2px solid #67d6c0;outline-offset:2px}textarea{min-height:84px;resize:vertical}button,.button{display:inline-block;background:#76dfc7;color:#0a2521;border:0;border-radius:8px;padding:12px 18px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}button:hover,.button:hover{background:#9debd9}button:disabled{opacity:.4;cursor:default}.quiet{background:#233147;color:#e6edf8;padding:8px 12px;font-size:13px}.quiet:hover{background:#344661}small{display:block;color:#8fa1bb;font-size:12px;margin-top:12px}.hint{font-size:13px;margin:24px 0}.empty{background:#202c3c;color:#9aaec5;padding:13px;border-radius:8px}summary{cursor:pointer;font-weight:600}details form{margin-top:18px;max-width:480px}li{padding:8px 0;color:#bfcbdc;line-height:1.6}.check{display:flex;align-items:center;gap:12px}.check input{width:auto;margin:0}.table{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}th{font-size:12px;color:#8ea0b8}td,th{padding:15px 10px;border-bottom:1px solid #2b3749}td{font-size:14px}td small{margin-top:4px}footer{max-width:1100px;margin:50px auto;padding:24px;color:#73849e;font-size:12px}nav form{margin:0}@media(max-width:650px){header{padding:20px;align-items:flex-start}nav{gap:10px;flex-wrap:wrap;justify-content:flex-end;font-size:12px}nav>span{display:none}main{margin-top:30px;padding:0 16px}.card{padding:21px}.steps{display:grid;gap:15px}.login{margin:30px auto}.grid{grid-template-columns:1fr}}
.traffic-totals{display:flex;flex-wrap:wrap;gap:14px 28px;font-weight:600;margin:20px 0}.traffic-sent{color:#76dfc7}.traffic-received{color:#85b7ff}.traffic-scroll{overflow-x:auto}.traffic-chart{display:block;width:100%;min-width:580px;height:auto}.traffic-chart text{fill:#aebcd0;font:12px 'Segoe UI',sans-serif}.traffic-grid{stroke:#2b3749;stroke-width:1}.traffic-bar-sent{fill:#76dfc7}.traffic-bar-received{fill:#85b7ff}.traffic-panel details{margin-top:20px}.traffic-chart rect:hover{opacity:.7}

.import-guide{margin-top:16px}.import-guide summary{line-height:1.5}.import-guide ol{padding-left:22px}
.chart-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:end;margin:12px 0}.chart-controls label{flex:1;min-width:125px;margin:0}.chart-controls select{padding:8px}.chart-controls button{font-size:12px}#live-chart{width:100%;height:auto;min-height:250px;touch-action:pan-y;cursor:grab}#live-chart text{fill:#aebcd0;font:11px 'Segoe UI',sans-serif}#chart-legend{display:flex;flex-wrap:wrap;gap:4px 20px}#chart-legend label{margin:4px 0}#chart-status{font-size:12px}

#chart-window{border:1px solid #344458;border-radius:10px;overflow:hidden;background:#111c2b}#chart-window:focus-within{outline:2px solid #76dfc7;outline-offset:2px}.chart-help{font-size:12px;color:#aebcd0}#live-chart{touch-action:none}#live-chart:active{cursor:grabbing}

.traffic-tooltip{position:fixed;z-index:1000;pointer-events:none;max-width:min(420px,calc(100vw - 16px));padding:9px 12px;border:1px solid #6683a3;border-radius:8px;background:#0d1726;color:#f1f5ff;font:14px/1.4 sans-serif;box-shadow:0 4px 18px #0008;overflow-wrap:anywhere}.traffic-tooltip[hidden]{display:none}

#chart-legend{display:block}.legend-user-row{display:flex;align-items:baseline;gap:16px;padding:7px 0;border-bottom:1px solid #ffffff12}.legend-user-name{flex:0 0 170px;overflow-wrap:anywhere;font-size:13px}.legend-user-configs{display:flex;flex-wrap:wrap;gap:4px 20px;min-width:0}.legend-swatch{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}#chart-legend .check{display:inline-flex;align-items:center;gap:8px}@media(max-width:600px){.legend-user-row{flex-direction:column;gap:3px}.legend-user-name{flex-basis:auto}}

.legend-month{margin-left:auto;position:relative;white-space:nowrap;font-size:13px;color:#aebcd0;cursor:help}.legend-month-popup{display:none;position:absolute;right:0;bottom:100%;z-index:20;background:#0d1726;color:#f1f5ff;border:1px solid #6683a3;border-radius:8px;padding:12px;box-shadow:0 4px 18px #0008;min-width:260px;max-width:min(480px,80vw);white-space:normal}.legend-month-popup div{margin-top:8px}.legend-month:hover .legend-month-popup,.legend-month:focus-within .legend-month-popup{display:block}
