/* Source: approved 2026-10-12 FA design archive. Visual layer only; no prototype state. */
:root{
 --bg:#f6f6f9;--sidebar:#f5f4f8;--card:#fff;--card-hover:#faf9fd;
 --border:#e7e4ec;--accent:#6952d9;--accent-dim:#5340b2;
 --text:#292735;--text-dim:#706b7f;--text-muted:#81798f;
 --radius:12px;--radius-sm:8px;--shadow:0 3px 15px #30254e08;
 --ui-lav:#eee9f8;--ui-sidebar:224px;
}
body{line-height:1.55}
button,input,select,textarea{font-family:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
 outline:3px solid #a89be2;outline-offset:3px
}
button:disabled{opacity:.5;cursor:not-allowed}
.btn{min-height:34px;border-radius:8px}
.btn-primary{background:var(--accent)}
.btn-ghost{background:#fff}
.card,.section,.search-bar{box-shadow:var(--shadow);border-color:var(--border)}
.card:hover{transform:none;box-shadow:0 4px 18px #30254e0d}
.panel,.detail-box,.modal{box-shadow:0 16px 60px #30254e24}
.panel-header,.detail-head,.modal-header{background:#faf9fc}
.field input,.field select,.field textarea,.search-input{background:#fff;border-color:var(--border)}
table{font-variant-numeric:tabular-nums}
th{background:#f6f4fa;color:var(--text-dim)}
td{line-height:1.65}
.tag,.bg-purple{background:#eee9f8;color:#67558b}
.filter-chip.active,.chip.active{background:var(--ui-lav);color:var(--accent-dim);border-color:#ddd4ee}
.header{padding:25px 32px 0;gap:0}
.header h2{font-size:23px;letter-spacing:-.5px}
.content{padding:22px 32px 36px}
.topbar{background:#fff;border-color:var(--border)}
.topbar .title{letter-spacing:-.3px}
body.shell-v2 .rail{background:var(--sidebar)}
.ui-brand{display:flex;align-items:center;gap:10px;width:100%;padding:12px 8px 22px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.ui-brand-mark{display:grid;place-items:center;width:31px;height:34px;background:#6c56ce;color:#fff;border-radius:9px 9px 4px 9px;font:italic 24px Georgia,serif}
.ui-brand b{display:block;white-space:nowrap;font-size:15px;font-weight:600;letter-spacing:-.4px}
.ui-brand b span{color:#8f869f;font-weight:400}
.ui-brand small{display:block;font-size:10px;color:var(--text-muted);margin-top:3px;letter-spacing:.8px}
.ui-nav-label{align-self:stretch;font-size:11px;letter-spacing:1px;color:#8b809b;margin:14px 13px 7px}
.ui-profile{display:flex;gap:10px;align-items:center;border-top:1px solid var(--border);margin-top:16px;padding:16px 6px 0;width:100%}
.ui-profile-text{flex:1;min-width:0;font-size:12px}
.ui-profile-text b{font-weight:500;overflow-wrap:anywhere}
.ui-profile-text small{display:block;font-size:10px;color:var(--text-muted)}
.ui-logout{border:0;background:none;color:var(--text-dim);padding:8px;font-size:12px;cursor:pointer}
.ui-greeting{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:0 0 24px}
.ui-greeting small{font-size:10px;letter-spacing:1.8px;color:#7f6bb1;font-weight:600}
.ui-greeting h1{font-size:26px;font-weight:600;letter-spacing:-.7px;margin:6px 0}
.ui-greeting h1 span{font-weight:400;color:#797283}
.ui-greeting p{color:var(--text-dim);font-size:12px}
.ui-date{font-size:12px;color:var(--text-dim);white-space:nowrap}
.myfa-cols .ui-home-main,.myfa-cols .ui-home-side{min-width:0}
.ui-home-block{background:white;border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
.ui-home-side .card{box-shadow:none}
body[data-ui-tab="mytodos"] .myfa-cols{grid-template-columns:minmax(0,1fr) 310px!important;gap:22px!important}
body[data-ui-tab="mytodos"] .ui-home-main .card{box-shadow:none}
.salary-total strong{font-family:Georgia,"PingFang SC",serif;font-weight:500;letter-spacing:-.5px}
.salary-month-card.uploaded{background:#078963;color:#fff;border-color:#078963}
.salary-month-card.uploaded .salary-month-caption{opacity:1}
.salary-month-card:not(.uploaded){background:#f8f8fa;border-style:dashed;color:#73727e}
.salary-month-card{min-height:140px}
.salary-month-table th{font-size:12px}
.salary-month-table tbody tr:hover{background:#faf9fd}
@media(min-width:901px){
 body.shell-v2 .rail{width:var(--ui-sidebar);min-width:var(--ui-sidebar);padding:16px 14px;align-items:stretch;gap:2px;height:100dvh}
 body.shell-v2 .rail .rail-item{width:100%;min-height:42px;height:42px;flex-direction:row;justify-content:flex-start;padding:10px 13px;gap:12px;flex-shrink:0;border-radius:8px;color:#786b88;text-align:left}
 body.shell-v2 .rail .rail-item>span{font-size:13px;letter-spacing:0}
 body.shell-v2 .rail .rail-item svg{width:18px;height:18px;flex-shrink:0;color:#8b7c9e}
 body.shell-v2 .rail .rail-item.active{background:#e9e3f5;color:#654b99;box-shadow:inset 0 0 0 1px #e0d7ef;font-weight:500}
 body.shell-v2 .rail .rail-item:hover{background:#eeeaf4}
 body.shell-v2 .rail .rail-badge{position:static;margin-left:auto;min-width:18px;height:18px;background:#ece1d7;color:#986a45;border-radius:5px;font-style:normal}
 body.shell-v2 .rail .rail-foot{align-items:stretch;gap:0;margin-top:auto}
 body.shell-v2 .rail .rail-me{width:32px;height:32px;min-width:32px;margin:0;background:#e9e1f3;color:#70568d;font-weight:500}
 body.shell-v2 .main{min-width:0;height:100dvh}
 body.shell-v2 .listcol{width:260px;min-width:260px;background:#fff}
 body[data-ui-tab="mytodos"].shell-v2 .listcol{display:none!important}
 body[data-ui-tab="chat"].shell-v2 .listcol{display:none!important}
 .listcol .list-head{padding:22px 18px 16px}
 .listcol .list-body{padding:8px 12px}
 .listcol .lc-item{padding:12px}
 #chat-wrap{gap:18px!important}
 #chat-left,#chat-right{border-color:var(--border)!important;border-radius:12px!important}
}
@media(min-width:901px) and (max-width:1200px){
 :root{--ui-sidebar:200px}
 .header{padding-left:24px;padding-right:24px}
 .content{padding-left:24px;padding-right:24px}
 body[data-ui-tab="mytodos"] .myfa-cols{grid-template-columns:minmax(0,1fr) 280px!important}
 body.shell-v2 .listcol{width:220px;min-width:220px}
}
@media(max-width:900px){
 .ui-brand,.ui-nav-label,.ui-profile-text,.ui-logout{display:none}
 body.shell-v2 .rail .rail-foot{display:contents}
 body.shell-v2 .rail .ui-profile{display:contents}
 body.shell-v2 .rail .rail-me{order:-1}
 body.shell-v2 .rail .rail-item{min-width:56px}
 .header{padding:18px 16px 0}
 .header h2{font-size:21px}
 .content{padding:18px 16px 28px}
 .ui-greeting{align-items:flex-start;flex-direction:column;margin-bottom:20px;gap:8px}
 .ui-greeting h1{font-size:22px}
 body[data-ui-tab="mytodos"] .myfa-cols{grid-template-columns:1fr!important}
 .ui-home-block{padding:16px}
 .salary-month-grid{gap:10px}
 .salary-month-card{padding:14px;min-height:124px;gap:12px}
 .salary-month-heading b{font-size:20px}
 .salary-total strong{font-size:23px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Small screens retain an actionable approval list instead of hiding its only selector. */
@media(max-width:900px){
 body[data-ui-tab="pending"].shell-v2.list-on .listcol{
  display:flex!important;width:100%;min-width:0;height:210px;max-height:210px;border-right:0;border-bottom:1px solid var(--border)
 }
 body[data-ui-tab="pending"].shell-v2.list-on .listcol .list-head{padding:10px 16px 8px}
 body[data-ui-tab="pending"].shell-v2.list-on .listcol .list-title{margin-bottom:5px}
 body[data-ui-tab="pending"].shell-v2.list-on .main{height:calc(100dvh - 266px)}
}
.ui-task-scroll{overflow-x:auto;margin:0 -20px -20px}
.ui-task-table{width:100%;border-collapse:collapse;font-size:12px;min-width:600px}
.ui-task-table th{font-size:11px;font-weight:500;padding:11px 20px;text-align:left;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ui-task-table td{padding:16px 20px;border-bottom:1px solid #efedf3;vertical-align:top}
.ui-task-table tr:last-child td{border-bottom:0}
.ui-task-table tbody tr{cursor:pointer}
.ui-task-table tbody tr:hover{background:#faf9fc}
.ui-task-table td:first-child{width:38%}
.ui-task-table b{font-weight:500;overflow-wrap:anywhere}
.ui-task-table small{display:block;margin-top:6px;color:var(--text-dim);font-size:11px}
.ui-task-status{display:inline-block;padding:2px 7px;background:#eee9f8;color:#67558b;border-radius:4px;white-space:nowrap;margin-bottom:8px}
.ui-task-actions{display:flex;gap:5px;flex-wrap:wrap;min-width:140px}
.ui-task-actions button{cursor:pointer;border:1px solid var(--border);border-radius:5px;background:#fff;min-height:30px}
.ui-task-empty{padding:30px 16px;text-align:center;color:var(--text-dim);border:1px dashed var(--border);border-radius:8px}
@media(max-width:900px){.ui-task-scroll{margin:0 -16px -16px}.ui-task-table th,.ui-task-table td{padding-left:16px;padding-right:16px}}