/* Basic, readable layout when Grid, CSS variables or modern sizing are absent. */
.legacy-layout body { background: #050505; color: #f1e6c9; }
.legacy-layout .mobile-app { display: block; width: 100%; max-width: 520px; margin: 0 auto; padding-bottom: 90px; background: #050505; }
.legacy-layout .mobile-header { display: block; padding: 14px 16px; border-bottom: 1px solid #42371f; }
.legacy-layout .mobile-brand { display: inline-block; }
.legacy-layout .mobile-brand-mark { display: none; }
.legacy-layout .desktop-view-link { float: right; padding: 0 4px; color: #bbae8f; }
.legacy-layout .mobile-contact { clear: both; margin-top: 12px; }
.legacy-layout .mobile-content { padding: 22px 16px 0; }
.legacy-layout .mobile-panel-heading { display: block; }
.legacy-layout .mobile-panel-heading .retest-button { margin-top: 10px; }
.legacy-layout .mobile-header h1,
.legacy-layout .desktop-brand h1,
.legacy-layout .desktop-panel h2 { color: #e5c775; }
.legacy-layout .mobile-panel-heading h2 { color: #f1e6c9; }
.legacy-layout .mobile-description,
.legacy-layout .mobile-kicker,
.legacy-layout .desktop-description,
.legacy-layout .desktop-brand p,
.legacy-layout .metric-label,
.legacy-layout .test-summary,
.legacy-layout .route-status { color: #bbae8f; }
.legacy-layout .wechat-contact { display: block; background: #e5c775; color: #161205; text-align: center; }
.legacy-layout .retest-button,
.legacy-layout .navigation-link,
.legacy-layout .view-switch { display: inline-block; border: 1px solid #a98b43; background: #0d0d0b; color: #e5c775; }
.legacy-layout .route-link { display: inline-block; background: #e5c775; color: #161205; }
.legacy-layout .retest-button:disabled,
.legacy-layout [aria-disabled="true"] { background: #1b1913; color: #9b9077; border-color: #42371f; }
.legacy-layout .route-list { display: block; }
.legacy-layout .route-list .route-row { display: block; position: relative; margin-bottom: 8px; padding: 12px 13px; border: 1px solid #42371f; background: #0d0d0b; }
.legacy-layout .route-list .route-name,
.legacy-layout .route-list .route-status { display: block; padding-right: 40%; word-wrap: break-word; }
.legacy-layout .route-list .route-link { position: absolute; top: 12px; right: 13px; width: 35%; }
.legacy-layout .popular-links { display: block; }
.legacy-layout .popular-links .navigation-link { display: block; min-height: 48px; margin-bottom: 10px; padding: 12px; background: #0d0d0b; }
.legacy-layout .mobile-bottom-nav { left: 0; right: 0; width: auto; max-width: 520px; margin: 0 auto; padding: 10px 16px; transform: none; border-top: 1px solid #645020; }
.legacy-layout .mobile-tabs { display: block; white-space: nowrap; }
.legacy-layout .mobile-tab { display: inline-block; width: 48%; color: #bbae8f; }
.legacy-layout .mobile-tab[aria-selected="true"] { background: #2b2211; color: #e5c775; border-color: #a98b43; }
.legacy-layout .mobile-footer { padding: 30px 16px 16px; color: #bbae8f; }
.legacy-layout .mobile-footer a,
.legacy-layout .desktop-footer a { color: #e5c775; }
.legacy-layout .desktop-shell { width: 92%; max-width: 1200px; margin-left: auto; margin-right: auto; }
.legacy-layout .desktop-header-inner { display: block; padding: 16px 0; }
.legacy-layout .desktop-main { margin-top: 18px; margin-bottom: 24px; }
.legacy-layout .desktop-overview,
.legacy-layout .desktop-workspace,
.legacy-layout .desktop-sidebar { display: block; }
.legacy-layout .metric-card { display: inline-block; width: 31%; padding: 10px; border: 1px solid #645020; }
.legacy-layout .metric-value { color: #e5c775; }
.legacy-layout .desktop-panel { margin-bottom: 16px; border: 1px solid #645020; background: #0d0d0b; }
.legacy-layout .desktop-panel-heading { display: block; padding: 16px; }
.legacy-layout .route-table th,
.legacy-layout .route-table td { padding: 8px; border-bottom: 1px solid #42371f; }
.legacy-layout .route-table th { color: #bbae8f; background: #1b1913; }
.legacy-layout .desktop-footer { padding: 16px 0; color: #bbae8f; }
.legacy-layout .desktop-footer-inner { display: block; }
.legacy-layout .route-status[data-state="success"] { color: #aaca9c; }
.legacy-layout .route-status[data-state="unverified"] { color: #e5c775; }
.legacy-layout .route-status[data-state="timeout"] { color: #e8bf66; }
.legacy-layout .route-status[data-state="error"] { color: #ef9f91; }
.legacy-layout .skip-link { top: 8px; left: 8px; background: #0d0d0b; border: 1px solid #e5c775; }