@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap";html{background:#090a0f}:root{color-scheme:dark;font-family:Inter,Noto Sans Thai,ui-sans-serif,system-ui,sans-serif;font-feature-settings:"cv01","ss03","tnum";background:#08090b;color:#f6f3ea;--bg: #08090b;--canvas: #0b0d10;--panel: #111419;--panel-2: #151922;--panel-3: #1b202b;--elevated: #171b24;--line: rgba(226, 217, 195, .105);--line-strong: rgba(226, 217, 195, .18);--muted: #8f98a8;--soft: #c5cbd5;--text: #f6f3ea;--ink: #f9f5eb;--brand: #c8a45d;--brand-2: #e2c174;--brand-rgb: 200, 164, 93;--steel: #8ea0b8;--green: #39d98a;--amber: #e8b24b;--red: #ef6461;--blue: #75a7ff;--radius-xl: 22px;--radius-lg: 16px;--radius-md: 12px;--shadow-soft: 0 22px 80px rgba(0,0,0,.32);--shadow-card: 0 16px 40px rgba(0,0,0,.2)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 15% -10%,rgba(200,164,93,.16),transparent 30%),radial-gradient(circle at 86% 12%,rgba(117,167,255,.09),transparent 28%),linear-gradient(135deg,#07080a,#0a0d11 42%,#0e1117)}button,input,textarea,select{font:inherit}button{cursor:pointer}button,input,textarea,select{-webkit-font-smoothing:antialiased}::selection{background:rgba(var(--brand-rgb),.36);color:#fff6dd}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#e2d9c324;border:3px solid transparent;border-radius:999px;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background-color:#e2d9c33d}.appShell{height:100vh;min-height:0;display:grid;grid-template-columns:270px minmax(0,1fr);gap:14px;padding:14px;overflow:hidden}.sideRail{position:relative;min-height:0;max-height:calc(100vh - 28px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border:1px solid var(--line);background:linear-gradient(180deg,#14181ff5,#0a0c10f5);border-radius:24px;padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-soft),inset 0 1px #ffffff0b}.sideRail:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--brand-rgb),.58),transparent);pointer-events:none}.brand{display:flex;align-items:center;gap:12px;padding:3px 2px 13px;border-bottom:1px solid var(--line)}.brand>span{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#e2c174,#a77932 72%);color:#17120a;font-weight:800;font-size:13px;letter-spacing:.4px;box-shadow:0 12px 30px #c8a45d33,inset 0 1px #ffffff80}.brand strong{display:block;font-size:14px;letter-spacing:-.12px;color:var(--ink)}.brand small,.projectMeta small,.panelHeader small,.valuesHead small,.bottomBar span{display:block;color:var(--muted);font-size:11px;margin-top:2px}.uploadCard{display:grid;gap:9px}.dropZone,.miniUpload{position:relative;overflow:hidden;border:1px solid var(--line-strong);background:linear-gradient(180deg,#ffffff0e,#ffffff06);border-radius:16px;color:var(--soft);transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}.dropZone{padding:15px 13px;display:grid;gap:5px;min-height:94px}.dropZone:hover,.miniUpload:hover{transform:translateY(-1px);border-color:rgba(var(--brand-rgb),.62);background:linear-gradient(180deg,rgba(var(--brand-rgb),.105),#ffffff08);box-shadow:0 14px 30px #0000002e}.dropZone span{font-weight:700;color:var(--text);font-size:14px}.dropZone small{color:var(--muted);font-size:11px;line-height:1.35}.dropZone input,.miniUpload input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.miniUpload{display:flex;align-items:center;gap:9px;padding:11px 12px;font-size:12.5px;width:100%;text-align:left;min-height:43px;font-weight:700}button.miniUpload{cursor:pointer}button.miniUpload:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}.refillButton{border-color:rgba(var(--brand-rgb),.38);background:linear-gradient(180deg,rgba(var(--brand-rgb),.14),rgba(var(--brand-rgb),.055));color:#ffe0a0}.refillButton:hover:not(:disabled){border-color:rgba(var(--brand-rgb),.72);background:rgba(var(--brand-rgb),.18)}.hiddenFileInput{display:none}.statsGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.statCard{--accent: var(--brand-2);--accent-rgb: 226,193,116;position:relative;min-height:72px;text-align:left;overflow:hidden;background:linear-gradient(180deg,#ffffff0f,#ffffff06);border:1px solid rgba(var(--accent-rgb),.18);border-radius:17px;padding:12px 12px 11px;color:var(--text);transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.statCard:before{content:"";position:absolute;inset:auto 11px 9px;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.78))}.statCard:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.44);box-shadow:0 12px 26px #0000002e}.statCard.active{border-color:rgba(var(--accent-rgb),.72);background:linear-gradient(180deg,rgba(var(--accent-rgb),.16),#ffffff09);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.14),0 16px 32px #0000003d}.statCard.active:after{content:"";position:absolute;top:11px;right:11px;width:7px;height:7px;border-radius:999px;background:var(--accent);box-shadow:0 0 16px rgba(var(--accent-rgb),.7)}.statCard.all{--accent: #e2c174;--accent-rgb: 226,193,116}.statCard.ma{--accent: #75a7ff;--accent-rgb: 117,167,255}.statCard.done{--accent: #39d98a;--accent-rgb: 57,217,138}.statCard.partial{--accent: #e8b24b;--accent-rgb: 232,178,75}.statCard.empty{--accent: #ef6461;--accent-rgb: 239,100,97}.statCard b{display:block;font-size:24px;letter-spacing:-.65px;line-height:1;color:var(--ink)}.statCard span{color:#f6f3eaa6;font-size:10.5px;font-weight:700;letter-spacing:.15px}.projectMeta,.learningCard,.qcCard,.patternCard{border:1px solid var(--line);background:linear-gradient(180deg,#ffffff0b,#ffffff06);border-radius:17px}.projectMeta{margin-top:auto;display:flex;align-items:flex-start;gap:9px;padding:12px}.projectMeta span{display:block;font-size:12.5px;overflow-wrap:anywhere;color:var(--soft)}.learningCard,.qcCard,.patternCard{padding:12px}.learningCard{display:grid;gap:10px}.learningCard strong,.qcCard strong,.patternCard strong{display:block;font-size:12.5px;color:var(--ink)}.learningCard small,.qcCard small,.patternCard small{display:block;margin-top:2px;color:var(--muted);font-size:10.5px;line-height:1.35}.learningActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.learningActions button,.patternActions button{border:1px solid rgba(var(--brand-rgb),.22);background:rgba(var(--brand-rgb),.075);color:#f7d995;border-radius:11px;padding:8px;font-size:11.5px;font-weight:800;transition:transform .16s ease,border-color .16s ease,background .16s ease}.learningActions button:hover,.patternActions button:hover{transform:translateY(-1px);background:rgba(var(--brand-rgb),.13);border-color:rgba(var(--brand-rgb),.48)}.patternCard{display:grid;gap:9px}.patternHead{display:flex;align-items:flex-start;gap:8px;color:#f1d58d}.patternBody{border:1px solid rgba(var(--brand-rgb),.16);background:rgba(var(--brand-rgb),.055);border-radius:12px;padding:9px;display:grid;gap:2px}.patternBody span{color:#f1d58d;font-size:10.5px;font-weight:900;letter-spacing:.2px}.patternBody b{font-size:11.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.patternActions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.firebaseStatus{border:1px solid rgba(255,255,255,.075);border-radius:11px;padding:8px;background:#00000029;display:grid;gap:2px}.firebaseStatus span{font-size:10.5px;font-weight:900;letter-spacing:.3px;color:#cbd5e1}.firebaseStatus small{overflow-wrap:anywhere}.firebaseStatus.synced span,.firebaseStatus.ready span{color:#86efac}.firebaseStatus.syncing span{color:#fcd34d}.firebaseStatus.error span{color:#fca5a5}.qcHead{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.qcChips{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}.qcChips span{display:grid;place-items:center;min-height:28px;border-radius:10px;font-size:12px;font-weight:900}.qcChips .danger{background:#ef646124;color:#ffb4b2}.qcChips .warn{background:#e8b24b24;color:#ffd98b}.qcChips .info{background:#75a7ff21;color:#bdd5ff}.qcList{display:grid;gap:6px;max-height:192px;overflow:auto}.qcIssue{width:100%;border:1px solid var(--line);border-left:3px solid var(--muted);background:#00000021;color:var(--text);border-radius:11px;padding:8px;text-align:left;transition:background .15s ease,border-color .15s ease}.qcIssue:hover{background:#ffffff0b}.qcIssue.danger{border-left-color:var(--red)}.qcIssue.warn{border-left-color:var(--amber)}.qcIssue.info{border-left-color:var(--blue)}.qcIssue b{display:block;font-size:11px;margin-bottom:2px}.qcIssue span{display:block;color:var(--muted);font-size:10px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qcClean{border:1px solid rgba(57,217,138,.22);background:#39d98a17;color:#9cf4c3;border-radius:11px;padding:9px;font-size:12px;font-weight:800}.workspace{min-width:0;min-height:0;height:calc(100vh - 28px);overflow:hidden;display:flex;flex-direction:column;gap:12px}.topBar{min-height:106px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(200,164,93,.095),transparent 38%),linear-gradient(180deg,#181c24f5,#0d1016f0);border-radius:24px;padding:17px 19px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;box-shadow:var(--shadow-card),inset 0 1px #ffffff0b}.eyebrow{margin:0 0 8px;color:var(--brand-2);font-size:11px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}h1{margin:0;font-size:clamp(23px,2vw,29px);line-height:1.08;letter-spacing:-.72px;font-weight:700;color:var(--ink)}.topBar p:last-child{margin:7px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45;max-width:720px}.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.primaryButton,.ghostButton{border:1px solid var(--line);border-radius:12px;padding:9px 13px;color:var(--text);display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;white-space:nowrap;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.primaryButton{background:linear-gradient(145deg,#e1bd6b,#9f7430);color:#120f08;border-color:rgba(var(--brand-rgb),.62);box-shadow:0 14px 30px #c8a45d2e}.ghostButton{background:#ffffff0a;color:var(--soft)}.primaryButton:hover,.ghostButton:hover{transform:translateY(-1px);border-color:rgba(var(--brand-rgb),.5)}.ghostButton:hover{background:rgba(var(--brand-rgb),.075);color:var(--ink)}.primaryButton:disabled,.ghostButton:disabled{opacity:.5;cursor:not-allowed;transform:none}.statusLine{min-height:38px;border:1px solid var(--line);background:linear-gradient(180deg,#ffffff0b,#ffffff05);border-radius:15px;padding:9px 12px;color:var(--soft);font-size:12.5px;display:flex;align-items:center;gap:8px;box-shadow:inset 0 1px #ffffff09}.statusLine svg{color:var(--brand-2)}.processingOverlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 50% 40%,rgba(200,164,93,.18),transparent 26%),radial-gradient(circle at 20% 15%,rgba(117,167,255,.1),transparent 24%),#05070ad6;-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}.processingOverlay:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(circle at 50% 45%,black,transparent 72%);mask-image:radial-gradient(circle at 50% 45%,black,transparent 72%);pointer-events:none}.processingPanel{position:relative;width:min(520px,calc(100vw - 42px));border:1px solid rgba(var(--brand-rgb),.32);border-radius:28px;padding:92px 28px 28px;text-align:center;background:linear-gradient(180deg,#181c24f0,#0a0c11f0);box-shadow:0 34px 120px #00000085,inset 0 1px #ffffff0f}.processingPanel b{display:block;color:var(--ink);font-size:clamp(24px,3vw,34px);letter-spacing:-.7px}.processingPanel p{margin:10px auto 22px;max-width:390px;color:var(--soft);font-size:14px;line-height:1.6}.processingOrb{position:fixed;z-index:10000;width:116px;height:116px;margin-top:-176px;border-radius:999px;border:1px solid rgba(var(--brand-rgb),.3);background:radial-gradient(circle,rgba(226,193,116,.28),rgba(200,164,93,.06) 52%,transparent 68%);box-shadow:0 0 70px #c8a45d47,inset 0 0 34px #e2c17424;animation:orbPulse 1.8s ease-in-out infinite}.processingOrb:before,.processingOrb:after{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:inherit;border:2px solid transparent;border-top-color:#e2c174f2;border-right-color:#e2c17447;animation:orbSpin 1.2s linear infinite}.processingOrb:after{top:26px;right:26px;bottom:26px;left:26px;border-top-color:#75a7ffc7;border-right-color:#75a7ff29;animation-direction:reverse;animation-duration:1.9s}.processingOrb span{position:absolute;width:7px;height:7px;border-radius:999px;background:var(--brand-2);box-shadow:0 0 18px #e2c174e6}.processingOrb span:nth-child(1){top:16px;left:50%}.processingOrb span:nth-child(2){right:20px;bottom:28px;background:#75a7ff}.processingOrb span:nth-child(3){left:24px;bottom:24px}.processingBar{height:6px;overflow:hidden;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,255,255,.07)}.processingBar span{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--brand-2),#75a7ff,transparent);animation:barSweep 1.35s ease-in-out infinite}@keyframes orbSpin{to{transform:rotate(360deg)}}@keyframes orbPulse{0%,to{transform:scale(1);opacity:.92}50%{transform:scale(1.045);opacity:1}}@keyframes barSweep{0%{transform:translate(-120%)}to{transform:translate(260%)}}.spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.workGrid{flex:1 1 auto;min-height:0;height:100%;display:grid;grid-template-columns:minmax(420px,45%) minmax(520px,1fr);gap:14px;overflow:hidden}.tablePanel,.editorPanel{height:100%;min-height:0;border:1px solid var(--line);background:linear-gradient(180deg,#14181ff5,#0c0e13f5);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-card),inset 0 1px #ffffff09}.tablePanel{display:flex;flex-direction:column}.panelHeader{padding:15px;display:flex;gap:10px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#ffffff04}.panelHeader strong,.valuesHead strong{font-size:13.5px;color:var(--ink)}.filterPill{border:1px solid rgba(var(--brand-rgb),.34);background:rgba(var(--brand-rgb),.1);color:#ffe0a0;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800;white-space:nowrap}.filterPill:hover{background:rgba(var(--brand-rgb),.16);border-color:rgba(var(--brand-rgb),.62)}.searchBox{min-width:210px;height:37px;display:flex;align-items:center;gap:7px;background:#0000002e;border:1px solid var(--line);border-radius:12px;padding:0 10px;color:var(--muted)}.searchBox:focus-within{border-color:rgba(var(--brand-rgb),.5);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.09)}.searchBox input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:12.5px}.variableList{flex:1 1 auto;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain;padding:8px}.variableRow{width:100%;display:grid;grid-template-columns:10px 104px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid transparent;background:transparent;color:var(--text);text-align:left;border-radius:13px;padding:10px 11px;transition:background .14s ease,border-color .14s ease,transform .14s ease}.variableRow:hover{background:#ffffff0a}.variableRow.active{background:rgba(var(--brand-rgb),.105);border-color:rgba(var(--brand-rgb),.34);box-shadow:inset 0 0 0 1px rgba(var(--brand-rgb),.055)}.variableRow b{font-size:12.5px;color:var(--ink)}.variableRow em{font-style:normal;color:var(--soft);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.variableRow small{color:var(--muted);font-size:10.5px}.dot{width:8px;height:8px;border-radius:999px;background:var(--muted);box-shadow:0 0 0 3px #ffffff09}.dot.done,.badge.done{background:#39d98a29;color:#9cf4c3}.dot.partial,.badge.partial{background:#e8b24b2b;color:#ffd98b}.dot.empty,.badge.empty{background:#ef64612b;color:#ffb4b2}.dot.done{background:var(--green)}.dot.partial{background:var(--amber)}.dot.empty{background:var(--red)}.editorPanel{padding:18px 18px 20px;overflow:auto;overscroll-behavior:contain}.editorHead{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}.badge{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.35px;border:1px solid rgba(255,255,255,.08)}.maBadge{display:inline-flex;margin-left:7px;border-radius:999px;padding:4px 8px;font-size:10.5px;font-weight:800;color:#c6dbff;background:#75a7ff1f;border:1px solid rgba(117,167,255,.22)}h2{margin:8px 0 2px;font-size:23px;letter-spacing:-.45px;color:var(--ink)}.editorHead p{margin:0;color:var(--muted);font-size:12px}.fieldLabel{display:grid;gap:7px;margin:12px 0;color:var(--soft);font-size:11.5px;font-weight:800;letter-spacing:.12px}.fieldLabel textarea,.fieldLabel input,.valueRow input,select{width:100%;border:1px solid var(--line);background:#0000002e;color:var(--text);outline:0;border-radius:13px;padding:12px 13px;font-size:12.5px;line-height:1.5;resize:vertical;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.fieldLabel textarea{min-height:72px}.fieldLabel.important textarea{min-height:104px;border-color:rgba(var(--brand-rgb),.38);background:rgba(var(--brand-rgb),.055);box-shadow:inset 0 1px #ffffff08}.fieldLabel.missingField textarea,.valueRow input.missingInput{border-color:#ef6461c2!important;background:linear-gradient(135deg,#ef64612e,#50191c29)!important;color:#ffe4e6;box-shadow:inset 0 0 0 1px #f8717124,0 0 0 2px #ef646113}.fieldLabel.missingField textarea::placeholder,.valueRow input.missingInput::placeholder{color:#ffb4b2;opacity:1;font-weight:800}.fieldLabel.missingField:after{content:"Not found in QNR / waiting for review";justify-self:start;margin-top:-3px;color:#ffb4b2;font-size:10.5px;font-weight:800}.valueRow input.missingInput:focus{border-color:#ff8c89!important;box-shadow:0 0 0 3px #ef646138}.fieldLabel textarea:focus,.fieldLabel input:focus,.valueRow input:focus,select:focus{border-color:rgba(var(--brand-rgb),.62);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1);background:#00000040}.valuesHead{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line)}.valuesTools{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.thaiAutoButton{border:1px solid rgba(117,167,255,.34);background:#75a7ff1a;color:#c6dbff;border-radius:999px;padding:7px 11px;font-size:11.5px;font-weight:800;white-space:nowrap;transition:transform .16s ease,background .16s ease,border-color .16s ease}.thaiAutoButton:hover{border-color:#75a7ffad;background:#75a7ff2b;transform:translateY(-1px)}.valueTable{display:grid;gap:7px}.valueRow{display:grid;grid-template-columns:64px minmax(180px,.9fr) minmax(260px,1.35fr);gap:8px;align-items:center}.valueRow code{min-height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:#00000038;color:#f1d58d;font-size:11.5px}.emptyState{height:100%;display:grid;place-items:center;color:var(--muted)}.bottomBar{border:1px solid var(--line);background:linear-gradient(180deg,#14181ff5,#0c0e13f0);border-radius:19px;padding:12px;display:flex;align-items:center;gap:10px;justify-content:flex-end;box-shadow:inset 0 1px #ffffff08}.bottomBar>div{margin-right:auto}.bottomBar strong{display:block;font-size:12.5px;color:var(--ink)}.bottomBar select{width:190px;height:38px;padding:0 10px}@media (max-width: 980px){.appShell{grid-template-columns:1fr;padding:10px}.sideRail{display:grid;grid-template-columns:1fr 1fr}.statsGrid{grid-template-columns:repeat(4,1fr)}.projectMeta{margin-top:0}.workGrid{grid-template-columns:1fr}.variableList{max-height:360px}.topBar{flex-direction:column}}@media (max-width: 640px){.sideRail{grid-template-columns:1fr}.statsGrid{grid-template-columns:1fr 1fr}.topBar{padding:18px}.actions,.bottomBar{align-items:stretch;flex-direction:column}.valueRow{grid-template-columns:58px 1fr}.valueRow input:last-child{grid-column:2 / -1}.variableRow{grid-template-columns:10px 70px 1fr}.variableRow small{display:none}}