@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Space+Grotesk:wght@600;700&display=swap";:root{font-family:Noto Sans Thai,sans-serif;color:#181817;background:#f3f1ed;font-synthesis:none;--red: #e23a2e;--line: #ddd9d2;--muted: #716e68;--paper: #fff;--soft: #f8f7f4}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}.topbar{height:72px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#ffffffeb;position:sticky;top:0;z-index:10}.brand{display:flex;gap:12px;align-items:center}.brandmark{width:38px;height:38px;border-radius:10px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:22px;box-shadow:0 5px 14px #e23a2e33}.brand strong{font-family:Space Grotesk,Noto Sans Thai;display:block;font-size:17px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:-2px}.system-status{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--soft);font-size:12px;color:var(--muted)}.system-status.success{color:#18703a;background:#edf8f0}.system-status.error{color:#a92820;background:#fff0ed}.workspace{display:grid;grid-template-columns:minmax(270px,20%) minmax(510px,1fr) minmax(310px,24%);gap:1px;background:var(--line);min-height:calc(100vh - 72px)}.panel{background:var(--paper);padding:24px;min-width:0}.catalog-panel{background:#f7f5f1;overflow:auto}.section-title{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px}.section-title>span{font-family:Space Grotesk;font-size:11px;font-weight:700;color:var(--red);padding-top:5px}.section-title h2{margin:0;font-size:19px}.section-title p{margin:2px 0 0;color:var(--muted);font-size:12px}.brief-panel label,.plan-panel label,.skill-gate label{display:grid;gap:6px;font-size:12px;font-weight:600;margin-bottom:14px}input,select,textarea{width:100%;border:1px solid #d7d3cc;background:#fff;border-radius:8px;padding:9px 10px;color:#222;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px #e23a2e1a}textarea{resize:vertical}.two{display:grid;grid-template-columns:1fr .65fr;gap:10px}.checklist{border-top:1px solid var(--line);padding-top:16px;margin-top:6px}.checklist h3{font-size:13px;display:flex;align-items:center;gap:7px}.checklist>div{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;padding:6px 0}.checklist>div>span{width:18px;height:18px;border:1px solid #c9c5be;border-radius:5px;display:grid;place-items:center}.checklist .done{color:#1c6d38}.checklist .done>span{background:#e7f5ea;border-color:#9ecfab}.recommendation{display:flex;gap:10px;border-left:3px solid var(--red);background:#fff1ee;padding:12px 14px;margin:-4px 0 18px;color:#77231d}.recommendation>svg{flex:0 0 auto;margin-top:2px}.recommendation strong{font-size:12px}.recommendation p{margin:1px 0 0;font-size:11px;color:#8d4e48}.controls{margin-bottom:16px}.search{position:relative}.search svg{position:absolute;left:11px;top:10px;color:var(--muted)}.search input{padding-left:35px}.filters{display:flex;gap:6px;overflow:auto;padding-top:9px}.filters button,.badges span{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 9px;font-size:10px;color:var(--muted)}.filters button.active{background:#1f1f1e;border-color:#1f1f1e;color:#fff}.grid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:13px}.element-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.element-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #1e1c1917}.element-card.chosen{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}.preview{aspect-ratio:16/9;background:#eae7e1;position:relative;overflow:hidden}.preview img,.preview video{width:100%;height:100%;object-fit:cover;display:block}.preview span{position:absolute;left:7px;bottom:7px;background:#141414c2;color:#fff;padding:3px 6px;border-radius:5px;font-size:8px;opacity:0;transition:opacity .18s}.preview:hover span{opacity:1}.card-body{padding:11px}.badges{display:flex;justify-content:space-between;gap:5px}.badges span{padding:3px 7px;background:var(--soft)}.badges .recommended{color:#a72e25;background:#fff0ed;border-color:#f3b7b1}.card-body h3{font-family:Space Grotesk,Noto Sans Thai;font-size:13px;margin:9px 0 2px}.card-body p{color:var(--muted);font-size:10px;line-height:1.45;margin:0;min-height:29px}.card-body button,.actions button,.skill-gate button{width:100%;margin-top:10px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:600}.chosen .card-body button,.primary{background:var(--red)!important;color:#fff;border-color:var(--red)!important}.timeline{display:grid;gap:8px;margin-bottom:15px}.timeline-item{display:grid;grid-template-columns:48px 1fr auto;gap:9px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:7px;background:var(--soft)}.timeline-item img{width:48px;height:42px;border-radius:6px;object-fit:cover}.timeline-item strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}.timeline-item select{padding:3px 5px;font-size:9px;margin-top:4px}.element-detail{grid-column:1/-1;border-top:1px solid var(--line);padding-top:6px}.element-detail summary{font-size:9px;cursor:pointer;color:var(--muted)}.element-detail[open] summary{margin-bottom:7px}.element-detail label{font-size:9px;margin-bottom:6px}.element-detail input,.element-detail select{font-size:9px;padding:5px}.time-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.row-actions{display:grid;grid-template-columns:1fr 1fr;gap:2px}.row-actions button{border:0;background:transparent;color:#79756f;padding:2px}.row-actions button:last-child{grid-column:span 2;color:#ad332a}.row-actions button:disabled{opacity:.25}.warnings{background:#fff7df;border:1px solid #efd98a;border-radius:9px;padding:7px 10px;margin-bottom:14px}.warnings p{display:flex;gap:6px;align-items:flex-start;color:#745d13;font-size:10px;margin:5px 0}.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.actions .primary{grid-column:span 2}.actions button:disabled,.skill-gate button:disabled{opacity:.42;cursor:not-allowed}.skill-gate{margin-top:16px;border:1px solid var(--line);border-radius:10px;padding:10px}.skill-gate summary{cursor:pointer;font-size:12px;font-weight:700}.skill-gate summary span{float:right;color:var(--red);font-size:9px}.skill-gate[open] summary{margin-bottom:13px}.skill-gate .check{display:flex;grid-template-columns:auto 1fr;align-items:center;font-weight:500}.skill-gate .check input{width:auto}.sync-box{display:grid;gap:6px;margin-top:12px;padding:10px;border:1px solid #b8d8bf;border-radius:8px;background:#edf8f0;color:#185d30;font-size:9px}.sync-box strong,.sync-box span{display:block}.sync-box code{overflow-wrap:anywhere;padding:7px;border-radius:6px;background:#fff;color:#24482e;line-height:1.45}.style-shelf{border-top:1px solid var(--line);margin-top:17px;padding-top:14px}.style-shelf h3{font-size:11px}.style-shelf h3 span{float:right;background:#eeeae4;border-radius:99px;padding:1px 6px}.style-shelf>div{padding:8px 0;border-top:1px solid #eeeae4}.style-shelf>div span{color:#a76c14;font-size:8px;text-transform:uppercase;margin-right:6px}.style-shelf>div strong{font-size:10px}.style-shelf p,.empty p{font-size:10px;color:var(--muted)}.empty{border:1px dashed #cbc7c0;border-radius:10px;padding:30px;text-align:center;color:var(--muted);font-size:12px}.plan-empty{display:grid;justify-items:center;margin-bottom:18px}.plan-empty>svg{font-size:30px;margin-bottom:7px}.error-state{color:#a92820}.error-state svg{vertical-align:middle;margin-right:5px}@media(max-width:1100px){.workspace{grid-template-columns:280px 1fr}.plan-panel{grid-column:1/-1}.grid{grid-template-columns:repeat(2,minmax(150px,1fr))}}@media(max-width:720px){.topbar{padding:0 14px}.system-status span{display:none}.workspace{display:block}.panel{padding:18px;border-bottom:1px solid var(--line)}.grid{grid-template-columns:repeat(2,minmax(135px,1fr))}.brief-panel,.plan-panel{position:static}.two,.actions{grid-template-columns:1fr}.actions .primary{grid-column:auto}}@media(max-width:430px){.grid{grid-template-columns:1fr}.brand small{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.preview video{display:none}}