:root{
  --bg:#f7f7f5;--card:#fff;--ink:#171717;--muted:#6f6f6a;--line:#e7e6e2;
  --soft:#f0efeb;--dark:#191919;--accent:#b18b4a;--danger:#b54d4d;
  --green:#2f7356;--amber:#91651f;--violet:#6a5f91;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:var(--sans);background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
#toast{position:fixed;right:20px;bottom:20px;z-index:9999}
.toast{background:#171717;color:#fff;padding:13px 15px;border-radius:12px;box-shadow:0 16px 45px #0002;min-width:260px;font-size:13px}
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:#111}
.login-left{background:#faf9f6;padding:70px;display:flex;flex-direction:column;justify-content:center}
.brand{font-size:28px;font-weight:760;letter-spacing:-.02em}.brand small{display:block;color:#8c8c86;font-size:11px;letter-spacing:.15em;margin-top:5px}
.login h1{font-size:46px;line-height:1.08;letter-spacing:-.035em;max-width:650px;margin:38px 0 15px}
.login p{font-size:16px;line-height:1.65;color:var(--muted);max-width:620px}
.login-card{margin-top:26px;max-width:470px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.field{display:grid;gap:7px;margin-bottom:13px}.field label{font-size:12px;font-weight:700;color:#5d5d59}.field input,.field select,.field textarea{width:100%;border:1px solid #d9d8d3;border-radius:11px;padding:12px 13px;background:#fff;outline:0}.field input:focus,.field select:focus,.field textarea:focus{border-color:#9f824e;box-shadow:0 0 0 3px #b18b4a18}
.btn{border:1px solid #d9d8d3;background:#fff;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:720}.btn-dark{background:#171717;color:#fff;border-color:#171717}.btn-accent{background:#b18b4a;color:#fff;border-color:#b18b4a}
.login-right{position:relative;overflow:hidden;background:radial-gradient(circle at 20% 20%,#4b3a2377,transparent 30%),linear-gradient(135deg,#101010,#23221f)}
.login-right:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px);background-size:44px 44px;opacity:.25}
.showcase{position:absolute;inset:12%;color:#fff}.showcase h2{font-size:38px;letter-spacing:-.03em;max-width:560px;margin-top:16px}.glass{margin-top:55px;border:1px solid #ffffff22;background:#ffffff0f;backdrop-filter:blur(20px);border-radius:18px;padding:20px;max-width:520px}
.glass-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.glass-grid div{padding:16px;background:#ffffff0d;border-radius:12px}.glass-grid span{display:block;color:#b8b8b3;font-size:11px}.glass-grid b{display:block;font-size:28px;margin-top:5px}
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.sidebar{background:#171717;color:#fff;padding:19px 13px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.sidebrand{padding:8px 10px 23px;font-size:20px;font-weight:780}.sidebrand span{display:block;font-size:9px;color:#81817d;letter-spacing:.14em;margin-top:3px}.nav{display:grid;gap:4px}.nav button{border:0;background:transparent;color:#9d9d98;text-align:left;padding:11px 12px;border-radius:10px;font-size:13px;font-weight:680}.nav button:hover,.nav button.active{background:#292929;color:#fff}.nav button.active{box-shadow:inset 3px 0 #c49a53}.sidebottom{margin-top:auto;display:grid;gap:8px}.sidebottom .btn{background:#222;color:#aaa;border-color:#333}
.main{min-width:0}.topbar{height:72px;display:flex;align-items:center;padding:0 26px;background:#faf9f7eF;backdrop-filter:blur(14px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.topbar h1{font-size:23px;margin:0;letter-spacing:-.02em}.topbar p{margin:4px 0 0;color:#888883;font-size:11px}.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.userchip{border:1px solid var(--line);background:#fff;border-radius:11px;padding:7px 10px;text-align:left}.userchip b{display:block;font-size:11px}.userchip small{display:block;color:#898984;font-size:9px;margin-top:2px}
.content{padding:24px 26px 40px;max-width:1650px;margin:auto}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi{background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px;min-height:120px}.kpi span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#858580;font-weight:800}.kpi b{display:block;font-size:38px;margin-top:11px}.kpi small{font-size:11px;color:#8e8e89}.kpi.danger b{color:var(--danger)}.kpi.dark{background:#191919;border-color:#191919;color:#fff}.kpi.dark b{color:#caa665}.kpi.dark span,.kpi.dark small{color:#999994}
.panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;margin-top:14px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.panel-head h2{font-size:18px;margin:0}.panel-head p{font-size:11px;color:#8b8b86;margin:4px 0 0}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.toolbar input,.toolbar select{border:1px solid #dddcd7;border-radius:9px;padding:9px 10px;font-size:12px;background:#fff}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;min-width:850px}th{background:#f6f5f1;text-align:left;padding:10px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#777772}td{padding:11px 10px;border-top:1px solid #eeede9;font-size:12px}tr:hover td{background:#fffdf8}
.status{padding:4px 7px;border-radius:99px;font-size:9px;font-weight:800;display:inline-flex}.pending{background:#efefed;color:#666}.in_progress{background:#f7efdd;color:#8e6224}.waiting_for_update{background:#edf1f7;color:#526783}.blocked{background:#f7e7e6;color:#a34845}.awaiting_review{background:#efebf7;color:#695d8e}.needs_correction{background:#f8e8e6;color:#a34845}.completed{background:#e8f1ec;color:#327154}.cancelled{background:#eee;color:#777}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px}.card h3{font-size:14px;margin:0}.card p{font-size:11px;color:#8c8c86;margin:5px 0}.score{font-size:34px;font-weight:760;margin-top:14px}.muted{color:#8b8b86;font-size:11px}.empty{padding:34px;text-align:center;color:#92928d;font-size:12px}
.modalwrap{position:fixed;inset:0;background:#0006;display:grid;place-items:center;z-index:100;padding:20px}.modal{width:min(720px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:17px;padding:19px;box-shadow:0 25px 80px #0003}.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}.modal-head h2{margin:0;font-size:20px}.close{border:0;background:#f0efeb;border-radius:8px;width:32px;height:32px;font-size:18px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.span2{grid-column:1/3}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.detailgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.info{background:#f6f5f1;border-radius:10px;padding:10px}.info span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#858580}.info b{display:block;font-size:12px;margin-top:4px}.remark{padding:10px 0;border-bottom:1px solid #eee}.remark b{font-size:11px}.remark p{font-size:12px;margin:4px 0}.remark small{font-size:9px;color:#999}
@media(max-width:1000px){.login{grid-template-columns:1fr}.login-right{display:none}.shell{grid-template-columns:75px 1fr}.sidebrand{font-size:0}.sidebrand:before{content:"OS";font-size:18px}.sidebrand span{display:none}.nav button{font-size:0;text-align:center}.nav button:before{content:attr(data-short);font-size:12px}.kpis{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.login-left{padding:30px 20px}.login h1{font-size:34px}.shell{display:block}.sidebar{position:fixed;left:0;right:0;top:auto;bottom:0;height:62px;z-index:50;padding:5px}.sidebrand,.sidebottom{display:none}.nav{grid-template-columns:repeat(8,1fr)}.nav button{padding:8px 2px}.main{padding-bottom:62px}.topbar{padding:0 12px}.topbar>div:first-child{display:none}.content{padding:14px 10px 28px}.kpis{gap:8px}.kpi{padding:12px;min-height:102px}.kpi b{font-size:31px}.cards{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.span2{grid-column:1}.top-actions>.btn-accent{width:38px;font-size:0}.top-actions>.btn-accent:after{content:"+";font-size:18px}}

/* ===== OSLC WORKSPACE FULL APP v4 ===== */
.loading{padding:42px;text-align:center;color:#888;font-size:13px}
.eyebrow{display:block;font-size:9px;font-weight:850;letter-spacing:.13em;color:#8b744f;margin-bottom:5px}.eyebrow-light{font-size:10px;letter-spacing:.16em;color:#c2b49c;font-weight:800}
.panel-actions,.card-actions{display:flex;gap:7px;align-items:center}.iconbtn{position:relative;width:39px;height:39px;border:1px solid var(--line);background:#fff;border-radius:10px}.badge{position:absolute;right:-4px;top:-5px;background:#b54d4d;color:#fff;min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;font-size:9px;font-weight:800;padding:0 4px}.btn-success{background:#e8f1ec!important;border-color:#bcd7c7!important;color:#276548!important}.btn-small{padding:6px 9px;font-size:10px;border-radius:8px}.btn-danger-soft{background:#fff0ee;color:#a4413f;border-color:#f0cac6}.late-text{font-size:8px;font-weight:900;letter-spacing:.08em;color:#b54d4d;margin-top:3px}.overdue-row td{background:#fffafa}.priority-dot{width:7px;height:7px;border-radius:99px;display:inline-block;margin-right:6px;background:#aaa}.priority-dot.medium{background:#b58b3e}.priority-dot.high{background:#c86c3f}.priority-dot.critical{background:#b54d4d}.worktype{display:inline-flex;padding:4px 7px;border-radius:99px;background:#f1f0ed;color:#5e5e59;font-size:9px;font-weight:800}.worktype.team{background:#ece8f7;color:#65578f}.progressbar{width:92px;height:6px;background:#eee;border-radius:99px;overflow:hidden;display:inline-block;margin-right:6px;vertical-align:middle}.progressbar i{display:block;height:100%;background:#b18b4a}.modal-wide{width:min(980px,97vw)}.nested{gap:11px}.assignee-picker{border:1px solid #deddd8;border-radius:12px;padding:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:220px;overflow:auto;background:#fafaf8}.person-check{display:flex;gap:9px;align-items:center;padding:9px;border:1px solid #e7e6e2;border-radius:10px;background:#fff;cursor:pointer}.person-check:hover{border-color:#c9b284}.person-check input{width:auto}.person-check span{min-width:0}.person-check b{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.person-check small{font-size:9px;color:#888;display:block;margin-top:2px}.weekday-row{display:flex;gap:6px;flex-wrap:wrap}.weekday-row label{border:1px solid #ddd;border-radius:8px;padding:7px 8px;background:#fff;font-size:10px}.schedule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.schedule-card{border:1px solid var(--line);border-radius:15px;padding:16px;background:#fff}.schedule-card.paused{opacity:.67;background:#fafafa}.schedule-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.schedule-top h3{font-size:15px;margin:0}.schedule-state{font-size:8px;letter-spacing:.1em;font-weight:900;background:#e8f1ec;color:#2d6c50;padding:5px 7px;border-radius:99px}.paused .schedule-state{background:#eee;color:#777}.schedule-card>p{font-size:11px;color:#777;min-height:28px}.schedule-meta{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}.schedule-meta div{background:#f7f6f2;border-radius:9px;padding:9px}.schedule-meta span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#999}.schedule-meta b{font-size:10px;display:block;margin-top:3px}.detailgrid4{grid-template-columns:repeat(4,1fr)}.detail-section{margin-top:15px;border-top:1px solid var(--line);padding-top:14px}.detail-section h3{font-size:13px;margin:0 0 9px}.description{font-size:12px;line-height:1.65;color:#555}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title span{font-size:10px;color:#999}.assignment-list{display:grid;gap:7px}.assignment-row{display:flex;justify-content:space-between;gap:10px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:10px}.assignment-row b{font-size:11px}.assignment-row small{display:flex;gap:6px;align-items:center;margin-top:5px;font-size:9px;color:#888}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}.check-row{display:flex;gap:9px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #eee;font-size:11px}.check-row input{margin-top:2px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.progress-edit{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px dashed #ddd}.progress-edit label{font-size:10px;font-weight:700}.management-actions{margin-top:12px}.remark-compose{display:grid;grid-template-columns:1fr auto;gap:7px}.remark-compose input{border:1px solid #ddd;border-radius:10px;padding:10px}.activity-list{display:grid;gap:5px}.activity-item{display:flex;justify-content:space-between;gap:12px;padding:7px 9px;background:#f7f6f2;border-radius:8px;font-size:10px}.activity-item small{color:#999}.top-layer{z-index:130}.review-modal{width:min(540px,95vw)}.performance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.score-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px}.score-top{display:flex;justify-content:space-between;align-items:start;padding-bottom:11px;border-bottom:1px solid var(--line);margin-bottom:8px}.score-top span{display:block;font-weight:800;font-size:13px}.score-top small{font-size:9px;color:#999}.score-top>b{font-size:30px}.metric-row{display:flex;justify-content:space-between;padding:6px 0;font-size:10px}.metric-row span{color:#777}.status-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.status-summary div{background:#f6f5f1;border-radius:10px;padding:12px}.status-summary span{display:block;font-size:9px;color:#888;text-transform:uppercase}.status-summary b{display:block;font-size:22px;margin-top:4px}.notif-panel{position:fixed;right:24px;top:66px;z-index:80;width:min(390px,calc(100vw - 30px));max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 22px 60px #0002;padding:8px}.notif-head{display:flex;justify-content:space-between;align-items:center;padding:8px 7px}.notif-item{width:100%;display:block;text-align:left;border:0;border-top:1px solid #eee;background:#fff;padding:11px;border-radius:7px}.notif-item.unread{background:#fffaf0}.notif-item b,.notif-item span,.notif-item small{display:block}.notif-item b{font-size:11px}.notif-item span{font-size:10px;color:#666;margin-top:3px}.notif-item small{font-size:8px;color:#999;margin-top:5px}

@media(max-width:1100px){.assignee-picker{grid-template-columns:repeat(2,1fr)}.schedule-grid,.performance-grid{grid-template-columns:1fr 1fr}.detailgrid4{grid-template-columns:1fr 1fr}.top-actions #newScheduleTop{display:none}}
@media(max-width:650px){.nav{display:flex!important;overflow-x:auto;gap:2px}.nav button{min-width:52px;flex:0 0 52px}.sidebar{height:64px}.main{padding-bottom:64px}.top-actions #pushBtn,.top-actions #newScheduleTop{display:none}.topbar{height:64px}.assignee-picker{grid-template-columns:1fr}.schedule-grid,.performance-grid,.two-col{grid-template-columns:1fr}.detailgrid4{grid-template-columns:1fr 1fr}.schedule-meta{grid-template-columns:1fr}.status-summary{grid-template-columns:1fr 1fr}.remark-compose{grid-template-columns:1fr}.progress-edit{grid-template-columns:1fr}.modal{padding:14px}.notif-panel{right:8px;top:58px}}

/* ===== OSLC WORKSPACE V5 HR / PAYROLL ===== */
.small-kpi{font-size:24px!important;line-height:1.1}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}.permission-grid label{display:flex;gap:9px;align-items:center;border:1px solid var(--line);background:#faf9f6;border-radius:10px;padding:10px;font-size:10px;font-weight:700}.permission-grid input{width:auto}
.salary-preview{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:3px}.salary-preview div{background:#171717;color:#fff;border-radius:11px;padding:12px}.salary-preview span{display:block;font-size:8px;color:#bdb8ad;text-transform:uppercase;letter-spacing:.1em}.salary-preview b{display:block;font-size:18px;margin-top:4px;color:#e0bd7e}
.danger-zone{margin-top:16px;padding:14px;border:1px solid #efc8c3;background:#fff5f3;border-radius:13px;display:grid;gap:10px}.danger-zone>div b{display:block;color:#9d3834;font-size:12px}.danger-zone>div span{display:block;color:#8f6662;font-size:10px;margin-top:3px}.danger-zone label{font-size:10px;display:flex;gap:7px;align-items:center}.danger-zone input{width:auto}.btn-danger{background:#a94440;color:#fff;border-color:#a94440}
.salary-summary{display:grid;grid-template-columns:minmax(240px,.7fr) 1.6fr;gap:12px;margin-top:10px}.salary-hero{background:#171717;color:#fff;border-radius:15px;padding:20px;display:flex;flex-direction:column;justify-content:center}.salary-hero span{font-size:9px;color:#aaa;text-transform:uppercase;letter-spacing:.09em}.salary-hero b{font-size:30px;color:#e0bd7e;margin-top:7px}.salary-hero small{font-size:9px;color:#aaa;margin-top:7px}.salary-components{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.salary-components div{background:#f7f6f2;border-radius:10px;padding:10px}.salary-components span{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:#8c8c86}.salary-components b{display:block;font-size:11px;margin-top:4px}.salary-components .deduct{background:#fff1ef}.salary-components .deduct b{color:#a14944}
.notif-head>div small{display:block;font-size:8px;color:#999;margin-top:2px}.notif-item{border-top:1px solid #eee;background:#fff;padding:11px;border-radius:7px}.notif-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px}.notif-item.unread{box-shadow:inset 3px 0 0 #b18b4a}
.status.present{background:#e7f2eb;color:#2b694e}.status.absent{background:#f9e6e4;color:#9c3e3a}.status.half_day{background:#fff1d7;color:#8f6a22}.status.leave,.status.weekly_off,.status.holiday{background:#eef0f3;color:#58606a}.status.approved,.status.paid{background:#e7f2eb;color:#2b694e}.status.rejected{background:#f9e6e4;color:#9c3e3a}.status.draft,.status.hold{background:#f0f0ed;color:#666}
@media(max-width:900px){.salary-summary{grid-template-columns:1fr}.salary-components{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.permission-grid,.salary-preview{grid-template-columns:1fr}.salary-components{grid-template-columns:1fr 1fr}.salary-hero b{font-size:25px}}