@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&family=Inter:wght@400;600;700;800&display=swap";:root{--bg:#f4f9fc;--panel:#eaf3fb;--card:#fff;--line:#d4e2eb;--text:#0f172a;--muted:#64748b;--blue:#0878bf;--blue2:#0369a1;--sky:#e0f6ff;--green:#cbf6d5;--amber:#fff1c7;--red:#ffe4e4;--shadow:0 1px 2px #0f172a0d,0 16px 48px #0f172a12;--radius:16px;color:var(--text);background:var(--bg);font-family:Noto Sans Thai,Inter,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--bg);margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit}.app-shell{grid-template-columns:274px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--line);background:#e8f2fb;flex-direction:column;gap:12px;height:100vh;padding:18px 14px;display:flex;position:sticky;top:0;overflow:auto}.brand-block{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:8px 4px 18px;display:flex}.brand-mark{color:#fff;background:linear-gradient(135deg,#0787ca,#005d9f);border-radius:999px;place-items:center;width:42px;height:42px;display:grid;box-shadow:0 10px 22px #0067a140}.brand-mark svg{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}.brand-block strong{font-weight:800;line-height:1.1;display:block}.brand-block span{color:#334155;font-size:12px;display:block}.nav-list{gap:12px;display:grid}.nav-group p{color:#7b8ca0;margin:8px 10px;font-size:11px;font-weight:700}.nav-item{text-align:left;background:0 0;border:0;border-radius:9px;align-items:center;gap:12px;width:100%;min-height:41px;padding:7px 10px;display:flex}.nav-item:hover{background:#dcebf6}.nav-item.active{color:#fff;background:linear-gradient(#087dc5,#0067aa);box-shadow:0 10px 26px #0067aa2e}.icon{place-items:center;width:21px;min-width:21px;font-weight:800;display:inline-grid}.nav-item span strong{font-size:12px;line-height:1.2;display:block}.nav-item small{color:inherit;opacity:.78;font-size:11px;display:block}.plan-box{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;border-radius:14px;grid-template-columns:1fr auto;align-items:center;gap:2px;margin-top:auto;padding:13px;display:grid}.plan-box span{color:var(--muted);font-size:11px}.plan-box strong{font-size:13px}.plan-box button{color:#08703a;background:#d9f8df;border:0;border-radius:999px;grid-area:1/2/3;padding:6px 10px;font-size:11px;font-weight:800}.main{min-width:0}.topbar{z-index:5;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffe6;align-items:center;gap:10px;height:68px;padding:12px 24px;display:flex;position:sticky;top:0}.search{border:1px solid var(--line);background:#fff;border-radius:9px;flex:1;align-items:center;gap:9px;min-width:250px;height:42px;padding:0 8px 0 14px;display:flex}.search input{border:0;outline:0;flex:1;min-width:0}.search button,.export,.scan{color:#fff;background:linear-gradient(#0b80c9,#006aad);border:0;border-radius:9px;padding:9px 16px;font-weight:800}.source,.sync,.clock,.bell,.upload,.lang{border:1px solid var(--line);background:#fff;border-radius:9px;height:42px}.source,.sync,.clock{align-items:center;gap:9px;padding:0 12px;display:flex}.source b{color:#fff;background:#f4511e;border-radius:8px;place-items:center;width:28px;height:28px;display:grid}.source strong,.sync strong,.clock strong{font-size:12px;display:block}.source small,.sync small,.clock small{color:var(--muted);font-size:10px;line-height:1.05;display:block}.lang{display:flex;overflow:hidden}.lang button{background:#fff;border:0;padding:0 9px;font-weight:800}.lang .active{background:var(--blue);color:#fff}.bell{width:42px}.user{align-items:center;gap:10px;min-width:max-content;display:flex}.user>span{color:#fff;background:linear-gradient(135deg,#d2b3b4,#9ca3af);border-radius:999px;place-items:center;width:42px;height:42px;font-weight:800;display:grid}.user strong{font-size:12px}.user small{color:var(--muted);font-size:10px;display:block}.content{padding:28px 30px 46px}.title-row{justify-content:space-between;align-items:center;gap:20px;margin-bottom:14px;display:flex}.title-row h1{letter-spacing:-.03em;margin:0 0 8px;font-size:31px;font-weight:900;line-height:1}.title-row p{color:#475569;margin:0}.title-row>div:last-child{gap:10px;display:flex}.upload{padding:0 15px;font-weight:800}.success-banner{color:#22402a;background:#d4f9dc;border:1px solid #86d69d;border-radius:8px;align-items:center;gap:12px;height:55px;margin-bottom:16px;padding:0 18px;display:flex}.success-banner span{color:#41634a;font-size:12px;font-weight:700}.hero-card{min-height:198px;box-shadow:var(--shadow);background:linear-gradient(110deg,#f4fdff 0 58%,#c9f2ff 58% 72%,#dff8ff 72%);border:1px solid #21a9c1;border-radius:18px;align-items:center;gap:34px;padding:28px;display:flex;overflow:hidden}.radar-graphic{background:radial-gradient(circle,#d6f4ff 1px,#0000 2px),linear-gradient(135deg,#c9f1ff,#eaffff);border:1px solid #9bd9ea;border-radius:999px;width:120px;height:120px;position:relative;box-shadow:0 18px 34px #1293b438}.radar-graphic span{border:1px solid #0068a059;border-radius:999px;position:absolute;inset:16px}.radar-graphic span:nth-child(2){inset:32px}.radar-graphic span:nth-child(3){inset:48px}.radar-graphic i{transform-origin:100%;border-top:3px solid #0878bf;width:48px;position:absolute;top:58px;left:34px;transform:rotate(20deg)}.radar-graphic b{background:#16a34a;border-radius:999px;width:10px;height:10px;position:absolute;top:37px;right:28px;box-shadow:-16px 18px #008fd3}.hero-copy small{color:#006aa8;font-weight:900;display:block}.hero-copy h2{color:#06315e;margin:3px 0 6px;font-size:31px;font-weight:900;line-height:1.15}.hero-copy p{color:#557085;max-width:820px;margin:0 0 17px;line-height:1.45}.hero-actions{gap:10px;display:flex}.hero-actions button{border:1px solid var(--line);background:#fff;border-radius:8px;height:40px;padding:0 16px;font-weight:800}.hero-actions button:first-child{color:#fff;background:linear-gradient(#087dc5,#0067aa);border:0}.metrics{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:14px 0 16px;display:grid}.metric{border:1px solid var(--line);background:#fff;border-radius:13px;align-items:center;gap:12px;padding:18px 14px;display:flex;box-shadow:0 1px 2px #0f172a0a}.metric .icon{border-radius:10px;width:36px;height:36px}.metric.blue .icon{color:#0780bd;background:#d9f3ff}.metric.green .icon{color:#16a34a;background:#d9fbe1}.metric.amber .icon{color:#d18b00;background:#fff0c2}.metric.violet .icon{color:#7c3aed;background:#ede9fe}.metric.cyan .icon{color:#0284c7;background:#dff6ff}.metric.red .icon{color:#dc2626;background:#ffe2e2}.metric span{color:#475569;font-size:11px;font-weight:700;display:block}.metric strong{font-size:24px;font-weight:900;line-height:1;display:block}.metric small{color:#006aa8;font-size:10px;font-weight:800;display:block}.card{border:1px solid var(--line);background:#fff;border-radius:14px;margin-bottom:16px;box-shadow:0 1px 2px #0f172a0a}.opportunities{padding:16px}.section-head{justify-content:space-between;align-items:start;gap:16px;margin-bottom:12px;display:flex}.section-head h3{margin:0;font-size:18px}.section-head p{color:#475569;margin:2px 0 0;font-size:13px}.section-head button,.table-controls button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 14px;font-weight:800}.opportunity-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.opp-col{border:1px solid var(--line);border-radius:13px;padding:12px}.opp-col.hot{background:#d6f8d8}.opp-col.content{background:#dff4ff}.opp-col.watch{background:#fff0c8}.opp-col.missing{background:#f2f6f9}.opp-col h4{margin:0;font-size:15px}.opp-col>p{color:#475569;margin:2px 0 12px;font-size:12px}.opp-card{background:#ffffffbf;border-radius:8px;margin-top:10px;padding:12px;position:relative}.opp-card strong{padding-right:62px;font-size:13px;line-height:1.25;display:block}.opp-card span{color:#0878bf;font-size:11px;font-weight:900;position:absolute;top:12px;right:10px}.opp-card small{color:#334155;margin-top:8px;line-height:1.25;display:block}.table-card{overflow:hidden}.table-head{margin:0;padding:14px 16px}.table-controls{color:#475569;align-items:center;gap:8px;font-size:12px;display:flex}.table-controls select{border:1px solid var(--line);background:#fff;border-radius:8px;height:35px;padding:0 30px 0 10px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;min-width:1080px}th{text-align:left;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#eaf8ff;height:47px;padding:0 10px;font-size:12px}td{vertical-align:middle;border-bottom:1px solid #e2e8f0;padding:12px 10px;font-size:13px}td strong{max-width:380px;line-height:1.25;display:block}td small{color:#475569;line-height:1.2;display:block}.thumb{background:linear-gradient(135deg,#cbd5e1,#fff);border-radius:7px;width:48px;height:48px;box-shadow:inset 0 0 0 1px #cbd5e1}.t1{background:linear-gradient(135deg,#c8facc,#fbd38d,#93c5fd)}.t2{background:linear-gradient(135deg,#111827,#f87171,#facc15)}.t3{background:linear-gradient(135deg,#dbeafe,#94a3b8)}.t4{background:linear-gradient(135deg,#e5e7eb,#4b5563)}.t5{background:linear-gradient(135deg,#c7d2fe,#334155)}.t6{background:linear-gradient(135deg,#020617,#64748b)}.t7{background:linear-gradient(135deg,#e879f9,#60a5fa,#f59e0b)}.shop-badge{color:#fff;background:#ff5b2e;border-radius:9px;place-items:center;width:32px;height:32px;font-weight:900;display:grid}.score{color:#8a5b00;background:#fff1c7;border-radius:999px;place-items:center;min-width:34px;height:26px;font-weight:900;display:inline-grid}td b{color:#9a6a00}.eye{border:1px solid var(--line);color:#0878bf;background:#fff;border-radius:999px;width:28px;height:28px}@media (width<=1200px){.app-shell{grid-template-columns:80px 1fr}.sidebar{padding-inline:10px}.brand-block div:not(.brand-mark),.nav-item span,.nav-group p,.plan-box{display:none}.nav-item{justify-content:center}.topbar{overflow:auto}.metrics{grid-template-columns:repeat(3,1fr)}.opportunity-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=760px){.app-shell{display:block}.sidebar{flex-direction:row;height:auto;position:static}.nav-list{display:none}.content{padding:18px}.topbar{flex-wrap:wrap;height:auto;padding:10px;position:static}.source,.sync,.clock,.user{display:none}.title-row,.hero-card{display:block}.metrics,.opportunity-grid{grid-template-columns:1fr}.hero-actions{flex-wrap:wrap}.radar-graphic{margin-bottom:16px}}