/* One Frame / Visual Atelier. Entire theme is opt-in and disabled on the existing bigscreen. */
html[data-frame-ui]{--frame-ink:#202423;--frame-muted:#747a77;--frame-paper:#f2f3ef;--frame-line:#d8dcd5;--frame-blue:#586d8c;--frame-green:#5d796b;--frame-rust:#a56b4c;color-scheme:light;}
html[data-frame-ui] body{background:var(--frame-paper)!important;color:var(--frame-ink);font-family:'Microsoft YaHei','PingFang SC',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
html[data-frame-ui] :is(.dots-bg,.dot-bg,#dotCanvas){display:none!important;}
html[data-frame-ui] :is(.header,.topbar){background:#fff!important;border-bottom:1px solid var(--frame-line)!important;box-shadow:none!important;}
html[data-frame-ui] :is(.sidebar,.side-nav,.tabs){background:#202423!important;box-shadow:none!important;}
html[data-frame-ui] :is(.nav-item,.tab,.sn-item){border-radius:4px!important;letter-spacing:.2px;}
html[data-frame-ui] :is(.nav-item.active,.tab.active,.sn-item.on){background:#424947!important;box-shadow:inset 2px 0 #b5c0b5!important;color:#fff!important;}
html[data-frame-ui] :is(.nav-item,.tab,.sn-item):hover{background-color:#353c38!important;}
html[data-frame-ui] :is(.header,.topbar) .brand img{content:url('/studio-mark.svg');object-fit:contain!important;background:transparent!important;border:0!important;box-shadow:none!important;}
html[data-frame-ui] :is(h1,h2,h3){text-wrap:balance;}
html[data-frame-ui] :is(.card,.stat-card,.chart-box,.chart-card,.panel,.bill-card,.salary-card,.register-card,.section-card){border:1px solid var(--frame-line)!important;border-radius:7px!important;box-shadow:none!important;background:#fff;}
html[data-frame-ui] :is(.card-title,.panel-title){font-size:14px!important;font-weight:700;color:#2c3430!important;border-bottom:1px solid #e4e7df;padding-bottom:13px;letter-spacing:.2px;}
html[data-frame-ui] :is(.stat-card .value,.stat-card .v,.sum-item .v,.kpi-value,.stat-value){font-variant-numeric:tabular-nums;letter-spacing:-.8px;line-height:1.25;color:#293630;}
html[data-frame-ui] :is(.filter-bar,.toolbar){gap:10px;}
html[data-frame-ui] .filter-bar{background:#fff!important;border:1px solid var(--frame-line)!important;padding:15px!important;border-radius:6px!important;}
html[data-frame-ui] :is(button,.btn,.input,input,select,textarea){font-family:inherit;}
html[data-frame-ui] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border-radius:4px!important;border-color:#cfd6ca!important;box-shadow:none!important;}
html[data-frame-ui] :is(input,select,textarea):focus{outline:2px solid #7e92ac!important;outline-offset:2px;}
html[data-frame-ui] :is(.btn-primary,.btn-apply,.submit-btn,.register-btn,.btn-submit){background:#252d28!important;color:#fff!important;border:1px solid #252d28!important;box-shadow:none!important;border-radius:4px!important;}
html[data-frame-ui] :is(.btn-default,.btn-secondary){background:#f4f5f0!important;color:#434c44!important;border:1px solid #d9ddd3!important;box-shadow:none!important;border-radius:4px!important;}
html[data-frame-ui] :is(button,.btn,[role=button]){transition:background-color .16s,border-color .16s,box-shadow .16s;}
html[data-frame-ui] :is(button,a,[role=button]):focus-visible{outline:2px solid #657f9e;outline-offset:3px;}
html[data-frame-ui] :is(.btn-primary,.btn-apply,.submit-btn):hover{background:#415446!important;}
html[data-frame-ui] :is(.badge,.tag,.status-tag){border-radius:3px!important;font-weight:500;}
html[data-frame-ui] :is(.badge-success,.tag-green){background:#e7efe7!important;color:#456b54!important;}
html[data-frame-ui] :is(.badge-warning,.tag-orange){background:#f5ecde!important;color:#946335!important;}
html[data-frame-ui] :is(.badge-danger,.tag-red){background:#f7e8e4!important;color:#9f594b!important;}
html[data-frame-ui] :is(.badge-info,.tag-blue){background:#e9edf4!important;color:#52698b!important;}
html[data-frame-ui] :is(.sub-tab,.subtab,.stat-subtab,.apply-subtab){border-radius:4px!important;}
html[data-frame-ui] :is(.sub-tab.active,.subtab.active,.stat-subtab.active,.apply-subtab.active){background:#526b60!important;color:#fff!important;border-color:#526b60!important;}
html[data-frame-ui] table{font-variant-numeric:tabular-nums;border-collapse:collapse;}
html[data-frame-ui] :is(.table-wrap,.table-responsive,.system-table-wrap,.frame-table-scroll){overflow:auto;max-width:100%;border-radius:5px;}
html[data-frame-ui] .frame-table-scroll{border:1px solid #dce1d7;background:#fff;}
html[data-frame-ui] table th{background:#eef1e9!important;color:#657060!important;font-size:11px!important;letter-spacing:.4px;font-weight:600;border-bottom:1px solid #d6ddd0!important;padding:12px 13px!important;white-space:nowrap;}
html[data-frame-ui] table td{padding:13px!important;border-bottom-color:#e6eae1!important;font-size:12px;line-height:1.6;}
html[data-frame-ui] table tbody tr:hover{background:#f0f3f6!important;}
html[data-frame-ui] table td.frame-numeric{text-align:right;font-variant-numeric:tabular-nums;}
html[data-frame-ui] :is(.frame-table-scroll,.system-table-wrap,.table-wrap) thead th{position:sticky;top:0;z-index:2;}
html[data-frame-ui] .frame-table-tools{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:7px 0;font-size:10px;color:#7d8778;}
html[data-frame-ui] .frame-expand{font-size:11px;border:1px solid #cbd4c4;background:#fff;color:#576850;padding:5px 10px;border-radius:4px;cursor:pointer;}
html[data-frame-ui] .frame-focus:fullscreen{padding:22px;background:#f2f3ef;overflow:auto;box-sizing:border-box;}
html[data-frame-ui] .frame-focus:fullscreen table{min-width:100%;}
html[data-frame-ui] .frame-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;border-top:2px solid #282f2a;border-bottom:1px solid #ccd4c5;padding:22px 0 25px;margin:0 0 24px;grid-column:1/-1;}
html[data-frame-ui] .frame-heading .frame-overline{display:flex;align-items:center;gap:12px;font:10px/1.5 Consolas,monospace;letter-spacing:2.2px;color:#788271;}
html[data-frame-ui] .frame-index{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #adb9a3;border-radius:50%;font-size:10px;letter-spacing:0;color:#5c6d50;}
html[data-frame-ui] .frame-heading h2{font-size:29px;line-height:1.3;font-weight:700;letter-spacing:-1px;margin:9px 0 8px;color:#273126;}
html[data-frame-ui] .frame-heading p{font-size:12px;color:#7b8375;line-height:1.8;margin:0;}
html[data-frame-ui] .frame-art{flex:none;width:160px;aspect-ratio:1.5;background:url('/assets/frame-illustrations-transparent.png') 0 0/200% 200% no-repeat;}
html[data-frame-ui] .frame-art[data-scene='1']{background-position:100% 0;}
html[data-frame-ui] .frame-art[data-scene='2']{background-position:0 100%;}
html[data-frame-ui] .frame-art[data-scene='3']{background-position:100% 100%;}
html[data-frame-ui] .system-heading{border-top:2px solid #282f2a!important;border-bottom-color:#ccd4c5!important;padding-top:22px!important;}
html[data-frame-ui] .system-heading h1{font-size:30px!important;letter-spacing:-1px;}
html[data-frame-ui] .frame-nav-icon{width:19px;height:19px;flex:none;display:inline-block;vertical-align:middle;margin-right:8px;}
html:not([data-frame-ui]) .frame-nav-icon{display:none!important;}
html[data-frame-ui] [data-frame-nav]>.sico,html[data-frame-ui] [data-frame-nav]>.sn-ic,html[data-frame-ui] [data-frame-nav]>svg:not(.frame-nav-icon){display:none!important;}
html[data-frame-ui] :is(.modal-mask,.modal-overlay){background:#1e282366!important;backdrop-filter:blur(4px);}
html[data-frame-ui] :is(.modal,.modal-box){background:#f9fbf5!important;border:1px solid #ccd6c5!important;border-radius:7px!important;box-shadow:0 24px 90px #14201026!important;max-width:calc(100vw - 28px);max-height:90dvh;overflow:auto;}
html[data-frame-ui] :is(.modal-head,.modal-header){background:#fff!important;border-bottom:1px solid #dce2d4!important;border-radius:7px 7px 0 0!important;padding:18px 23px!important;}
html[data-frame-ui] :is(.modal-head h2,.modal-header h3,.modal-title){font-size:18px!important;letter-spacing:-.3px;font-weight:700;color:#303c2a!important;}
html[data-frame-ui] .modal-body{padding:22px 23px!important;}
html[data-frame-ui] :is(.modal-foot,.modal-footer,.modal-actions){background:#fff!important;border-top:1px solid #dce2d4!important;padding:14px 23px!important;gap:10px;}
html[data-frame-ui] .modal label{font-size:12px;color:#6a755f;}
html[data-frame-ui] .modal :is(input:not([type=checkbox]):not([type=radio]),select,textarea){background:#fff!important;min-height:36px;}
html[data-frame-ui] .modal :is(.form-section,.rf-section){background:#fff!important;border:1px solid #dae2d3!important;border-radius:5px!important;}
html[data-frame-ui] :is(.modal-close,.close-btn){border-radius:50%!important;color:#66735c!important;background:#edf1e8!important;}
html[data-frame-ui] .empty-tip,html[data-frame-ui] .empty-state{padding:35px 20px;color:#818b78!important;line-height:1.8;}
html[data-frame-ui] .frame-register-aside{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding:36px 44px;background:#eaede5;border:1px solid #cfd7c7;border-right:0;max-width:510px;}
html[data-frame-ui] .frame-register-aside .frame-art{width:min(100%,360px);align-self:center;margin:32px 0;}
html[data-frame-ui] .frame-register-aside h2{font-size:38px;letter-spacing:-2px;line-height:1.5;font-weight:600;}
html[data-frame-ui] .frame-register-aside p{font-size:12px;line-height:2;color:#74816a;}
html[data-frame-ui] .frame-register-aside .frame-brand{font-size:20px;border-bottom:1px solid #bfcbb3;padding-bottom:22px;display:flex;align-items:center;gap:12px;}
html[data-frame-ui] .frame-register-aside .frame-brand img{width:48px;height:48px;}
html[data-frame-ui][data-frame-file='register'] body{display:grid!important;grid-template-columns:minmax(300px,510px) minmax(320px,440px);align-items:stretch!important;justify-content:center!important;padding:42px 24px!important;}
html[data-frame-ui][data-frame-file='register'] .register-card{width:100%;max-width:none!important;border-radius:0!important;padding:36px!important;}
html[data-frame-ui][data-frame-file='register'] .register-card h1{font-size:25px!important;text-align:left;}
html[data-frame-ui][data-frame-file='register'] .form-group{margin-bottom:20px;}
html[data-frame-ui][data-frame-file='register'] .form-group input{background:#fff;border:1px solid #cbd4c2;}
html[data-frame-ui] body>.frame-public-header{max-width:1000px;margin:24px auto;padding:0 22px;}
html[data-frame-ui] .frame-public-header .frame-heading{margin:0;}
html[data-frame-ui][data-frame-client] .top{background:#e9ede3!important;border-radius:0!important;color:#283222!important;position:relative;padding:26px 145px 44px 22px!important;border-bottom:1px solid #c9d3bf;}
html[data-frame-ui][data-frame-client] .top :is(.brand,.cname,.csub,.ttype,.tno){color:#3d4c32!important;}
html[data-frame-ui][data-frame-client] .top:after{content:'';position:absolute;right:15px;top:12px;width:120px;height:100px;background:url('/assets/frame-illustrations-transparent.png') 0 0/240px 200px no-repeat;pointer-events:none;}
html[data-frame-ui][data-frame-client] :is(.hero,.cinfo,.actions,.done-box,.rej-box,.note-box,.banner){border-radius:6px!important;box-shadow:none!important;}
html[data-frame-ui][data-frame-client] :is(.wrap,.container){line-height:1.75;}
html[data-frame-ui][data-frame-client] .card h3:before{background:#70845e!important;width:2px!important;}
html[data-frame-ui] .frame-document-head{border-top:2px solid #2b3327;border-bottom:1px solid #c9d3bf;padding:25px 0;margin:18px 0 24px;}
html[data-frame-ui] .frame-document-head .frame-art{float:right;width:100px;}
@media(max-width:768px){
 html[data-frame-ui] .frame-heading{gap:12px;padding:16px 0 20px;margin-bottom:18px;}
 html[data-frame-ui] .frame-heading h2{font-size:24px;}
 html[data-frame-ui] .frame-heading p{max-width:240px;}
 html[data-frame-ui] .frame-art{width:100px;}
 html[data-frame-ui] .frame-overline{font-size:9px!important;letter-spacing:1px!important;}
 html[data-frame-ui] .modal :is(.form-grid,.form-grid-2){grid-template-columns:1fr!important;}
 html[data-frame-ui] table td{padding:10px!important;}
 html[data-frame-ui][data-frame-file='register'] body{display:block!important;padding:18px!important;}
 html[data-frame-ui] .frame-register-aside{padding:22px;border-right:1px solid #cfd7c7;border-bottom:0;max-width:none;min-height:180px;position:relative;}
 html[data-frame-ui] .frame-register-aside .frame-brand{border:0;padding:0;font-size:16px;}
 html[data-frame-ui] .frame-register-aside h2{font-size:25px;margin-top:20px;max-width:220px;}
 html[data-frame-ui] .frame-register-aside .frame-art{position:absolute;right:15px;bottom:12px;width:100px;margin:0;}
 html[data-frame-ui] .frame-register-aside>p{display:none;}
 html[data-frame-ui][data-frame-file='register'] .register-card{padding:25px!important;}
 html[data-frame-ui] :is(.filter-bar,.toolbar){flex-wrap:wrap;}
 html[data-frame-ui] :is(.filter-bar,.toolbar) :is(input,select){min-width:0!important;max-width:100%;}
}
@media(prefers-reduced-motion:reduce){html[data-frame-ui] *{scroll-behavior:auto!important;transition:none!important;}}
@media print{html[data-frame-ui] .frame-table-tools,html[data-frame-ui] .frame-heading{display:none!important;}html[data-frame-ui] body{background:#fff!important;}html[data-frame-ui] .frame-table-scroll{overflow:visible;border:0;}}
html[data-frame-ui] :is(.header,.topbar) .brand img{content:url('/frame-brand.svg');}
html[data-frame-ui] .logo-area img{content:url('/frame-brand.svg');background:transparent!important;width:52px!important;height:52px!important;}
html[data-frame-ui] :is(.fin-panel,.fin-hero-card,.fin-filter-bar,.dash-stats>div,.hero-stat,.data-panel){border-radius:6px!important;box-shadow:none!important;border:1px solid #d3dccb!important;background:#fff!important;}
html[data-frame-ui] .fin-hero-card{color:#313c29!important;border-top:2px solid #849078!important;padding:20px!important;}
html[data-frame-ui] .fin-hero-card .fin-hc-value{font:700 27px/1.3 Arial,sans-serif!important;font-variant-numeric:tabular-nums;color:#34472e!important;}
html[data-frame-ui] .fin-hero-card:nth-child(2) .fin-hc-value{color:#806847!important;}
html[data-frame-ui] .fin-hero-card:nth-child(4) .fin-hc-value{color:#506c8b!important;}
html[data-frame-ui] .fin-panel-title{font-size:14px!important;color:#33422a!important;padding-bottom:14px;border-bottom:1px solid #e1e7da;}
html[data-frame-ui] .fin-hc-icon{background:#eef2e9!important;border-radius:4px!important;color:#7b896f!important;}
html[data-frame-ui] .dash-stats>div{border-top:2px solid #839078!important;padding:20px!important;}
html[data-frame-ui] :is(.day-header,.date-header){background:#3b433d!important;border-radius:5px 5px 0 0!important;}
html[data-frame-ui] .stat-tab-btn{border-radius:4px!important;}
html[data-frame-ui] .stat-tab-btn.active{background:#526b60!important;color:#fff!important;}
@media(min-width:900px){html[data-frame-ui] .frame-register-aside{position:sticky;top:30px;max-height:calc(100vh - 60px);min-height:700px;}}
html[data-frame-ui][data-frame-file='customer-query'] .query-wrap{max-width:1120px!important;margin:50px auto!important;}
html[data-frame-ui][data-frame-file='customer-query'] #selectPage{max-width:none!important;}
html[data-frame-ui][data-frame-file='customer-query'] #selectPage .query-card{display:grid!important;grid-template-columns:1fr 1fr;background:#fff!important;border:1px solid #cbd6c1!important;border-radius:0!important;padding:0!important;overflow:hidden;}
html[data-frame-ui][data-frame-file='customer-query'] #selectPage .query-title{padding:38px!important;text-align:left!important;background:#e8ede2;display:flex;flex-direction:column;align-items:flex-start;}
html[data-frame-ui][data-frame-file='customer-query'] #selectPage .query-title img{content:url('/frame-brand.svg');height:52px!important;}
html[data-frame-ui][data-frame-file='customer-query'] #selectPage .query-title h2{font-size:27px!important;line-height:1.55;margin:12px 0 8px;}
html[data-frame-ui][data-frame-file='customer-query'] .frame-query-kicker{font:10px Consolas!important;letter-spacing:2px!important;color:#78886b!important;order:-1;margin-bottom:22px!important;}
html[data-frame-ui][data-frame-file='customer-query'] .query-title .frame-art{width:240px;margin-top:30px;align-self:flex-end;}
html[data-frame-ui][data-frame-file='customer-query'] .cq-form{padding:48px 36px!important;display:flex;flex-direction:column;justify-content:center;background:#fff!important;}
html[data-frame-ui][data-frame-file='customer-query'] .cq-form .search-box{box-shadow:none!important;border:0!important;padding:0!important;background:none!important;}
html[data-frame-ui][data-frame-file='customer-query'] .type-tab.active{background:#526b60!important;color:white!important;border-color:#526b60!important;}
html[data-frame-ui] :is(.brand-logo,.bh .brand img){content:url('/frame-brand.svg');background:transparent!important;}
@media(max-width:768px){html[data-frame-ui][data-frame-file='customer-query'] .query-wrap{margin:20px auto!important;}html[data-frame-ui][data-frame-file='customer-query'] #selectPage .query-card{grid-template-columns:1fr;}html[data-frame-ui][data-frame-file='customer-query'] #selectPage .query-title{padding:26px!important;position:relative;min-height:235px;}html[data-frame-ui][data-frame-file='customer-query'] #selectPage .query-title h2{font-size:21px!important;}html[data-frame-ui][data-frame-file='customer-query'] .query-title .frame-art{position:absolute;right:8px;top:10px;width:120px;margin:0;}html[data-frame-ui][data-frame-file='customer-query'] .cq-form{padding:28px!important;}}
html[data-frame-ui] .hb-header{background:#fff!important;border-bottom:1px solid #d8dcd5!important;box-shadow:none!important;}
html[data-frame-ui] .coll-tabs{display:flex;flex-wrap:wrap;gap:6px;}
html[data-frame-ui][data-frame-file='otp-view'] body{flex-direction:column!important;padding:90px 20px!important;}
html[data-frame-ui][data-frame-file='otp-view'] .hb-header{position:fixed!important;left:0;right:0;top:0;width:100%!important;}
html[data-frame-ui][data-frame-file='otp-view'] :is(.gate,.card){max-width:min(400px,calc(100vw - 40px))!important;}
@media(max-width:768px){html[data-frame-ui][data-frame-file='finance'] .header .header-right{max-width:100%!important;flex-wrap:wrap!important;gap:6px!important;flex:1 1 100%!important;}html[data-frame-ui][data-frame-file='finance'] .header-top{flex-wrap:wrap!important;}html[data-frame-ui][data-frame-file='finance'] .fin-grid-2{grid-template-columns:minmax(0,1fr)!important;}html[data-frame-ui][data-frame-file='finance'] .fin-panel{min-width:0;} }

/* Increment 01: keep account controls inside the mobile header. */
@media(max-width:768px){
 html[data-frame-ui][data-frame-file='finance'] .header .header-top{height:auto!important;min-height:46px!important;align-items:center;row-gap:10px;padding-top:10px;padding-bottom:10px;position:relative;}
 html[data-frame-ui][data-frame-file='finance'] .header .header-right{height:auto!important;justify-content:flex-start;align-items:center;}
 html[data-frame-ui][data-frame-file='finance'] .header .brand h1{max-width:none!important;}
 html[data-frame-ui][data-frame-file='finance'] .header .user-menu-wrap{position:absolute!important;right:42px;top:6px;margin-left:0;}
 html[data-frame-ui][data-frame-file='finance'] .header #msgBellWrap{position:absolute!important;right:0;top:6px;}
 html[data-frame-ui] .modal-body{padding:18px!important;}
 html[data-frame-ui] :is(.modal-head,.modal-header){padding:15px 18px!important;}
 html[data-frame-ui] :is(.modal-foot,.modal-footer,.modal-actions){padding:13px 18px!important;flex-wrap:wrap;}
}
html[data-frame-ui][data-frame-file='finance'] body>.container{z-index:auto!important;}
@media(max-width:768px){
 html[data-frame-ui][data-frame-file='finance'] .modal-mask{align-items:center!important;padding:12px!important;}
 html[data-frame-ui][data-frame-file='finance'] .modal-mask .modal{width:100%!important;height:auto!important;max-height:calc(100dvh - 24px)!important;max-width:100%!important;border-radius:7px!important;}
}
html[data-frame-ui] .header :is(.avatar,#userAvatar){box-shadow:none!important;border:1px solid #d8dcd5;}
html[data-frame-ui] .header :is(#voiceTopBtn,a[href^='/attendance.html']){background:#f0f2ee!important;color:#303833!important;border:1px solid #d8dcd5!important;box-shadow:none!important;border-radius:4px!important;}
html[data-frame-ui][data-frame-file='register'] .register-card .logo-area{text-align:left;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid #e1e5dc;}
html[data-frame-ui][data-frame-file='register'] .register-card .logo-area img{display:none;}
html[data-frame-ui][data-frame-file='register'] .register-card .logo-area h1{margin-top:0;}
html[data-frame-ui][data-frame-file='register'] .register-card .logo-area p{text-align:left;line-height:1.7;color:#757d75;}

/* Increment 02: reuse the supplied transparent illustration sheet on the entry page. */
html[data-frame-ui][data-studio='select'] .studio-reference-art{background-image:url('/assets/frame-illustrations-transparent.png')!important;background-size:200% 200%!important;background-repeat:no-repeat!important;background-color:transparent!important;background-position:0 0!important;aspect-ratio:1.5;}
html[data-frame-ui][data-studio='select'] .studio-reference-art[data-scene='1']{background-position:100% 0!important;}
html[data-frame-ui][data-studio='select'] .studio-reference-art[data-scene='2']{background-position:0 100%!important;}
html[data-frame-ui][data-studio='select'] .studio-reference-art[data-scene='3']{background-position:100% 100%!important;}
html[data-frame-ui][data-studio='select'] .studio-hero .studio-art{width:270px;height:180px;}
html[data-frame-ui][data-studio='select'] :is(.portal-grid,.quick-grid){grid-template-columns:repeat(3,minmax(0,1fr));}
html[data-frame-ui][data-studio='select'] .portal-card{display:flex;flex-direction:column;position:relative;padding:24px;min-width:0;}
html[data-frame-ui][data-studio='select'] .portal-card:before{margin-bottom:28px;font-size:10px;letter-spacing:1.5px;}
html[data-frame-ui][data-studio='select'] .portal-card .card-icon{position:absolute;top:12px;right:16px;width:90px;height:60px;}
html[data-frame-ui][data-studio='select'] .portal-card h2{font-size:25px;margin-bottom:10px;}
html[data-frame-ui][data-studio='select'] .portal-card p{max-width:none;line-height:1.8;margin-bottom:20px;flex:1;}
html[data-frame-ui][data-studio='select'] .portal-card .card-btn{align-self:flex-start;margin-top:auto;}
html[data-frame-ui][data-studio='select'] .portal-logo{content:url('/frame-brand.svg');}
@media(max-width:900px){html[data-frame-ui][data-studio='select'] :is(.portal-grid,.quick-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media(max-width:580px){
 html[data-frame-ui][data-studio='select'] :is(.portal-grid,.quick-grid){grid-template-columns:1fr!important;}
 html[data-frame-ui][data-studio='select'] .studio-hero .studio-art{width:120px;height:80px;}
 html[data-frame-ui][data-studio='select'] .portal-card h2{font-size:24px;}
}

/* Finish shared subpages and independent documents without changing business markup. */
html[data-frame-ui]{--frame-ink:#242725;--frame-muted:#68716b;--frame-paper:#f3f3f1;--frame-line:#d9dcd7;}
html[data-frame-ui] :is(.toolbar,.filter-bar,.fin-filter-bar,.coll-tabs,.sub-tabs,.apply-tabs){align-items:center;gap:10px;}
html[data-frame-ui] :is(.toolbar,.filter-bar) :is(input,select){min-width:0;}
html[data-frame-ui] :is(.card-header,.panel-header){gap:12px;flex-wrap:wrap;}
html[data-frame-ui] :is(.fin-panel,.fin-filter-bar,.salary-hero,.check-panel,.hb-panel){border:1px solid var(--frame-line)!important;border-radius:6px!important;box-shadow:none!important;}
html[data-frame-ui] .salary-hero{background:#29312e!important;color:#fff!important;}
html[data-frame-ui] .salary-hero :is(h1,h2,.salary-amount,.amount,.value){color:inherit!important;font-variant-numeric:tabular-nums;}
html[data-frame-ui] :is(.coll-tab,.type-tab,.apply-subtab,.stat-subtab){font-size:13px;line-height:1.5;}
html[data-frame-ui] :is(.coll-tab.active,.type-tab.active,.apply-subtab.active,.stat-subtab.active){background:#343c37!important;color:#fff!important;border-color:#343c37!important;}
html[data-frame-ui] :is(.table-wrap,.frame-table-scroll){scrollbar-width:thin;scrollbar-color:#b7bdb5 #f3f4f0;}
html[data-frame-ui] table :is(.num,.r,.amount){font-variant-numeric:tabular-nums;white-space:nowrap;}
html[data-frame-ui] :is(.empty-tip,.empty-state,.notify-empty){color:#6d756e!important;}
html[data-frame-ui] :is(.empty-tip,.empty-state,.notify-empty):before{content:'';display:block;width:96px;height:64px;margin:0 auto 12px;background:url('/assets/frame-illustrations-transparent.png') 0 100%/200% 200% no-repeat;opacity:.75;}
html[data-frame-ui] :is(.hb-header .hb-logo img,.hb-header .brand img){content:url('/frame-brand.svg');object-fit:contain;background:transparent!important;}
html[data-frame-ui] .hb-modal{background:#20282366!important;backdrop-filter:blur(4px);}
html[data-frame-ui] .hb-modal-box{background:#fafbf8!important;border:1px solid #d5dad1!important;border-radius:7px!important;box-shadow:0 20px 70px #18201926!important;max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);overflow:auto;}
html[data-frame-ui] .hb-modal-actions{gap:10px;border-top:1px solid #e0e4dc;padding-top:15px;}
html[data-frame-ui] :is(.modal-close,.hb-modal-close,.close-btn){min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;line-height:1;flex-shrink:0;}
html[data-frame-ui] .modal :is(input,select,textarea){max-width:100%;}
html[data-frame-ui] :is(.modal,.hb-modal-box) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){border:1px solid #cbd3c6!important;padding:9px 11px!important;font-family:inherit;font-size:14px;box-shadow:none!important;}
html[data-frame-ui] body>.container{z-index:auto!important;}
html[data-frame-ui][data-frame-client] .top :is(.logo,.sub){color:#354038!important;opacity:1;}
html[data-frame-ui][data-frame-client] :is(.main,.cinfo,.item,.qr){border:1px solid #d9ded5;border-radius:6px!important;box-shadow:none!important;}
html[data-frame-ui][data-frame-client] :is(.amt .cur,.amt .num){color:#2b3831;font-variant-numeric:tabular-nums;}
html[data-frame-ui][data-frame-client] .step{background:#e9ede7;color:#526458;border-radius:4px;}
html[data-frame-ui][data-frame-client] .btn-ok{background:#354c3d!important;color:#fff;border-radius:5px;}
html[data-frame-ui][data-frame-client] .btn-no{border-radius:5px;background:#fff!important;color:#965347!important;border-color:#dbc5bd!important;}
html[data-frame-ui][data-frame-client] .actions{border:1px solid #d9ded5;z-index:5;}
html[data-frame-ui][data-frame-file='pay'] .card{position:relative;padding:0!important;background:transparent!important;border:0!important;}
html[data-frame-ui][data-frame-file='pay'] .main{margin:0 14px;}
html[data-frame-ui][data-frame-file='pay'] .top{text-align:left;}
html[data-frame-ui][data-frame-file='portal'] .item{padding:14px;margin-bottom:8px;background:#fff;}
@media(max-width:768px){
 html[data-frame-ui] :is(.toolbar,.filter-bar,.card-header,.panel-header){flex-wrap:wrap;}
 html[data-frame-ui] :is(.modal-mask,.modal-overlay){padding:12px!important;align-items:center!important;}
 html[data-frame-ui] :is(.modal-mask,.modal-overlay)>.modal{width:100%!important;max-width:100%!important;height:auto!important;max-height:calc(100dvh - 24px)!important;border-radius:7px!important;}
 html[data-frame-ui] .modal :is(.form-row,.form-grid,.form-grid-2){flex-wrap:wrap;gap:12px;}
 html[data-frame-ui] .modal .form-item{min-width:0;}
 html[data-frame-ui] :is(.modal-footer,.modal-foot,.modal-actions,.hb-modal-actions) button{min-height:38px;}
 html[data-frame-ui] :is(.modal-header,.modal-head){position:sticky;top:0;z-index:4;}
 html[data-frame-ui][data-frame-client] .top{padding:22px 120px 44px 18px!important;}
 html[data-frame-ui][data-frame-client] .top:after{width:96px;height:64px;background-size:192px 128px;right:12px;top:22px;}
 html[data-frame-ui][data-frame-file='pay'] .steps{flex-wrap:wrap;}
}
@media print{
 html[data-frame-ui] :is(.frame-art,.studio-reference-art,.frame-table-tools){display:none!important;}
 html[data-frame-ui] :is(.table-wrap,.frame-table-scroll,.table-responsive){overflow:visible!important;border:0;}
 html[data-frame-ui] table th{position:static!important;}
 html[data-frame-ui][data-frame-client] .top:after{display:none;}
}
