.trend-main{max-width:1440px;margin:auto;padding:0 28px 72px}.trend-hero{min-height:270px;display:flex;align-items:center;justify-content:space-between;gap:50px;padding:46px 5%;background:radial-gradient(circle at 82% 45%,#f6c9452b,transparent 26%),linear-gradient(135deg,#0b2c3d,#071923);border-radius:0 0 34px 34px}.trend-hero h1{font-size:clamp(2.7rem,6vw,5.6rem);line-height:.92;margin:.18em 0;color:#fff}.trend-hero p:not(.eyebrow){max-width:630px;color:#a9c0c6;font-size:1.08rem}.live-summary{min-width:260px;padding:25px;border:1px solid #ffffff1c;border-radius:22px;background:#04131c94;display:grid;gap:8px}.live-summary strong{font-size:2.4rem;color:#f6c945}.live-summary small{color:#91aab0}.live-dot{display:flex;align-items:center;gap:8px}.live-dot:before{content:"";width:9px;height:9px;border-radius:50%;background:#8fa0a5;box-shadow:0 0 0 5px #8fa0a51f}.live-dot.online:before{background:#53d391}.period-tabs{display:flex;gap:8px;overflow:auto;padding:24px 4px 12px}.period-tabs button,.secondary-button,.round-button,.text-button,#filters-toggle{border:0;font:inherit;cursor:pointer}.period-tabs button{white-space:nowrap;padding:11px 18px;border-radius:999px;background:#102f3c;color:#b8cdd2}.period-tabs button.active{background:#f6c945;color:#15242a;font-weight:700}.trend-toolbar{display:flex;align-items:center;justify-content:center;gap:14px;padding:12px 0 24px}.round-button{width:44px;height:44px;border-radius:50%;font-size:1.8rem;background:#123643;color:#fff}.round-button:disabled{opacity:.3}.period-title{min-width:min(420px,45vw);text-align:center;display:grid}.period-title span{color:#7f9ca4;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}.period-title strong{font-size:1.3rem}.secondary-button{padding:10px 16px;border-radius:12px;background:#173b48;color:#e9f3f4}.trend-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:22px}.filter-panel,.modern-trend-panel,.stats-grid article,.data-panel{background:#0b2633;border:1px solid #ffffff12;border-radius:22px}.filter-panel{padding:20px;height:max-content;position:sticky;top:90px}.filter-heading{display:flex;justify-content:space-between;align-items:start}.filter-heading h2{margin:2px 0 16px}.filter-heading button{background:none;color:#f6c945}.filter-panel fieldset{border:0;border-top:1px solid #ffffff14;padding:16px 0 4px;margin:0}.filter-panel legend{padding-top:15px;color:#819da5;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em}.filter-option{display:flex;align-items:center;gap:10px;padding:7px 0;color:#d7e5e7}.filter-option input,.scale-control input{accent-color:#f6c945}.filter-option i{width:18px;height:3px;background:var(--filter-color)}.scale-control{display:grid;gap:10px;margin-top:16px}.scale-control output{color:#f6c945}.scale-control input{width:100%}.chart-column{min-width:0;display:grid;gap:20px}.modern-trend-panel,.data-panel{padding:24px}.chart-head{display:flex;justify-content:space-between;gap:20px}.chart-head h2{margin:.18em 0}.chart-total{text-align:right;display:grid}.chart-total span{color:#819da5;font-size:.78rem}.chart-total strong{font-size:2rem;color:#f6c945}.modern-trend-panel .chart-wrap{height:clamp(310px,45vw,520px);margin-top:18px;position:relative}.modern-trend-panel canvas{width:100%;height:100%;display:block}.chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:#8fa7ad}.chart-empty[hidden]{display:none}.modern-legend{display:flex;flex-wrap:wrap;gap:16px;color:#9eb3b8;font-size:.82rem;padding-top:12px}.modern-legend span{display:flex;align-items:center;gap:7px}.modern-legend i{width:20px;height:3px;background:var(--legend-color)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stats-grid article{padding:18px;display:grid;gap:4px}.stats-grid span{font-size:.76rem;color:#819da5;text-transform:uppercase}.stats-grid strong{font-size:1.45rem}.stats-grid small{color:#91a8ae}.text-button{background:none;color:#f6c945}.data-table-wrap{max-height:430px;overflow:auto}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:12px 14px;border-bottom:1px solid #ffffff12;text-align:left}.data-table th{position:sticky;top:0;background:#10313e;color:#f4d977}.data-table td:nth-child(2){font-weight:700;color:#fff}.data-bar{height:6px;min-width:2px;border-radius:4px;background:linear-gradient(90deg,#f6c945,#e6943a)}
@media(max-width:900px){.trend-main{padding:0 16px 50px}.trend-hero{min-height:auto;padding:36px 24px}.trend-layout{grid-template-columns:1fr}.filter-panel{position:static}.stats-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.trend-main{padding:0 10px 40px}.trend-hero{flex-direction:column;gap:22px}.period-tabs button{padding:9px 13px}.trend-toolbar{flex-wrap:wrap}.period-title{order:-1;width:100%;min-width:100%}.modern-trend-panel,.data-panel{padding:16px}.modern-trend-panel .chart-wrap{height:320px}.data-table{min-width:520px}}
.filter-option[hidden]{display:none!important}
.trend-tooltip{position:absolute;z-index:4;pointer-events:none;min-width:150px;padding:9px 11px;border:1px solid #ffffff24;border-radius:10px;background:#061a24ed;box-shadow:0 8px 24px #0006;color:#eaf4f5;font-size:.78rem;line-height:1.45;transform:translate(12px,-50%)}
.trend-tooltip[hidden]{display:none}.trend-tooltip strong{display:block;margin-bottom:4px;color:#fff}.trend-tooltip span{display:flex;align-items:center;gap:7px;white-space:nowrap}.trend-tooltip i{width:8px;height:8px;border-radius:2px;background:var(--tooltip-color);flex:0 0 auto}
