/* Packshot v2: image-first board. Type 14/16/20/36; space 8/16/24/32. */
:root{--bg:#f6f7f9;--paper:#fff;--ink:#20232c;--muted:#717581;--line:#e4e6ec;--green:#6550e8;--green-dark:#22232d;--soft:#f0edff;--shadow:0 24px 80px #11121f20;font-family:'IBM Plex Sans Thai','Manrope',sans-serif;font-size:16px;font-weight:400;color:var(--ink)}
body{background:var(--bg)}button,a,input,select,textarea{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#8a77f0}button{font-weight:500}.button{font-size:15px;min-height:44px;padding:10px 17px;border-radius:8px;background:#fff;border:1px solid #dddfe7;color:#303440;gap:9px}.button.primary{background:#6550e8;border-color:#6550e8;color:#fff}.button.primary:hover{background:#5540d3}.button.small{font-size:14px;min-height:36px}.icon-btn{height:36px;width:36px;color:#777b88;border-radius:7px}.icon-btn:hover{background:#edebf7;color:#5540d3}.muted{color:#797e89}
.studio-header{height:76px;background:#fff;border-bottom:1px solid var(--line);padding:0 32px;display:flex;align-items:center;gap:38px;position:sticky;top:0;z-index:30}.studio-brand{font-family:Manrope,sans-serif;font-size:22px;font-weight:800;letter-spacing:-1px;text-decoration:none;display:flex;align-items:center;gap:4px;white-space:nowrap}.studio-brand>span{color:#8b78ed;margin:0 3px}.studio-brand small{font-family:Manrope,sans-serif;font-size:9px;letter-spacing:1.4px;margin-left:12px;padding-left:14px;border-left:1px solid #dedde5;line-height:20px;font-weight:600;color:#82838e}.studio-nav{display:flex;gap:24px;align-self:stretch}.studio-nav button{background:none;color:#787c88;font-size:15px;border-bottom:3px solid transparent;padding:3px 0 0;white-space:nowrap}.studio-nav button.active{color:#5e48d9;border-color:#715be8;font-weight:600}.studio-tools{margin-left:auto;display:flex;gap:8px;align-items:center}.collaborator-button{background:none;display:flex;align-items:center;gap:9px;font-size:13px;color:#626775;max-width:170px}.collaborator-button>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.avatar{height:29px;width:29px;flex:none;border-radius:50%;background:#eeeafa;color:#6a52c6;font-size:13px}.project-menu{position:relative}.project-menu>summary{font-weight:700;cursor:pointer;font-size:24px;list-style:none;width:30px;text-align:center;color:#757887}.project-menu>summary::-webkit-details-marker{display:none}.project-menu>div{position:absolute;right:0;top:42px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);width:228px;padding:8px;display:grid}.project-menu button,.project-menu a{padding:11px 12px;text-align:left;text-decoration:none;background:none;border-radius:5px;font-size:14px}.project-menu button:hover,.project-menu a:hover{background:#f5f4fb}.project-menu [data-action=close-project]{color:#ac5353}
.studio-main{width:100%;padding:28px 32px 20px;max-width:2000px;margin:0 auto}.project-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}.project-kicker{font-family:Manrope,sans-serif;font-size:10px;letter-spacing:2px;color:#858894;font-weight:650;margin-bottom:3px}.project-heading h1{font-family:Manrope,'IBM Plex Sans Thai',sans-serif;font-size:34px;font-weight:750;letter-spacing:-1.5px;line-height:1.5;display:flex;align-items:center;gap:12px}.project-live{height:7px;width:7px;border-radius:50%;background:#68a488}.project-progress{font-size:13px;display:flex;align-items:center;gap:12px;color:#4c456a}.project-progress>div{width:90px;height:4px;background:#e2e1ec;border-radius:5px;overflow:hidden}.project-progress i{display:block;height:100%;background:#8a77ef}.project-actions{display:flex;gap:10px;align-items:center}.download-all{min-height:56px;box-shadow:0 3px 8px #6752db16;text-align:left;padding:10px 20px}.download-all span{line-height:1.4}.download-all small{display:block;font-size:11px;font-weight:400;opacity:.8;margin-top:2px}.download-all>svg{width:21px;height:21px;margin-right:4px}.upload-main{min-height:56px}
.asset-filters{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0 16px;margin-bottom:0}.filter-top{display:flex;align-items:center;gap:18px}.model-switch{display:flex;border-radius:8px;background:#e9eaf0;padding:3px;flex-shrink:0}.model-switch button{background:none;border-radius:6px;padding:7px 17px;font-size:14px;color:#747887}.model-switch button.active{background:#fff;color:#343344;box-shadow:0 1px 3px #1311220d;font-weight:600}.filter-selects{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.select-wrap{min-width:100px}.filter-select{font-size:14px;background:#fff;padding:9px 27px 9px 11px;color:#585b68;border:1px solid #e0e2e9;border-radius:7px;max-width:160px}.search{margin-left:auto;max-width:230px;width:200px;background:none;border:0;padding:0;gap:8px;color:#9397a3}.search input{font-size:14px;width:100%;padding:8px 0;background:none;border:0;outline-offset:1px}.search input::placeholder{color:#8d929e}.search svg{width:17px}.color-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px}.color-chip{font-size:14px;font-weight:400;padding:5px 11px;border:1px solid transparent;border-radius:6px;background:transparent;color:#6f7480;gap:7px;min-height:33px}.color-chip.active{border-color:#b6a8f2;color:#5c45cc;background:#efebfc}.color-chip:hover{background:#eeeef4}.color-chip .swatch{width:12px;height:12px}.filter-reset{font-size:13px;color:#8d829f;margin-left:auto}.board-caption{display:flex;justify-content:space-between;align-items:center;color:#8b8d99;font-size:12px;padding:19px 0 3px;gap:12px}.board-caption strong{font-weight:600;color:#515263;font-size:14px}.board-caption>span{display:flex;align-items:center;gap:5px}.caption-dot{margin:0 4px;color:#b0b1bb}.pending-key{display:inline-block;width:11px;height:11px;background:#a3a4ac;border-radius:3px;margin-right:2px}
.shot-row{padding:22px 0 24px;border-bottom:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:auto 260px}.shot-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:12px}.shot-title,.shot-actions{display:flex;align-items:center;gap:10px;min-width:0}.shot-title h2{font-size:16px;font-weight:600;line-height:1.4}.shot-title h2 span{font-size:13px;color:#858591;font-weight:400;margin-left:5px}.shot-model{font-family:Manrope,sans-serif;font-size:11px;font-weight:700;border-radius:5px;background:#eeeaf8;color:#8071a9;padding:3px 7px}.shot-model.submin{background:#e7eff3;color:#758d9c}.shot-number{font-family:Manrope,sans-serif;font-size:11px;font-weight:500;color:#9b9ca7;white-space:nowrap}.master-state{font-size:12px;color:#95929f;margin-right:8px}.master-state.ready{color:#4b8d76}.text-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:none;font-size:13px;color:#656675;padding:5px}.text-button:hover{color:#6a4ee3}.text-button svg{width:15px;height:15px}.ps-icon{font:600 13px/1 'Manrope',sans-serif;background:#e6edfa;color:#396298;border:1px solid #c7d7ed;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}.color-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.deliverable-card{padding:0;background:#fff;border:1px solid #e1e3e9;border-radius:8px;overflow:hidden;text-align:left;box-shadow:0 1px 2px #10102303;transition:transform .15s,border-color .15s;min-width:0}.deliverable-card:hover{border-color:#b9a6f3;transform:translateY(-2px);box-shadow:0 3px 12px #3020520a}.deliverable-image{position:relative;width:100%;aspect-ratio:1.08;background:#d4d5d8;overflow:hidden}.deliverable-image img{width:100%;height:100%;object-fit:cover;display:block}.pending-shade{position:absolute;inset:0;background:rgba(15,17,25,.17);pointer-events:none}.pending-label{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:11px;font-weight:400;color:#fff;background:#15172068;backdrop-filter:blur(5px);border:1px solid #ffffff38;border-radius:20px;padding:3px 10px;white-space:nowrap}.deliverable-status{position:absolute;bottom:10px;left:10px;font-size:11px;border-radius:20px;padding:3px 10px;background:#fff4ce;color:#927537}.deliverable-status.approved{background:#e0f6e9;color:#347951}.deliverable-status.changes{background:#fbe1dc;color:#9b5b48}.deliverable-label{display:flex;align-items:center;gap:7px;padding:9px 11px;font-size:13px;font-weight:500;min-height:39px}.deliverable-label .swatch{width:11px;height:11px}.slot-add{margin-left:auto;font-size:18px;font-weight:400;color:#b7b3c6;line-height:1}.slot-version{font-family:Manrope,sans-serif;font-size:9px;font-weight:500;margin-left:auto;color:#92929f}.is-approved{border-color:#bbd9c6}.one-color{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.one-color .shot-row{padding-bottom:18px}.one-color .shot-heading{flex-wrap:wrap;gap:7px}.one-color .shot-actions{margin-left:auto}.one-color .master-state{display:none}.one-color .color-grid{grid-template-columns:1fr}.one-color .deliverable-image{aspect-ratio:1.25}.no-preview-symbol{display:flex;align-items:center;justify-content:center;height:100%;color:#9c9ca6}.image-unavailable:after{content:'ยังไม่มีภาพตัวอย่าง';position:absolute;top:40%;left:10%;right:10%;text-align:center;font-size:12px;color:#737682}.board-empty{padding:60px 20px;text-align:center;grid-column:1/-1}.board-empty h2{font-size:20px;margin-bottom:20px}
.studio-footer{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#9296a0;padding:28px 0 4px}.studio-footer button{background:none;display:flex;align-items:center;gap:7px;color:#858392;font-size:12px}.studio-footer svg{width:13px;height:13px}.file-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.file-card{border-radius:9px;background:#fff;border-color:#e1e3e9}.file-image{padding:0;aspect-ratio:1.13;position:relative;background:#d6d7d9;border-radius:0;overflow:hidden}.file-image img{display:block;width:100%;height:100%;object-fit:cover}.file-stage{position:absolute;bottom:10px;left:12px;background:#ffffffce;color:#656270;font-size:12px;border-radius:5px;padding:3px 8px}.model-tag{font-size:12px;top:12px;right:12px;border-radius:5px;color:#575266;min-height:26px}.card-check{width:17px;height:17px;left:12px;top:13px;accent-color:#7860e7}.card-body{padding:12px 14px}.card-title{font-size:15px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}.card-title strong{font-weight:600}.card-bottom{border:0;margin-top:6px;padding:0;font-size:13px;display:flex;justify-content:space-between;align-items:center}.card-bottom>div{display:flex;align-items:center;gap:4px}.file-color{display:flex;align-items:center;gap:7px;color:#87838f}.file-color .swatch{width:11px;height:11px}.card-bottom .status{font-size:11px}.library-toolbar{font-size:14px;padding:19px 0 12px;gap:12px}.library-toolbar input{width:16px;height:16px;accent-color:#7054e9}.sort-control select{font-size:13px}.source-note{font-size:12px;color:#918d9c;margin-bottom:17px}.source-note summary{cursor:pointer;display:list-item}.source-note p{padding:8px 0;color:#787383;font-size:13px;max-width:850px}.reference-note{font-size:13px;color:#87818e;margin:0 0 18px}.work-brief{display:grid;grid-template-columns:1.15fr 1fr;gap:25px}.brief-image{min-height:280px;position:relative;border-radius:8px;overflow:hidden;background:#d2d3d7}.brief-image img{height:100%;width:100%;object-fit:cover;position:absolute;inset:0}.brief-image>span{position:absolute;left:0;bottom:0;right:0;padding:11px;text-align:center;font-size:12px;color:#fff;background:#11112270}.brief-actions{display:flex;flex-direction:column;gap:10px;padding:10px 0}.brief-actions h3{font-size:21px;font-weight:600}.brief-actions p{font-size:14px;color:#888191;line-height:1.8;margin-bottom:9px}.brief-actions .button{width:100%}
.modal-header h2{font-size:24px;font-weight:600;letter-spacing:-.3px}.modal-header p{font-size:14px;color:#92909a}.modal input,.modal select,.modal textarea{font-size:15px}.modal .field{font-size:14px}.upload-item-head strong{font-size:14px}.upload-item-head span{font-size:12px}.upload-item-fields .field,.upload-defaults .field{font-size:12px}.upload-item-fields select,.upload-defaults select{font-size:14px}.upload-defaults h3{font-size:14px}.upload-filename,.upload-progress{font-size:12px}.banner p{font-size:14px}.dropzone strong{font-size:18px}.dropzone p{font-size:14px}.panel{border-radius:10px}.panel h2{font-size:23px}.panel p{font-size:14px!important}.guide-step h3{font-size:17px}.guide-step p,.guide-list li,.label-guide{font-size:14px}.guide-list li{line-height:1.8}.code-example{font-size:13px}.review-modal .modal-header h2{font-size:18px}.review-modal .modal-header p{font-size:12px}.review-sidebar{font-size:14px}.review-comment p{font-size:14px}.review-comment strong{font-size:13px}.review-form-footer span{font-size:12px}.review-comment-form textarea{font-size:14px}.review-button{font-size:13px}.review-canvas-footer .ps-icon{color:#81b7f4;background:#183553;border-color:#294d70}.matrix-shot b,.matrix-shot span,.matrix th,.matrix td{font-size:13px}
@media(min-width:1750px){.deliverable-image{aspect-ratio:1.2}.shot-row{contain-intrinsic-size:auto 300px}.file-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1200px){.studio-header{padding:0 24px;gap:26px}.studio-brand small{display:none}.studio-nav{gap:18px}.studio-main{padding:24px}.filter-top{flex-wrap:wrap;gap:12px}.search{flex:1;min-width:130px;max-width:200px}.color-grid{gap:9px}.deliverable-label{font-size:12px;padding:8px}.pending-label{font-size:10px;padding:2px 7px}.file-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.one-color{grid-template-columns:repeat(3,minmax(0,1fr))}.collaborator-button>span:last-child{display:none}}
@media(max-width:900px){.studio-header{flex-wrap:wrap;height:auto;padding:16px 20px 0;gap:0}.studio-brand{font-size:20px}.studio-tools{margin-left:auto}.studio-nav{order:3;width:100%;height:49px;justify-content:space-between;gap:15px;margin-top:9px}.studio-nav button{font-size:14px}.studio-main{padding:22px 20px}.project-heading h1{font-size:29px}.project-heading{align-items:flex-start}.project-actions{flex-direction:column;gap:7px;align-items:stretch}.project-actions .button{min-height:40px;font-size:13px}.download-all small{display:none}.project-actions .download-all{padding:11px 13px}.upload-main{padding:8px 10px}.filter-selects{order:3;width:100%}.search{max-width:220px}.shot-actions{gap:5px}.master-state{font-size:11px;margin-right:2px}.color-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.shot-row{contain-intrinsic-size:auto 440px}.deliverable-label{font-size:13px}.deliverable-image{aspect-ratio:1.25}.file-grid{gap:14px}.one-color{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.one-color .shot-row{contain-intrinsic-size:auto 300px}}
@media(max-width:600px){.studio-header{padding:12px 16px 0}.studio-main{padding:21px 14px}.studio-brand{font-size:19px}.studio-tools{gap:3px}.studio-header .icon-btn{height:30px;width:30px}.studio-nav{height:46px;gap:11px}.studio-nav button{font-size:13px}.project-heading{flex-wrap:wrap;gap:15px;margin-bottom:18px}.project-heading h1{font-size:30px}.project-kicker{font-size:9px}.project-progress{font-size:12px}.project-actions{flex-direction:row;width:100%;gap:8px}.project-actions .download-all{flex:1;justify-content:center;font-size:14px;padding:12px 9px}.project-actions .upload-main{font-size:14px;padding:12px 11px}.project-actions svg{width:17px;margin:0}.filter-top{gap:10px}.model-switch button{padding:6px 11px;font-size:14px}.search{min-width:80px;width:95px;max-width:none}.search input{font-size:14px}.filter-selects{gap:6px}.filter-selects .select-wrap{min-width:0;flex:1}.filter-select{width:100%;max-width:100%;font-size:14px;padding:9px 19px 9px 8px}.color-filters{gap:5px;margin-top:12px}.color-chip{padding:4px 8px;font-size:13px;gap:5px;min-height:31px}.color-chip .swatch{width:10px;height:10px}.filter-reset{font-size:12px}.board-caption{align-items:flex-start;gap:8px;padding:14px 0 0;font-size:10px}.board-caption>span:first-child{white-space:nowrap;font-size:12px}.board-caption>span:last-child{display:block;text-align:right}.caption-dot{margin:0 1px}.board-caption strong{font-size:13px}.pending-key{height:9px;width:9px}.shot-row{padding:20px 0;contain-intrinsic-size:auto 510px}.shot-heading{flex-wrap:wrap;gap:6px;margin-bottom:10px}.shot-title{gap:7px}.shot-title h2{font-size:15px}.shot-title h2 span{font-size:12px;margin-left:3px}.shot-model{font-size:10px;padding:3px 6px}.shot-actions{margin-left:auto}.master-state{display:none}.shot-actions .icon-btn{width:26px;height:26px}.shot-actions .text-button{font-size:12px;padding:0}.ps-icon{width:22px;height:22px;font-size:12px}.color-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.deliverable-image{aspect-ratio:1.02}.deliverable-label{font-size:12px;padding:7px;gap:5px;min-height:35px}.deliverable-label .swatch{width:10px;height:10px}.pending-label{font-size:10px;bottom:7px}.slot-add{font-size:16px}.one-color{gap:13px}.one-color .shot-title{flex-wrap:wrap;gap:5px}.one-color .shot-title h2{font-size:14px}.one-color .shot-title h2 span{display:none}.one-color .shot-heading{min-height:65px}.one-color .shot-actions{margin-left:0}.one-color .deliverable-image{aspect-ratio:1.05}.one-color .shot-row{contain-intrinsic-size:auto 285px}.file-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card-body{padding:10px}.card-title{font-size:14px}.card-bottom{font-size:12px}.card-bottom>div{gap:0}.card-bottom .icon-btn{width:26px;height:28px}.card-bottom .compact{padding:2px}.file-stage{font-size:10px;bottom:8px;left:8px}.file-image{aspect-ratio:1.02}.model-tag{font-size:10px;top:10px;right:8px;min-height:auto}.card-check{height:15px;width:15px;left:9px;top:10px}.library-toolbar{font-size:13px;flex-wrap:wrap}.sort-control select{font-size:12px}.work-brief{grid-template-columns:1fr;gap:14px}.brief-image{min-height:210px}.brief-actions{padding:0}.brief-actions h3{font-size:20px}.modal-header h2{font-size:22px}.modal-header p{font-size:13px}.studio-footer{font-size:10px;gap:10px}.studio-footer button{font-size:11px}.guide-side{display:block}.guide-side .panel{margin-bottom:15px}.review-canvas-footer{flex-wrap:wrap}.review-canvas-footer .review-button{font-size:12px}.review-canvas-footer>div:first-child{flex:1 0 100%}#toast-root{bottom:20px}}