/* Carat Workspace · shared visual system, September 2026. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0c1013;--card:#151b20;--card2:#1b232a;--line:#2a343d;--line-soft:#202930;--ink:#eef1ed;--muted:#a5b0b8;--muted2:#89969f;--violet:#d9bf83;--violet-dk:#e3c995;--indigo:#d9bf83;--fuchsia:#d9bf83;--cyan:#d9bf83;--cyan2:#e3c995;--yellow:#d9bf83;--gold:#d9bf83;--gold2:#e8d5ae;--violet-soft:#d9bf8314;--yellow-soft:#d9bf8314;--grad:linear-gradient(120deg,#192229,#11191e);--grad-btn:linear-gradient(110deg,#e8d5ae,#c7a96b);--shadow:0 4px 16px #0002;--shadow-md:0 12px 30px #0003;--glow:0 4px 20px #d9bf831a;--radius:16px;color-scheme:dark}
body{font-family:'DM Sans',sans-serif!important;background:var(--bg)!important;color:var(--ink);line-height:1.6}
h1,h2,h3,.sb-name,.brand h1,.hub-card .t,.hero .hi h2,.sec-head h2{font-family:'Manrope',sans-serif!important;letter-spacing:-.035em!important;font-style:normal!important}
button,input,select,textarea{font-family:inherit}button,a,[role=button]{touch-action:manipulation}
button:disabled{opacity:.5;cursor:wait}a{color:var(--gold)}
:focus-visible{outline:2px solid #e8d5ae!important;outline-offset:4px!important}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{color:var(--ink);background:#10171c!important;border-color:var(--line)!important;border-radius:9px!important;min-height:44px}
input::placeholder,textarea::placeholder{color:#8e9ba4!important;opacity:1}
option{color:var(--ink);background:#151b20}
.sidebar{background:#11171b!important;border-right:1px solid var(--line)!important;box-shadow:none!important;overflow-y:auto}
.sb-brand{padding-bottom:26px!important;border-color:var(--line)!important}.sb-name{font-size:19px!important}.sb-co{font-size:10px!important;letter-spacing:.07em!important;color:var(--muted)!important}
.sb-item{border-radius:9px!important;font-size:13px!important;min-height:43px;transition:background .15s,color .15s}
.sb-item.on{background:#d9bf8314!important;color:#e8d5ae!important;box-shadow:inset 3px 0 #d9bf83!important}
.sb-item:hover{background:#ffffff08!important}.sb-sec{color:#89969f!important;letter-spacing:.12em}.sb-user{border-color:var(--line)!important}.sb-ava,.avatar-me{background:#d9bf8320!important;color:#e8d5ae!important;box-shadow:none!important}
.hero{background:var(--grad)!important;border-radius:0 0 22px 22px!important;border-bottom:1px solid var(--line);box-shadow:none!important}
.hero::before,.hero::after,.hero-chart{display:none!important}.hero .hi h2{font-size:30px!important;font-weight:700!important}.hero .hi p{color:#adb9c1!important}.brand p{color:#a5b0b8!important}
.stat,.card,.clock-card,.leave-card,.slip-card,.rq-card,.prj-card{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:var(--shadow)!important}
.stat .num,.clock-time,.hub-marks .n{font-family:'Manrope',sans-serif!important;font-weight:700!important;font-variant-numeric:tabular-nums;letter-spacing:-.045em!important}.stat .lbl{color:var(--muted)!important}
.seg,.chips{gap:7px}.seg{background:#10171c!important;padding:5px!important;border:1px solid var(--line)}.seg-btn{min-height:42px;border-radius:8px!important}.seg-btn.on,.chip.on{background:#d9bf8324!important;color:#e8d5ae!important;box-shadow:none!important}
.nav{background:#11191ef5!important;border-top:1px solid var(--line)!important;backdrop-filter:blur(16px)}.nav .item.on{color:#e8d5ae!important}.nav .item.on .ic{background:#d9bf831a!important;box-shadow:none!important}
.modal{background:#151d23!important;border:1px solid var(--line)!important;box-shadow:0 28px 80px #0008!important}.overlay{background:#04080cc9!important;backdrop-filter:blur(8px)}
.btn-primary,.fab,.login-btn{background:var(--grad-btn)!important;color:#171915!important;box-shadow:none!important}.btn-ghost{background:#1b242b!important;color:#e4e8e5!important;border:1px solid var(--line)!important}
.hbtn,.gear{background:#ffffff08!important;border:1px solid #ffffff12!important;color:#d5dedf!important}
.sec-head h2{font-size:20px!important}.empty{color:#a5b0b8!important;padding:44px 20px!important}.badge,.pill{font-size:12px}
.table-scroll{border:1px solid var(--line);border-radius:12px;overflow:auto}th{background:#1c262d!important;color:#bec9ce!important}td{border-color:var(--line)!important}tbody tr:hover{background:#ffffff03}
body>.wrap{max-width:1380px;padding:20px 32px}.wrap header{padding:24px 0 28px;border-bottom:1px solid var(--line);margin-bottom:24px}.wrap header h1{font-size:36px}.eyebrow{color:var(--gold)!important}.wrap .card{padding:24px}.btn{border-radius:9px!important;min-height:44px}
.qa-btn,.acc-row,.sys-card,.prof-card,.txn,.pj,.stat-card,.curbar,#finInfo,.radial-card,.gaji-month,.baki .b{background:var(--card)!important;border:1px solid var(--line)!important;border-radius:13px!important;box-shadow:var(--shadow)!important}
#attAdminBar{flex-wrap:wrap;align-items:center}#attAdminBar .chip{flex:1 1 150px;min-height:44px}#attAdminBar input{min-width:0;flex:1 1 150px}
.role-tab,.chip{min-height:40px}
/* Override the older page-specific high-specificity field rules. */
body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),body .field select,body .field textarea{border:1px solid var(--line)!important;border-radius:9px!important;background:#10171c!important;color:var(--ink)!important}
body .login-field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){padding:13px!important;border:1px solid #354149!important;background:#10171c!important;letter-spacing:0!important}
body .login-field input::placeholder{color:#9aa8b0!important;letter-spacing:0!important}
body .login-title{font-family:'Manrope',sans-serif!important}body .login .land-bg{display:block!important}
.hub-card .open{font-family:'DM Sans',sans-serif!important}.chip,.tool-btn,.btn-cancel,.btn-save,.sys-save,.sys-pdf-btn{border-radius:9px!important}.btn-save,.sys-save,.sys-pdf-btn{background:var(--grad-btn)!important;color:#171915!important;letter-spacing:0!important;text-transform:none!important}
#prjReportBtn{background:#223b38!important;color:#b7e1d0!important}.sb-item.on{border-left:0!important}
/* Login is a calm editorial entrance with its own composition. */
.login{background:#0c1216!important;overflow-y:auto!important}.login .land-canvas,.trail-canvas,.land-glow,.land-shade,.land-vig,.land-mark{display:none!important}
.login .land-bg{background:radial-gradient(ellipse at 8% 20%,#27423888,transparent 60%),linear-gradient(120deg,#172522,#0c1216 65%)!important;opacity:1!important}
.land-hero{max-width:1240px!important;min-height:calc(100dvh - 94px)!important;display:grid!important;grid-template-columns:1.25fr 1fr!important;gap:90px!important;align-items:center!important;padding:65px 48px!important;margin:auto!important;position:relative}
.land-copy{max-width:610px!important}.q-eyebrow{font:600 11px 'DM Sans',sans-serif!important;letter-spacing:.24em!important;color:#d9bf83!important}.q-line{background:#d9bf83!important;width:28px!important}
.q-text{font-family:'Manrope',sans-serif!important;font-size:clamp(34px,4.3vw,58px)!important;font-weight:500!important;letter-spacing:-.05em!important;line-height:1.13!important;color:#f1f2e9!important;min-height:0!important}
.q-meta{margin-top:30px!important}.q-author{font-family:'DM Sans',sans-serif!important;font-style:normal!important;color:#d9bf83!important}.q-strip{margin-top:44px!important;border-top:1px solid #ffffff1c;padding-top:22px!important}.qs-l{color:#a5b0b8!important;letter-spacing:.1em!important}.qs-v{color:#d4ddd8!important}.q-sys{color:#a5b0b8!important}
.login .login-card{width:100%!important;max-width:440px!important;border-radius:20px!important;background:#151d23!important;padding:38px!important;border:1px solid #344038!important;box-shadow:0 24px 80px #0003!important;backdrop-filter:none!important;text-align:left!important}
.login-card::before{display:none!important}.login-shield{margin:0 0 24px!important;border-radius:12px!important;background:#d9bf8312!important;border-color:#d9bf8340!important}.login-title{font-size:31px!important;letter-spacing:-.04em!important}.login-company{font-size:10px!important;color:#b1bec4!important;letter-spacing:.13em!important}.login-sub{margin:20px 0!important;color:#a5b0b8!important;font-size:14px!important}
.login-field{margin-bottom:17px!important}.lf-label{font-size:11px!important;letter-spacing:.08em!important;color:#bdc8cf!important}.login-field input{width:100%;text-align:left!important;padding:13px!important;font:15px 'DM Sans',sans-serif!important;height:49px!important;letter-spacing:0!important}.login-btn{min-height:49px;letter-spacing:0!important;font-size:14px!important;border-radius:9px!important}.login-err{color:#ffaaa5!important}.land-foot{position:relative!important;padding:16px 32px!important;border-top:1px solid #ffffff10;color:#a5b0b8!important}.land-foot div:nth-child(2){display:none}.password-tools{display:flex;justify-content:space-between;gap:10px;margin:-5px 0 20px;font-size:12px;color:#a5b0b8}.password-tools button{border:0;background:none;color:#e8d5ae;padding:6px 0;cursor:pointer}
/* Workspace portal. */
.hub{background:radial-gradient(ellipse at 90% 0,#26392f55,transparent 48%),#0c1013!important;padding-bottom:24px!important;overflow-y:auto}
.hub-top{max-width:1320px!important;padding:25px 32px!important;border-bottom:1px solid #283239!important;margin-bottom:30px!important}.lb-carat{font-family:'Manrope',sans-serif!important;font-weight:800!important;font-style:normal!important;letter-spacing:-.06em!important}.lb-dot{background:#d9bf83!important}.lb-sys{font:10px 'DM Sans',sans-serif!important;letter-spacing:.15em!important;color:#a5b0b8!important}
.navcta{border:1px solid #3a454c!important;color:#dbe2e1!important;background:#ffffff04!important;min-height:40px;border-radius:8px!important;padding:8px 14px!important;font:500 12px 'DM Sans',sans-serif!important;text-transform:none!important;letter-spacing:0!important}
.hub-hero{max-width:1320px!important;padding:15px 32px 16px!important}.hh-eyebrow{font:600 11px 'DM Sans',sans-serif!important;letter-spacing:.18em!important;color:#d9bf83!important}.hub-hero h1{font-family:'Manrope',sans-serif!important;font-size:clamp(27px,3vw,40px)!important;letter-spacing:-.045em!important;line-height:1.2!important}.hub-hero p{color:#a5b0b8!important;font-size:14px!important}.hh-clock{font:500 28px 'Manrope',sans-serif!important}.hh-date{font:11px 'DM Sans',sans-serif!important;letter-spacing:.05em!important;color:#a5b0b8!important}
.hub-marks{max-width:1320px!important;padding:0 32px!important;gap:16px!important;margin:12px auto 0!important}.hub-marks .hm{background:#151b20!important;padding:22px!important;border:1px solid #2a343d!important;border-radius:12px!important;backdrop-filter:none!important}.hub-marks .n{font-size:34px!important;color:#e8d5ae!important}.hub-marks .l{font:12px 'DM Sans',sans-serif!important;letter-spacing:0!important;text-transform:none!important;color:#a5b0b8!important;margin-top:8px!important}
.hub-cards{max-width:1320px!important;padding:26px 32px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}.hub-card{min-height:156px;padding:23px!important;background:#141d23!important;border:1px solid #2b373e!important;border-radius:13px!important;backdrop-filter:none!important;--ac:#d9bf83!important;--acbg:#d9bf830a!important}
.hub-card .no{color:#89969f!important;font:11px 'DM Sans',sans-serif!important;margin-bottom:14px!important}.hub-card .t{font-size:21px!important;font-weight:700!important;line-height:1.3!important}.hub-card .d{font:13px 'DM Sans',sans-serif!important;color:#a5b0b8!important;min-height:0!important;margin-top:8px!important}.hub-card .open{position:absolute;right:23px;bottom:23px;color:#e8d5ae!important;font-size:12px!important}.hub-card .ic{background:#d9bf8310!important;right:23px!important;top:23px!important;color:#d9bf83!important}.hub-card:hover{transform:translateY(-2px)!important;box-shadow:0 12px 24px #0003!important;border-color:#d9bf8377!important}
.hub-foot{max-width:1256px!important;color:#89969f!important}.hub-foot>span:last-child{display:none}
.workspace-focus{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 32px 14px}.focus-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.focus-heading h2{font-size:19px}.focus-heading span{font-size:12px;color:#a5b0b8}.focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.focus-tile{padding:20px;background:#11191e;border:1px solid var(--line);border-radius:12px;color:var(--ink);text-align:left;cursor:pointer;min-height:126px}.focus-tile strong{font:700 27px 'Manrope',sans-serif;color:#e8d5ae;display:block}.focus-tile span{display:block;font-size:13px;margin:4px 0}.focus-tile small{font-size:11px;color:#a5b0b8}.focus-tile:hover{border-color:#d9bf8377}
.workspace-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:14px 0}.workspace-tools button{border:1px solid var(--line);border-radius:8px;padding:9px 14px;color:#d8e1e3;background:#182229;cursor:pointer;font-size:12px;min-height:40px}.workspace-tools button:first-child{min-width:205px;text-align:left}.workspace-tools kbd{margin-left:20px;color:#99a7ad;font-size:10px}.network-label{font-size:11px;color:#a5b0b8;margin-left:auto}.network-label::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#77bfa0;margin-right:7px}.network-label.offline::before{background:#e6b96b}
.workspace-command{padding:0;width:min(560px,calc(100vw - 28px));max-height:80dvh;background:#151d23;color:#eef1ed;border:1px solid #465047;border-radius:16px;box-shadow:0 30px 120px #0009;margin:auto}.workspace-command::backdrop{background:#050a0ec9;backdrop-filter:blur(7px)}.command-top{display:flex;align-items:center;gap:10px;padding:20px;border-bottom:1px solid var(--line)}.command-top input{flex:1;min-width:0;font-size:16px;padding:12px}.command-top button{background:#253038;color:#eee;border:0;border-radius:6px;padding:9px;cursor:pointer}.command-results{padding:10px;max-height:52dvh;overflow:auto}.command-results button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:14px;color:#edf0eb;border:0;border-radius:8px;background:transparent;cursor:pointer}.command-results button:hover,.command-results button:focus-visible{background:#d9bf8314}.command-results small{color:#99a7ad;font-size:11px}.command-help{padding:12px 20px;color:#a5b0b8;border-top:1px solid var(--line);font-size:11px}.command-empty{padding:28px 15px;color:#a5b0b8}.workspace-help{padding:22px;font-size:14px;line-height:1.8}.workspace-help h2{margin-bottom:12px}.workspace-help p{margin-bottom:12px}
body:has(#login:not(.hide))>.app,body:has(#login:not(.hide))>.sidebar,body:has(#login:not(.hide))>.nav,body:has(#login:not(.hide))>.fab{visibility:hidden}
@media(min-width:980px){.app{max-width:1320px!important}.app .hero{padding:28px 34px 65px!important}.content{padding-left:30px!important;padding-right:30px!important}}
@media(max-width:760px){.land-hero{grid-template-columns:1fr!important;gap:28px!important;padding:30px 22px!important;min-height:auto!important}.q-text{font-size:32px!important}.q-meta,.q-strip{display:none!important}.login .login-card{max-width:none!important;padding:27px!important}.login-shield{display:none!important}.land-copy{padding:14px 0!important}.land-foot{padding:14px 22px!important}.hub-top{padding:20px!important;margin-bottom:12px!important;gap:14px!important;flex-wrap:wrap!important}.hub-hero{padding:16px 20px!important}.hh-right{display:none}.hub-marks{padding:0 20px!important;gap:10px!important}.hub-marks .hm{padding:17px!important}.hub-cards{padding:20px!important;grid-template-columns:1fr!important;gap:12px!important}.hub-card{min-height:143px!important}.workspace-focus{padding:0 20px 14px}.focus-grid{grid-template-columns:1fr}.focus-tile{min-height:90px;padding:16px}.focus-tile strong{float:right;font-size:26px}.workspace-tools kbd{display:none}.workspace-tools button:first-child{min-width:0}.network-label{width:100%;margin:0}.hub-foot{margin:12px 20px!important;padding:15px 0!important}.hero .hi h2{font-size:25px!important}.wrap header h1{font-size:27px}body>.wrap{padding:14px}.wrap .card{padding:16px}.nav .item{min-height:52px}input,select,textarea{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.workspace-tools,.workspace-focus,.workspace-command{display:none!important}body{background:white!important;color:black!important}}