/* ===== summary pills (Rate tab) ===== */
.summary{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.summary-item{display:flex;align-items:center;gap:6px;padding:7px 12px;background:var(--card);border:1px solid var(--card-border);border-radius:8px;font-size:12px}
.summary-dot{width:8px;height:8px;border-radius:50%}

/* ===== server cards grid ===== */
.panels-section{margin-bottom:22px}
.panels-section h2{font-size:13px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-dim)}
.panels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}

.server-card{background:var(--card);border:1px solid var(--card-border);border-radius:12px;overflow:hidden}
.server-header{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--card-border);background:rgba(255,255,255,.02)}
.server-name{font-weight:700;font-size:13px}
.server-host{font-size:10px;color:var(--text-dim);font-family:monospace}
.server-error{padding:12px 14px;color:var(--red);font-size:12px;background:var(--red-bg)}

.acct-row{padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.03);display:flex;gap:12px;align-items:flex-start}
.acct-row:last-child{border-bottom:none}
.acct-info{flex:1;min-width:0}
.acct-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.acct-identity{min-width:0}
.acct-name{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-email{font-size:10px;color:var(--blue);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-sub{font-size:10px;color:var(--text-dim)}

.status-badge{padding:2px 8px;border-radius:20px;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;flex-shrink:0}
.status-allowed{background:var(--green-bg);color:var(--green)}
.status-allowed_warning{background:var(--yellow-bg);color:var(--yellow)}
.status-rate_limited{background:var(--red-bg);color:var(--red)}
.status-no_data{background:rgba(148,163,184,.1);color:var(--text-dim)}

.bars{display:flex;gap:8px}
.bar-col{flex:1;min-width:0}
.bar-header{display:flex;justify-content:space-between;font-size:10px;margin-bottom:2px}
.bar-header .bl{color:var(--text-dim)}
.bar-header .bv{font-weight:600;font-variant-numeric:tabular-nums}
.bar-track{height:6px;background:#1e293b;border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;transition:width .5s}
.bar-fill.green{background:linear-gradient(90deg,#22c55e,#4ade80)}
.bar-fill.yellow{background:linear-gradient(90deg,#eab308,#facc15)}
.bar-fill.red{background:linear-gradient(90deg,#ef4444,#f87171)}
.bar-meta{font-size:9px;color:var(--text-dim);margin-top:2px;display:flex;justify-content:space-between;gap:4px}
.bar-meta>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.acct-footer{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:4px;font-size:9px;color:var(--text-dim);flex-wrap:wrap}
.tier-badge{padding:1px 5px;background:rgba(168,85,247,.12);color:var(--purple);border-radius:3px;font-size:9px;font-family:monospace}

/* ===== reset timeline ===== */
.timeline-section{background:var(--card);border:1px solid var(--card-border);border-radius:12px;margin-bottom:22px;overflow:hidden}
.timeline-header-bar{padding:12px 16px;border-bottom:1px solid var(--card-border);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.02);flex-wrap:wrap;gap:8px}
.timeline-header-bar h2{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.tl-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.timeline-legend{display:flex;gap:12px;align-items:center;font-size:10px;color:var(--text-dim)}
.legend-item{display:flex;align-items:center;gap:4px}
.legend-dot-5h{width:8px;height:8px;border-radius:50%;background:var(--cyan);opacity:.7}
.legend-dot-7d{width:10px;height:10px;border-radius:2px;background:var(--purple);opacity:.7}
.legend-dot-next{width:10px;height:10px;border-radius:50%;background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
.legend-dot-past{width:8px;height:8px;border-radius:50%;background:var(--text-dim);opacity:.3}

.tl-toggle{display:flex;border:1px solid var(--card-border);border-radius:6px;overflow:hidden}
.tl-toggle button{padding:4px 10px;font-size:11px;font-weight:600;border:none;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .15s}
.tl-toggle button:not(:last-child){border-right:1px solid var(--card-border)}
.tl-toggle button.active{background:var(--blue);color:#fff}
.tl-toggle button:hover:not(.active){background:#1e293b;color:var(--text)}

.tl-container{display:flex;overflow:hidden}
.tl-labels{flex-shrink:0;width:180px;background:var(--card);z-index:5;border-right:1px solid rgba(255,255,255,.06)}
.tl-label-header{height:44px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:flex-end;padding:0 12px 6px;font-size:10px;color:var(--text-dim)}
.tl-label-row{height:48px;display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.03)}
.tl-label-row:last-child{border-bottom:none}
.tl-rank{font-size:15px;flex-shrink:0;width:22px;text-align:center}
.tl-label-text{min-width:0;flex:1}
.tl-label-text .tl-name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-label-text .tl-server{font-size:9px;color:var(--text-dim)}
.tl-label-text .tl-email{font-size:9px;color:var(--blue);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tl-scroll{flex:1;overflow-x:auto;overflow-y:hidden;position:relative;-webkit-overflow-scrolling:touch}
.tl-track-area{position:relative}

.tl-axis{position:relative;height:44px;border-bottom:1px solid rgba(255,255,255,.06)}
.tl-date-label{position:absolute;top:4px;font-size:11px;font-weight:600;color:var(--text);white-space:nowrap}
.tl-hour-label{position:absolute;top:24px;font-size:9px;color:var(--text-dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.tl-tick{position:absolute;top:38px;width:1px;height:6px;background:rgba(255,255,255,.1)}
.tl-tick-major{height:10px;top:34px;background:rgba(255,255,255,.15)}

.tl-track-row{position:relative;height:48px;border-bottom:1px solid rgba(255,255,255,.03)}
.tl-track-row:last-child{border-bottom:none}

.tl-now{position:absolute;top:0;width:2px;background:var(--red);opacity:.7;z-index:10;pointer-events:none}
.tl-now-tag{position:absolute;top:2px;left:-12px;font-size:7px;color:var(--red);font-weight:700;letter-spacing:1px;width:26px;text-align:center}

.tl-day-sep{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08);z-index:1;pointer-events:none}
.tl-hour-grid{position:absolute;top:44px;bottom:0;width:1px;background:rgba(255,255,255,.025);z-index:0;pointer-events:none}
.tl-today-col{position:absolute;top:44px;bottom:0;background:rgba(59,130,246,.04);pointer-events:none;z-index:0;border-radius:2px}

.tl-dot{position:absolute;top:50%;z-index:5;cursor:default;transition:transform .15s}
.tl-dot:hover{z-index:20}
.tl-dot .tl-tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1e293b;border:1px solid #334155;border-radius:6px;padding:6px 10px;font-size:10px;white-space:nowrap;color:var(--text);z-index:30;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.tl-dot:hover .tl-tip{display:block}

.tl-d5{width:10px;height:10px;border-radius:50%;background:var(--cyan);transform:translate(-50%,-50%)}
.tl-d5:hover{transform:translate(-50%,-50%) scale(1.5)}
.tl-d5.past{opacity:.18}
.tl-d5.next{opacity:1;box-shadow:0 0 8px var(--cyan),0 0 20px rgba(6,182,212,.25);animation:pulse5 2s ease-in-out infinite}

.tl-d7{width:12px;height:12px;border-radius:2px;background:var(--purple);transform:translate(-50%,-50%) rotate(45deg)}
.tl-d7:hover{transform:translate(-50%,-50%) rotate(45deg) scale(1.4)}
.tl-d7 .tl-tip{transform:translateX(-50%) rotate(-45deg)}
.tl-d7.past{opacity:.18}
.tl-d7.next{opacity:1;box-shadow:0 0 8px var(--purple),0 0 20px rgba(168,85,247,.25);animation:pulse7 2s ease-in-out infinite}

.tl-strip{position:absolute;top:0;height:100%;border-radius:2px;pointer-events:none}
.tl-strip.warn{background:rgba(234,179,8,.06)}
.tl-strip.limit{background:rgba(239,68,68,.08)}

@keyframes pulse5{0%,100%{box-shadow:0 0 4px var(--cyan),0 0 8px rgba(6,182,212,.15)}50%{box-shadow:0 0 12px var(--cyan),0 0 28px rgba(6,182,212,.3)}}
@keyframes pulse7{0%,100%{box-shadow:0 0 4px var(--purple),0 0 8px rgba(168,85,247,.15)}50%{box-shadow:0 0 12px var(--purple),0 0 28px rgba(168,85,247,.3)}}

/* ===== settings sections ===== */
.settings-server{background:var(--card2);border:1px solid var(--card-border);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.settings-server-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.settings-server-name{font-weight:600;font-size:13px}
.settings-account{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:6px;padding:8px 12px;margin:8px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.settings-account-name{font-size:12px}

@media (max-width:768px){
  .panels-grid{grid-template-columns:1fr}
  .tl-labels{width:130px}
  .tl-label-text .tl-email{display:none}
  .timeline-legend{display:none}
  .summary{gap:6px}
  .summary-item{font-size:11px;padding:6px 10px}
}