.time-sync-main-time-status{flex-direction:column;gap:20px;display:flex}.time-sync-main-time-status .status-header{justify-content:space-between;align-items:flex-start;display:flex}.time-sync-main-time-status .status-header>div:first-child{flex-direction:column;gap:8px;display:flex}.time-sync-main-time-status h3{color:var(--time-sync-white);margin:0;font-size:1.6rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.time-diff-display{background-color:var(--time-sync-dark-grey);border-radius:8px;flex-direction:column;gap:20px;display:flex;overflow:hidden}.time-diff-container{text-align:center;flex-direction:column;align-items:center;padding:20px;display:flex}.time-diff-value{font-size:3.5rem;font-weight:700;line-height:1}.time-diff-value.placeholder-diff{color:var(--time-sync-light-grey)}.time-diff-value.quality-color-perfect{color:var(--time-sync-green)}.time-diff-value.quality-color-excellent{color:var(--time-sync-excellent-green)}.time-diff-value.quality-color-good{color:var(--time-sync-yellow)}.time-diff-value.quality-color-fair{color:var(--time-sync-orange)}.time-diff-value.quality-color-poor,.time-diff-value.quality-color-bad,.time-diff-value.quality-color-critical{color:var(--time-sync-red)}.time-diff-value.quality-color-unknown{color:var(--time-sync-unknown-grey)}@media (max-width:768px){.time-diff-value{font-size:2.5rem}}@media (max-width:480px){.time-diff-value{font-size:2rem}}.time-diff-direction{color:var(--time-sync-light-grey);margin-bottom:10px;font-size:1.1rem;font-weight:500}.time-quality-indicator{flex-direction:column;width:100%;display:flex}.time-quality-indicator.quality-details{text-align:left;background-color:var(--time-sync-dark-grey);color:var(--time-sync-light-grey);flex-direction:column;gap:8px;padding:15px 20px;display:flex}.time-quality-indicator h4{margin:0;font-size:1.1rem;font-weight:600}.quality-meaning{font-size:.9rem;line-height:1.4}.quality-action{color:var(--time-sync-light-grey);font-size:.9rem;line-height:1.4}.quality-action strong{color:var(--time-sync-white);margin-right:5px}h4.quality-perfect{color:var(--time-sync-green)}h4.quality-excellent{color:var(--time-sync-excellent-green)}h4.quality-good{color:var(--time-sync-yellow)}h4.quality-fair{color:var(--time-sync-orange)}h4.quality-poor,h4.quality-bad,h4.quality-critical{color:var(--time-sync-red)}h4.quality-unknown{color:var(--time-sync-unknown-grey)}.resync-button-container{align-items:center;display:flex}.status-dot{background-color:var(--time-sync-light-grey);border-radius:50%;width:10px;height:10px}.status-dot.success{background-color:var(--time-sync-green)}.status-dot.syncing{background-color:var(--time-sync-yellow)}.status-dot.error{background-color:var(--time-sync-red)}.time-sync-sync-button{background-color:var(--time-sync-green);color:var(--time-sync-white);cursor:pointer;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;gap:8px;width:auto;height:auto;padding:8px 12px;transition:background-color .3s,box-shadow .3s;display:flex;box-shadow:0 2px 4px rgba(0,0,0,.2)}@media (max-width:480px){.time-sync-sync-button{padding:6px 10px}}.time-sync-sync-button:hover{background-color:var(--time-sync-green-hover)}.time-sync-sync-button .material-icons{font-size:18px}@media (max-width:480px){.time-sync-sync-button .material-icons{font-size:14px}}.time-sync-spinner{border:2px solid rgba(255,255,255,.3);border-top:2px solid var(--time-sync-white);border-radius:50%;width:16px;height:16px;animation:1s linear infinite spin}@media (max-width:480px){.time-sync-spinner{border-width:1.5px;width:12px;height:12px}}.connection-display{align-items:center;gap:4px;display:inline-flex}.time-sync-main-time-status .status-header .connection-display{color:var(--time-sync-light-grey);font-size:.85rem}
.time-sync-time-display{text-align:center;flex-wrap:wrap;justify-content:space-around;gap:20px;display:flex}@media (max-width:480px){.time-sync-time-display{gap:10px}}.time-card-section{background-color:var(--time-sync-dark-grey);border-radius:8px;flex:1;padding:15px}.time-card-section h4{color:var(--time-sync-white);margin-top:0;margin-bottom:10px;font-size:1.1rem}.time-value{color:var(--time-sync-white);margin-bottom:5px;font-family:Roboto Mono,monospace;font-size:2rem;font-weight:700}.time-value span{display:block}.time-value .placeholder{color:var(--time-sync-light-grey)}@media (max-width:768px){.time-value{font-size:1.5rem}}@media (max-width:480px){.time-value{font-size:1.2rem}}.time-meta{color:var(--time-sync-light-grey);font-size:.8rem}
.time-sync-methodology-explanation h2{color:var(--time-sync-white);margin-top:0;margin-bottom:24px;font-size:1.5rem}.method-steps{flex-direction:column;gap:20px;display:flex}.method-step-item{align-items:flex-start;gap:15px;display:flex}@media (max-width:480px){.method-step-item{gap:10px}}.method-icon{color:var(--time-sync-green);flex-shrink:0;font-size:36px}.method-content h3{color:var(--time-sync-green);margin-top:0;margin-bottom:5px;font-size:1.3rem;font-weight:600}.method-content p{color:var(--time-sync-light-grey);font-size:.9rem;line-height:1.5}