:root{--ratel-red:#D62828;--ratel-dark:#121212;--ratel-light:#fff;--ratel-green:#2E7D32;--ratel-blue:#1565C0;--ratel-gold:#D4AF37;--ratel-gray:#f4f6f8;--ratel-border:#e5e7eb;--ratel-text:#1f2937}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--ratel-gray);color:var(--ratel-text)}a{text-decoration:none;color:inherit}
.ratel-topbar{height:64px;background:#fff;border-bottom:1px solid var(--ratel-border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:20}
.ratel-brand{font-weight:900;color:var(--ratel-red);font-size:21px}.ratel-nav{display:flex;gap:18px;align-items:center}.ratel-container{max-width:1180px;margin:0 auto;padding:28px 18px}
.ratel-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;padding:11px 16px;font-weight:800;border:1px solid transparent}.ratel-btn-primary{background:var(--ratel-red);color:#fff}.ratel-btn-secondary{background:#fff;border-color:var(--ratel-border)}
.ratel-hero{background:linear-gradient(135deg,#121212,#3b0d0d);color:#fff;border-radius:24px;padding:48px 28px}.ratel-hero h1{font-size:42px;line-height:1.05;margin:0 0 14px}.ratel-hero p{font-size:18px;max-width:760px;opacity:.92}
.ratel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.ratel-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.ratel-card{background:#fff;border:1px solid var(--ratel-border);border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.04)}.ratel-card h3{margin:0 0 8px}.ratel-metric strong{font-size:28px;display:block}
.ratel-badge{display:inline-flex;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:900;background:#fee2e2;color:var(--ratel-red)}.ratel-section-title{font-size:24px;margin:22px 0 12px}
.ratel-layout{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:18px;max-width:1440px;margin:0 auto;padding:18px}.ratel-sidebar,.ratel-rail{background:#fff;border:1px solid var(--ratel-border);border-radius:18px;padding:16px;height:max-content;position:sticky;top:82px}.ratel-sidebar a{display:block;padding:11px 12px;border-radius:12px;margin-bottom:4px}.ratel-sidebar a:hover{background:var(--ratel-gray)}.ratel-main{min-width:0}.ratel-bottom-nav{display:none}.ratel-empty{background:#fff;border:1px dashed var(--ratel-border);border-radius:18px;padding:24px;text-align:center}
@media(max-width:900px){.ratel-nav{display:none}.ratel-layout{display:block;padding:12px 12px 84px}.ratel-sidebar,.ratel-rail{display:none}.ratel-grid,.ratel-grid-3{grid-template-columns:1fr}.ratel-hero h1{font-size:32px}.ratel-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--ratel-border);display:grid;grid-template-columns:repeat(5,1fr);z-index:40}.ratel-bottom-nav a{padding:10px 4px;text-align:center;font-size:12px;font-weight:800}}
/* RATEL UX-10 Experience Expansion */
.ratel-widget-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.ratel-widget{background:#fff;border:1px solid var(--ratel-border);border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.04)}
.ratel-widget h3{margin:0 0 8px;font-size:18px}
.ratel-progress{height:10px;background:#eef2f7;border-radius:999px;overflow:hidden;margin:10px 0}
.ratel-progress span{display:block;height:100%;background:var(--ratel-red);border-radius:999px}
.ratel-score{font-size:34px;font-weight:900;color:var(--ratel-red)}
.ratel-mini-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.ratel-mini-item{padding:12px;border:1px solid var(--ratel-border);border-radius:14px;background:#fafafa}
.ratel-action-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ratel-spotlight{background:linear-gradient(135deg,#fff,#fff5f5);border:1px solid #fee2e2;border-radius:18px;padding:18px}
.ratel-leaderboard{counter-reset:rank}
.ratel-leaderboard .ratel-mini-item:before{counter-increment:rank;content:counter(rank) ". ";font-weight:900;color:var(--ratel-red)}
.ratel-timeline{border-left:3px solid var(--ratel-red);padding-left:14px;display:flex;flex-direction:column;gap:12px}
.ratel-timeline-item{background:#fff;border:1px solid var(--ratel-border);border-radius:14px;padding:12px}
.ratel-health-good{color:var(--ratel-green);font-weight:900}
.ratel-health-warn{color:#b45309;font-weight:900}
@media(max-width:900px){.ratel-widget-grid{grid-template-columns:1fr}.ratel-action-strip .ratel-btn{width:100%}}