:root{--bg:#0a0e1a;--bg-soft:#0d1324;--panel:#101830;--panel-border:#1d2a4d;--panel-border-strong:#2a3b6e;--text:#e8edf7;--text-dim:#8fa0c2;--text-faint:#5b6a8f;--accent:#00d4ff;--accent-soft:rgba(0,212,255,.12);--accent-border:rgba(0,212,255,.35);--breaking:#ff2d55;--hot:#ff6b3d;--rising:#ffbb2e;--emerging:#22d3ee;--peak:#a78bfa;--normal:#4ade80;--declining:#6b7a99;--danger:#ff2d55;--radius:14px;--radius-sm:8px;--font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace}*{box-sizing:border-box}body,html{margin:0;padding:0;font-family:Noto Sans Thai,Noto Sans Thai UI,Sarabun,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:radial-gradient(1200px 800px at 85% -10%,rgba(0,212,255,.07),transparent 60%),radial-gradient(900px 700px at -10% 110%,rgba(167,139,250,.06),transparent 60%),var(--bg);color:var(--text);min-height:100%}a{color:inherit;text-decoration:none}.app-header{position:-webkit-sticky;position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:rgba(10,14,26,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--panel-border)}.brand{display:flex;flex-direction:column;gap:2px}.brand-name{font-weight:700;font-size:18px;letter-spacing:.4px}.brand-sub{font-size:10px;letter-spacing:2.2px;color:var(--accent);font-family:var(--font-mono)}.app-nav{display:flex;gap:6px;flex-wrap:wrap}.nav-link{padding:8px 14px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:1.4px;color:var(--text-dim);border:1px solid transparent;transition:all .15s ease}.nav-link:hover{color:var(--text);background:var(--panel);border-color:var(--panel-border)}.app-main{max-width:1240px;margin:0 auto;padding:28px 24px 60px}.app-footer{border-top:1px solid var(--panel-border);padding:18px 28px;font-size:11px;color:var(--text-faint)}.footer-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.mock-banner{font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;color:#ffd166;border:1px dashed rgba(255,209,102,.5);padding:4px 10px;border-radius:999px}.page-head{margin-bottom:24px}.page-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:2.4px;color:var(--accent);margin-bottom:8px}.page-title{font-size:30px;font-weight:700;margin:0 0 6px}.page-desc{color:var(--text-dim);font-size:14px;max-width:760px;margin:0}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:20px}.panel-title{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--text-dim);margin:0 0 16px;text-transform:uppercase}.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-gap:12px;gap:12px;margin-bottom:20px}.kpi-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:14px 16px}.kpi-label{font-size:10px;letter-spacing:1.6px;color:var(--text-faint);font-family:var(--font-mono)}.kpi-value{font-size:28px;font-weight:700;margin-top:6px}.kpi-sub{font-size:11px;color:var(--text-dim);margin-top:4px}.two-col{grid-template-columns:1.4fr 1fr;grid-gap:16px}.grid-2,.two-col{display:grid;gap:16px}.grid-2{grid-template-columns:1fr 1fr;grid-gap:16px}.badge{display:inline-flex;align-items:center;padding:3px 9px;font-size:10px;font-weight:700;font-family:var(--font-mono);letter-spacing:1px;border-radius:999px;border:1px solid;white-space:nowrap}.badge-breaking{color:var(--breaking);border-color:rgba(255,45,85,.6);background:rgba(255,45,85,.12)}.badge-hot{color:var(--hot);border-color:rgba(255,107,61,.6);background:rgba(255,107,61,.12)}.badge-rising{color:var(--rising);border-color:rgba(255,187,46,.6);background:rgba(255,187,46,.12)}.badge-emerging{color:var(--emerging);border-color:rgba(34,211,238,.6);background:rgba(34,211,238,.12)}.badge-peak{color:var(--peak);border-color:rgba(167,139,250,.6);background:rgba(167,139,250,.12)}.badge-normal{color:var(--normal);border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.1)}.badge-declining{color:var(--declining);border-color:rgba(107,122,153,.5);background:rgba(107,122,153,.1)}.heat-4{color:var(--breaking);font-weight:700}.heat-3{color:var(--hot)}.heat-2{color:var(--rising)}.heat-1{color:var(--normal)}.heat-0{color:var(--text-dim)}.filter-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:18px;background:var(--bg-soft);border:1px solid var(--panel-border);border-radius:var(--radius);padding:16px}.filter-field{display:flex;flex-direction:column;gap:5px}.filter-label{font-size:10px;letter-spacing:1.4px;color:var(--text-faint);font-family:var(--font-mono)}.filter-input,.filter-select{background:var(--panel);border:1px solid var(--panel-border-strong);color:var(--text);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;min-width:150px;outline:none}.filter-input:focus,.filter-select:focus{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-soft)}.filter-reset{background:transparent;border:1px solid var(--panel-border-strong);color:var(--text-dim);border-radius:var(--radius-sm);padding:9px 14px;font-size:12px;cursor:pointer}.filter-reset:hover{color:var(--text);border-color:var(--accent-border)}.trend-table{width:100%;border-collapse:collapse;font-size:13px}.trend-table th{text-align:left;font-size:10px;letter-spacing:1.6px;color:var(--text-faint);font-family:var(--font-mono);padding:10px 12px;border-bottom:1px solid var(--panel-border-strong);white-space:nowrap}.trend-table td{padding:12px;border-bottom:1px solid var(--panel-border);vertical-align:middle}.trend-table tbody tr{transition:background .12s ease}.trend-table tbody tr:hover{background:rgba(0,212,255,.05)}.topic-link{font-weight:600;color:var(--text)}.topic-link:hover{color:var(--accent)}.cell-dim{color:var(--text-dim);font-size:12px}.up{color:var(--normal)}.down,.up{font-weight:600}.down{color:var(--danger)}.score-bar{position:relative;height:6px;width:110px;border-radius:999px;background:hsla(0,0%,100%,.08);overflow:hidden}.score-bar-fill{position:absolute;inset:0 auto 0 0;border-radius:999px;background:linear-gradient(90deg,#22d3ee,#ff6b3d)}.spark{stroke:var(--accent);stroke-width:2;fill:none}.row-list{display:flex;flex-direction:column;gap:12px}.row-item{display:flex;align-items:center;gap:14px;background:var(--bg-soft);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:14px 16px;transition:border-color .15s ease}.row-item:hover{border-color:var(--panel-border-strong)}.row-main{flex:1 1;min-width:0}.row-title{font-weight:600;font-size:14px}.row-desc{color:var(--text-dim);font-size:12px;margin-top:3px}.status-chip{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;padding:4px 10px;border-radius:999px;border:1px solid;white-space:nowrap}.status-mock{color:var(--rising);border-color:rgba(255,187,46,.5);background:rgba(255,187,46,.08)}.status-notconnected{color:var(--declining);border-color:rgba(107,122,153,.4);background:rgba(107,122,153,.08)}.status-connected{color:var(--normal);border-color:rgba(74,222,128,.5);background:rgba(74,222,128,.08)}.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-gap:12px;gap:12px;margin:18px 0}.meta-card{background:var(--bg-soft);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:12px 14px}.meta-label{font-size:10px;letter-spacing:1.4px;color:var(--text-faint);font-family:var(--font-mono)}.meta-value{margin-top:5px;font-size:18px;font-weight:700}.keyword-chip{display:inline-block;background:var(--panel);border:1px solid var(--panel-border-strong);color:var(--text-dim);border-radius:999px;padding:4px 12px;font-size:12px;margin:3px 4px 3px 0}.callout{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:12px 16px;font-size:13px;color:var(--text)}.callout-title{font-family:var(--font-mono);font-size:10px;letter-spacing:1.6px;color:var(--accent);margin-bottom:6px}.back-link{display:inline-block;margin-bottom:16px;font-size:12px;color:var(--text-dim)}.back-link:hover{color:var(--accent)}.empty-state{padding:48px 24px;text-align:center;color:var(--text-dim);border:1px dashed var(--panel-border-strong);border-radius:var(--radius)}@media (max-width:1024px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2,.two-col{grid-template-columns:1fr}}@media (max-width:640px){.app-header{flex-direction:column;align-items:flex-start}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-title{font-size:24px}.trend-table{font-size:12px}}body,html{width:100%;max-width:100%;overflow-x:hidden}.mobile-drawer,.mobile-header,.mobile-overlay{display:none}@media (max-width:1023px){.desktop-header{display:none}.mobile-header{display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:60;align-items:center;gap:10px;height:56px;padding:env(safe-area-inset-top) 12px 0;background:rgba(10,14,26,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--panel-border)}.hamburger-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;border:1px solid var(--panel-border);border-radius:var(--radius-sm);background:var(--panel);color:var(--text);cursor:pointer}.hamburger-button:active{border-color:var(--accent-border)}.mobile-brand{display:flex;flex-direction:column;min-width:0;flex:1 1}.mobile-brand-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-short{display:none}.mobile-brand-sub{font-size:9px;letter-spacing:1.8px;color:var(--accent);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mock-badge{flex-shrink:0;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1px;color:#ffd166;border:1px dashed rgba(255,209,102,.55);padding:5px 9px;border-radius:999px}}@media (max-width:479px){.brand-long{display:none}.brand-short{display:inline}.mobile-header{gap:8px;padding:0 8px}}@media (max-width:1023px){.mobile-overlay{display:block;position:fixed;inset:0;z-index:70;background:rgba(4,7,15,.62);opacity:0;pointer-events:none;transition:opacity .22s ease}.mobile-overlay.show{opacity:1;pointer-events:auto}.mobile-drawer{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;z-index:80;width:min(86vw,320px);background:var(--bg-soft);border-right:1px solid var(--panel-border-strong);transform:translateX(-100%);transition:transform .22s ease;padding-bottom:env(safe-area-inset-bottom);visibility:hidden}.mobile-drawer.open{transform:translateX(0);visibility:visible}.mobile-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 14px 14px;border-bottom:1px solid var(--panel-border)}.drawer-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;border:1px solid var(--panel-border);border-radius:var(--radius-sm);background:var(--panel);color:var(--text);cursor:pointer}.mobile-nav-list{list-style:none;margin:0;padding:10px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}.mobile-nav-link{display:flex;align-items:center;min-height:48px;padding:10px 14px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;color:var(--text-dim);border:1px solid transparent}.mobile-nav-link:hover{background:var(--panel);color:var(--text)}.mobile-nav-link.active{background:var(--accent-soft);border-color:var(--accent-border);color:var(--text)}.mobile-drawer-foot{margin-top:auto;padding:14px;border-top:1px solid var(--panel-border);font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:#ffd166}.app-main{padding:20px 16px 48px}}@media (max-width:767px){.app-main{padding:14px 14px 40px}}@media (max-width:479px){.app-main{padding:12px 12px 36px}}.page-title{font-size:clamp(1.35rem,4vw,2rem)}@media (max-width:767px){body{font-size:15px}.page-desc{font-size:13px}.panel{padding:16px 14px}}@media (max-width:1279px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:1023px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:767px){.kpi-grid{gap:10px}.kpi-card{padding:12px}.kpi-value{font-size:22px}}@media (max-width:1023px){.filter-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px;align-items:end}.filter-bar>.filter-field,.filter-bar>.filter-field[style]{min-width:0}.filter-input,.filter-select{width:100%;min-width:0;min-height:44px;font-size:16px}.filter-reset{min-height:44px;font-size:14px}}@media (max-width:520px){.filter-bar{grid-template-columns:1fr}}.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.mobile-trend-list{display:none}@media (min-width:768px){.mobile-trend-list{display:none}}@media (max-width:767px){.desktop-table{display:none}.mobile-trend-list{display:flex;flex-direction:column;gap:12px}.trend-mobile-card{background:var(--bg-soft);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:12px 14px}.tmc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tmc-rank{font-family:var(--font-mono);font-size:12px;color:var(--text-faint)}.tmc-title{flex:1 1;min-width:0;font-size:15px}.tmc-meta{margin-top:4px;font-size:12px;color:var(--text-dim)}.tmc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:8px;gap:8px;margin-top:12px}.tmc-stat{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:8px;text-align:center}.tmc-stat-label{display:block;font-size:9px;letter-spacing:1px;color:var(--text-faint);font-family:var(--font-mono)}.tmc-stat b{display:block;margin-top:3px;font-size:14px}.tmc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.tmc-spark{flex-shrink:0}.trend-table.stacked,.trend-table.stacked tbody,.trend-table.stacked td,.trend-table.stacked tr{display:block;width:100%}.trend-table.stacked thead{display:none}.trend-table.stacked tr{background:var(--bg-soft);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:10px}.trend-table.stacked td{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:none}.trend-table.stacked td:before{content:attr(data-label);font-family:var(--font-mono);font-size:10px;letter-spacing:1.2px;color:var(--text-faint);flex-shrink:0}.trend-table.stacked td:first-child{padding-top:2px}.trend-table.stacked td:first-child:before{display:none}.trend-table.stacked .score-bar{width:90px}}.platform-grid,.region-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;gap:12px}.insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:16px;gap:16px}.insight-grid .panel{margin:0}@media (max-width:1023px){.platform-grid,.region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-grid{grid-template-columns:1fr}}@media (max-width:767px){.platform-grid,.region-grid{grid-template-columns:1fr}}.platform-card{flex-wrap:wrap}.platform-card .status-chip{margin-left:auto}@media (max-width:767px){.row-item{min-height:48px;padding:12px 14px}.footer-inner{flex-direction:column;align-items:flex-start;gap:8px}.app-footer{padding:14px 16px}}