@font-face{font-family:CommissionThai;src:url('/assets/logo-studio-thai.ttf') format('truetype');font-display:swap}
body.commission-calm{background:#f6f8f7;color:#183629;font-family:CommissionThai,system-ui,sans-serif;font-size:16px!important;line-height:1.65}
.commission-calm [hidden]{display:none!important}.commission-calm :is(button,input,select,textarea){font-family:inherit;min-height:44px;max-width:100%}.commission-calm :is(button,a,input,select,summary):focus-visible{outline:3px solid #287a4e;outline-offset:3px}.commission-calm :is(input,select){border-color:#c5d8cb;color:#183629;border-radius:10px}.commission-calm :is(h1,h2,h3){letter-spacing:0;line-height:1.5;overflow-wrap:anywhere}.commission-calm h2{font-size:22px}.commission-calm :is(.eyebrow,.brand small){color:#50685b;letter-spacing:.05em}.commission-calm :is(.panel,.team-dashboard,.employee-card,.login-card){background:#fff;border:1px solid #d8e4dc;box-shadow:none;border-radius:18px}.commission-calm :is(.panel,.team-dashboard){padding:28px}.commission-calm :is(.panel-title p,.topbar p,.team-header span,.login-description,.empty,.loading,footer){color:#50685b}.commission-calm .panel-title i{background:#287a4e}.commission-calm .save-button{background:#287a4e!important;box-shadow:none;color:#fff!important}.commission-calm .save-button:hover{background:#185c39!important}.commission-calm :disabled{cursor:not-allowed}
.commission-calm .login-wrap{background:#f6f8f7;padding:32px 20px}.commission-calm .login-card{width:min(480px,100%);padding:32px;gap:20px}.commission-calm .login-card h1{font-size:26px;margin-bottom:0}.commission-calm .login-description{font-size:14px;line-height:1.75;margin:0}.commission-calm .login-card>a{color:#185c39}.commission-calm .brand-logo{background:#fff;box-shadow:none;border-radius:12px}.commission-calm .brand-logo img{object-fit:contain}.commission-calm .login-card .brand{margin-bottom:6px}
.commission-calm .app-shell{grid-template-columns:220px minmax(0,1fr)}.commission-calm .sidebar{background:#fff;color:#183629;border-right:1px solid #d8e4dc;padding:28px 18px;gap:28px}.commission-calm .sidebar nav a{color:#385747;min-height:44px;line-height:1.6}.commission-calm .sidebar nav a:hover{background:#eef7f0;color:#185c39}.commission-calm .rate-note{background:#eef7f0;border:1px solid #d8e4dc;color:#183629}.commission-calm .rate-note b{color:#287a4e}.commission-calm .rate-note span{color:#50685b}.commission-calm .content{width:100%;max-width:1240px;padding:32px clamp(20px,3vw,44px)}.commission-calm :is(.topbar,.admin-topbar){gap:24px}.commission-calm :is(.topbar,.admin-topbar) h1{font-size:29px}.commission-calm .topbar{flex-wrap:wrap}.commission-calm .top-actions{gap:8px;flex-wrap:wrap;justify-content:flex-start}.commission-calm :is(.top-actions button,.top-actions a,.history-controls button,.history-actions button,.history-actions a,.admin-controls button,.row-actions button,.row-actions a,.employee-detail-heading button){min-height:44px;border:1px solid #c5d8cb;background:#fff;color:#185c39;border-radius:10px;padding:9px 12px;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:1.5}.commission-calm :is(.staff-last-updated,.last-updated){text-align:left;color:#50685b}.commission-calm .work-grid{max-width:none}.commission-calm .entry-panel form{gap:22px}.commission-calm .upload-box{border:1px dashed #8eaf99;background:#f8fbf9;color:#385747;padding:20px}.commission-calm :is(.upload-box small,.upload-box em){color:#50685b}.commission-calm .readonly-field,.commission-calm .readonly input{background:#f2f6f3!important;color:#385747}
.commission-calm .team-dashboard{margin-top:28px}.commission-calm .team-header{gap:20px;align-items:flex-start}.commission-calm .team-header label{min-width:160px}.commission-calm :is(.personal-goal,.team-goal,.race-stage,.rank-card.top,.employee-detail){background:#f6f9f7;border-color:#d8e4dc;box-shadow:none}.commission-calm :is(.goal-head b,.goal-head strong,.team-goal-head strong,.team-goal-head b,.goal-foot strong,.employee-money>small,.employee-goal b,.employee-card-head>strong){color:#185c39}.commission-calm :is(.goal-progress,.team-goal-progress,.employee-progress){background:#e4eee7}.commission-calm :is(.goal-progress i,.team-goal-progress i,.employee-progress i){background:#4b9766}.commission-calm .race-stage-title{color:#385747}.commission-calm :is(.rank-card,.history-row,.sale-row,.achievement-badge,.detail-stats article,.summary-grid article,.history-summary article){border-color:#d8e4dc;box-shadow:none}.commission-calm :is(.history-summary,.summary-grid){gap:12px}.commission-calm :is(.summary-grid article,.history-summary article){padding:18px;background:#fff}.commission-calm :is(.summary-grid span,.history-summary span,.rank-card small,.sale-row small,.employee-card-head small,.employee-money>span,.card-hint,.detail-stats span,.detail-stats small){color:#50685b}.commission-calm :is(.history-row,.sale-row){padding:18px;gap:18px;background:#fff}.commission-calm :is(.history-row.approved,.sale-row.approved){border-left-color:#4b9766;background:#fff}.commission-calm :is(.history-row.pending,.sale-row.pending){border-left-color:#c18a2f}.commission-calm :is(.history-row.rejected,.sale-row.rejected){border-left-color:#bd5b56}.commission-calm .history-actions{gap:8px;flex-wrap:wrap}.commission-calm :is(.achievement-badge.unlocked,.employee-card.selected){border-color:#8eaf99;background:#eef7f0}.commission-calm .employee-card:hover{transform:none;box-shadow:none;border-color:#8eaf99}.commission-calm .employee-avatar{background:#287a4e}.commission-calm .employee-dashboard-grid{gap:20px}.commission-calm .employee-card{padding:22px}.commission-calm .admin-dashboard{max-width:1360px;padding:32px clamp(20px,3vw,44px)}.commission-calm .admin-topbar{border-color:#d8e4dc;flex-wrap:wrap}.commission-calm .admin-controls{padding:22px;background:#fff;border:1px solid #d8e4dc;border-radius:18px;gap:12px;margin-bottom:24px}.commission-calm .admin-controls label{flex:1 1 200px}.commission-calm #month-state{flex:1 1 100%;padding:10px 0;color:#50685b}.commission-calm .approval-shortcut{border:1px solid #e4cf9d;background:#fff9eb;box-shadow:none;border-radius:16px;padding:20px}.commission-calm #jump-to-pending{background:#946012;color:#fff;box-shadow:none;border-radius:10px}.commission-calm .sale-row .row-actions{gap:8px}.commission-calm .sale-row [data-action=approve]{background:#287a4e!important;color:#fff!important;border-color:#287a4e!important;box-shadow:none}.commission-calm .row-actions .danger{color:#a23e38;border-color:#e7c6c2}.commission-calm .history-button-v86{background:#f6f9f7!important;color:#185c39!important;border-color:#c5d8cb!important}.commission-calm .commission-history-dialog{border:1px solid #d8e4dc;border-radius:18px}.commission-calm .history-dialog-card{color:#183629}.commission-calm .history-dialog-heading small{color:#50685b}.commission-calm .history-dialog-heading button{background:#eef7f0;color:#185c39;min-width:44px}.commission-calm .history-entry{background:#f8fbf9;border-color:#d8e4dc;border-left-color:#4b9766}.commission-calm .history-entry>span{color:#183629}.commission-calm .admin-toast{max-width:calc(100vw - 32px)}
body.commission-calm #logo-studio-universal-hub-back{position:static!important;transform:none!important;box-shadow:none!important;background:#fff!important;border:1px solid #c5d8cb;border-radius:10px;padding:9px 12px;min-height:44px;font:600 14px/1.5 CommissionThai,system-ui}body.commission-calm #logo-studio-universal-hub-back,body.commission-calm #logo-studio-universal-hub-back *{color:#185c39!important}.commission-calm .login-card #logo-studio-universal-hub-back{justify-content:center}
@media(max-width:1100px){.commission-calm .app-shell{grid-template-columns:minmax(0,1fr)}.commission-calm .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid #d8e4dc;gap:16px}.commission-calm .sidebar nav{display:flex;flex-wrap:wrap;gap:6px}.commission-calm .rate-note{display:none}.commission-calm .admin-challenge-grid{grid-template-columns:minmax(0,1fr)}.commission-calm .sale-row{grid-template-columns:1fr 1fr}.commission-calm .sale-row .row-actions{grid-column:1/-1}.commission-calm .admin-challenge-heading{flex-wrap:wrap}}
@media(max-width:760px){body.commission-calm .content,body.commission-calm .admin-dashboard{padding:24px 16px}.commission-calm :is(.panel,.team-dashboard){padding:20px 16px}.commission-calm .sidebar{padding:18px 16px}.commission-calm .sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.commission-calm .sidebar nav a{font-size:14px;padding:10px 8px;white-space:normal}.commission-calm .sidebar .brand{font-size:18px}.commission-calm :is(.topbar,.admin-topbar){display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:18px}.commission-calm :is(.topbar,.admin-topbar) h1{font-size:25px}.commission-calm h2{font-size:21px}.commission-calm .top-actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;width:100%;align-items:stretch}.commission-calm .top-actions>*{flex:1 1 120px;min-width:0;width:auto;white-space:normal}.commission-calm .top-actions :is(#staff-name,.staff-last-updated){flex-basis:100%;text-align:left}.commission-calm .entry-panel form{grid-template-columns:minmax(0,1fr);gap:20px}.commission-calm .team-header{display:flex;flex-direction:column;align-items:stretch;gap:16px}.commission-calm .team-header label{min-width:0;width:100%}.commission-calm .history-controls{align-items:end;width:100%}.commission-calm .history-controls label{flex:1;min-width:0}.commission-calm .history-controls button{flex:0 0 auto}.commission-calm :is(.summary-grid,.history-summary,.detail-stats){grid-template-columns:repeat(2,minmax(0,1fr))!important}.commission-calm :is(.history-summary article,.summary-grid article,.detail-stats article){padding:14px;min-width:0}.commission-calm :is(.history-summary b,.summary-grid b,.detail-stats b){font-size:22px;overflow-wrap:anywhere}.commission-calm :is(.history-row,.sale-row){grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px}.commission-calm :is(.history-date,.sale-main,.history-actions,.row-actions){grid-column:1/-1;min-width:0}.commission-calm .history-actions>*{flex:1 1 100px}.commission-calm .row-actions>*{flex:1 1 110px;min-width:0;white-space:normal}.commission-calm .status{max-width:100%;white-space:normal;text-align:center}.commission-calm .employee-dashboard-grid{grid-template-columns:minmax(0,1fr)}.commission-calm .employee-card{padding:18px 16px}.commission-calm .employee-card-head h3{font-size:19px}.commission-calm .employee-card-head{grid-template-columns:36px minmax(0,1fr) auto;gap:10px}.commission-calm .employee-avatar{width:36px;height:36px}.commission-calm .admin-controls{padding:18px 16px;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.commission-calm .admin-controls label,.commission-calm #month-state,.commission-calm .last-updated{grid-column:1/-1;width:100%}.commission-calm .admin-controls button{width:100%;white-space:normal;min-width:0}.commission-calm .approval-shortcut{flex-direction:column;align-items:stretch;padding:18px 16px;gap:16px}.commission-calm .approval-shortcut b{font-size:20px}.commission-calm .admin-challenge-heading{display:block}.commission-calm .admin-challenge-status{justify-content:flex-start;margin-top:16px}.commission-calm .employee-detail-heading{align-items:stretch;flex-direction:column}.commission-calm .rank-card{grid-template-columns:32px minmax(0,1fr);gap:8px;padding:14px}.commission-calm .rank-card>b{grid-column:2}.commission-calm .rank-card strong{overflow-wrap:anywhere}.commission-calm .login-card{padding:26px 20px}.commission-calm .login-card h1{font-size:23px}.commission-calm .history-dialog-heading h2{font-size:21px}.commission-calm .history-dialog-heading button{flex:0 0 44px}}
body.commission-calm{--lgs-ink:#183629;--lgs-muted:#50685b;--lgs-navy:#183629;--lgs-blue:#287a4e;--lgs-blue-dark:#185c39;--lgs-line:#d8e4dc;--lgs-canvas:#f6f8f7;--lgs-shadow:none;--lgs-radius:18px}.commission-calm .login-wrap{background:#f6f8f7!important}.commission-calm .brand-logo{box-shadow:none!important}.commission-calm .topbar{background:transparent!important;box-shadow:none;backdrop-filter:none}.commission-calm :is(input,select,textarea){border-color:#c5d8cb!important}.commission-calm .employee-approval-entry{background:#946012;color:#fff;box-shadow:none}.commission-calm .sale-status-group{border-radius:14px}.commission-calm .sale-status-group>summary{color:#385747}.commission-calm .sale-status-group.pending>summary{color:#80550e}.commission-calm .sale-status-group.pending>summary span{background:#946012}.commission-calm .race-stage-title>span{color:#385747;border-color:#d8e4dc}.commission-calm .next-milestone{color:#185c39}.commission-calm .achievement-badge.unlocked>b{color:#185c39}
@media(max-width:760px){body.commission-calm .top-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}.commission-calm .top-actions>*{width:100%;min-width:0;order:0}.commission-calm .top-actions #staff-name{grid-column:1/-1;order:-1}.commission-calm .top-actions .staff-last-updated{grid-column:1/-1;order:2}.commission-calm .history-controls{display:flex!important}.commission-calm .history-controls>button{flex:0 0 auto}.commission-calm .sale-status-group .sale-row{margin:0 8px 10px}.commission-calm .sale-row{padding:14px 12px}.commission-calm .sale-row>div{min-width:0}.commission-calm .sale-row .row-actions>*{flex:1 1 85px}.commission-calm .history-row .history-status{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.commission-calm *{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

.commission-calm .calm-rewards{border:1px solid #d8e4dc;border-radius:12px;background:#fff;margin-top:20px}.commission-calm .calm-rewards>summary{cursor:pointer;padding:16px;font-weight:600;font-size:15px;line-height:1.7;color:#203c2b;min-height:44px}.commission-calm .calm-rewards[open]>summary{border-bottom:1px solid #d8e4dc}.commission-calm .calm-rewards>.achievement-badges{padding:16px}


@media(max-width:420px){.commission-calm .history-controls{display:grid!important;grid-template-columns:minmax(0,1fr)}.commission-calm .history-controls label,.commission-calm .history-controls button,.commission-calm .history-controls input{width:100%!important;max-width:none;box-sizing:border-box}.commission-calm .history-controls>button{grid-column:1;flex:none}}


@media(max-width:360px){.commission-calm .history-summary{grid-template-columns:minmax(0,1fr)!important}.commission-calm .history-summary strong{white-space:nowrap}}