@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{--navy:#10283a;--navy2:#173b4b;--teal:#0e807a;--teal2:#14a39a;--mint:#a7e6d9;--orange:#f59d32;--ink:#152e42;--muted:#71849b;--line:#e1e9ef;--paper:#fff;--bg:#f3f6f9;--green:#13856d;--red:#c85252;--shadow:0 18px 50px rgba(20,46,66,.08);--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(20,163,154,.23);outline-offset:2px}.hidden{display:none!important}.ambient{position:fixed;pointer-events:none;z-index:-1;filter:blur(60px);opacity:.28;border-radius:50%}.ambient-one{width:340px;height:340px;top:-120px;right:5%;background:#b7e6de}.ambient-two{width:280px;height:280px;bottom:-130px;left:20%;background:#ffddb1}
h1,h2,h3,p{margin-top:0}h1,h2,h3,strong{font-family:Manrope,"DM Sans",sans-serif}button{border:0}
.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:800;color:var(--teal);text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:13px;padding:12px 17px;font-weight:700;transition:transform .22s ease,box-shadow .22s ease,background .22s ease;white-space:nowrap}.btn:hover{transform:translateY(-2px)}.btn-primary{background:linear-gradient(135deg,var(--teal),#086d70);color:white;box-shadow:0 8px 18px rgba(14,128,122,.17)}.btn-primary:hover{box-shadow:0 12px 24px rgba(14,128,122,.25)}.btn-soft{background:#e8eff3;color:var(--ink)}.btn-soft:hover{background:#dce8ee}.btn-ghost{background:transparent;color:var(--muted)}.btn-danger{background:#fff0ef;color:#bd4c4c}.btn-sm{padding:8px 11px;border-radius:10px;font-size:12px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.login-screen{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);background:#fff;animation:screenIn .7s ease both}.login-art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:100vh;padding:42px 52px;background:radial-gradient(ellipse at 85% 18%,rgba(27,148,139,.28),transparent 35%),linear-gradient(145deg,#0d2537,#153b4a 64%,#0e5a5a);color:white}.login-art:before,.login-art:after{content:"";position:absolute;border:1px solid rgba(166,229,216,.13);border-radius:50%;pointer-events:none}.login-art:before{width:660px;height:660px;right:-220px;top:12%;animation:slowSpin 60s linear infinite}.login-art:after{width:440px;height:440px;right:-120px;top:23%;border-color:rgba(245,157,50,.22)}.login-art-top,.art-bottom{position:relative;z-index:1;display:flex;align-items:center;gap:11px;font-size:10px;font-weight:700;letter-spacing:1.9px;color:#a9c4d0}.live-dot,.status-pulse{width:7px;height:7px;display:inline-block;border-radius:50%;background:#57d7b3;box-shadow:0 0 0 5px rgba(87,215,179,.11)}.login-art-copy{position:relative;z-index:1;max-width:580px;margin:60px 0}.login-art-copy .eyebrow{color:#8fe0d1;margin-bottom:22px}.login-art-copy h1{font-size:clamp(42px,5vw,72px);line-height:1.07;letter-spacing:-3px;margin-bottom:23px;font-weight:800}.login-art-copy h1 em{font-style:normal;color:#ffb25d}.login-art-copy p{font-size:16px;line-height:1.8;color:#c1d3dc;max-width:420px}.login-metrics{display:flex;gap:14px;margin-top:48px}.login-metrics>div{padding:16px 18px;min-width:180px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(255,255,255,.045);backdrop-filter:blur(10px);display:grid;grid-template-columns:32px 1fr;column-gap:10px;align-items:center}.metric-symbol{grid-row:span 2;width:30px;height:30px;border-radius:9px;background:rgba(167,230,217,.12);color:#a7e6d9;display:grid;place-items:center;font-size:18px}.login-metrics b{font-size:12px}.login-metrics small{font-size:10px;color:#9db7c5;margin-top:3px}.art-bottom{justify-content:space-between;color:#89a7b6}.art-bottom span{color:#ffb25d}.login-panel{padding:46px clamp(36px,6vw,96px);display:flex;flex-direction:column;justify-content:center;max-width:760px;width:100%;margin:auto}.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:70px}.login-brand img{width:57px;height:57px;object-fit:contain;border-radius:12px}.login-brand>div{display:grid}.login-brand strong{font-size:24px;letter-spacing:-1px}.login-brand strong span,.brand-copy strong span{color:#56c7ad}.login-brand small{font-size:9px;font-weight:800;letter-spacing:2px;color:var(--muted);margin-top:3px}.login-welcome .eyebrow{margin-bottom:16px}.login-welcome h2{font-size:clamp(30px,3vw,40px);line-height:1.18;letter-spacing:-1.5px;margin-bottom:14px}.login-welcome p{color:var(--muted);margin-bottom:32px}.login-form{display:grid;gap:21px}.login-form label,.field{display:grid;gap:9px;font-size:12px;font-weight:700;color:#344c60}.login-form label>span{font-size:9px;letter-spacing:1.4px;color:#9aa8b5;font-weight:800}.login-form input,.field input,.field select,.field textarea,.filter-control{width:100%;min-width:0;padding:13px 14px;border:1px solid #dce5eb;border-radius:12px;background:#fff;color:var(--ink);transition:border .2s,box-shadow .2s}.login-form input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:#55bcb1;box-shadow:0 0 0 4px rgba(20,163,154,.08);outline:none}.password-wrap{position:relative}.password-wrap input{padding-right:48px;width:100%}.password-toggle{position:absolute;right:9px;top:50%;transform:translateY(-50%);background:transparent;color:#71849b;padding:8px}.login-submit{width:100%;justify-content:space-between;padding:15px 17px;margin-top:1px}.login-submit b{font-size:18px}.form-error{font-size:12px;color:#bf4c4c;min-height:0}.form-error:not(:empty){padding:11px 12px;border-radius:10px;background:#fff0ef}.login-foot{display:flex;align-items:center;gap:8px;margin-top:36px;color:#8294a3;font-size:10px}.login-foot span:last-child{margin-left:auto}.secure-icon{color:var(--teal);font-size:17px}
.app-shell{min-height:100vh;display:grid;grid-template-columns:258px minmax(0,1fr);animation:screenIn .45s ease both}.sidebar{background:linear-gradient(180deg,#10283a,#102e40 70%,#0d2536);color:#d9e5ec;min-height:100vh;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:25px 17px 19px;overflow-y:auto}.sidebar-brand{display:flex;align-items:center;gap:12px;padding:2px 10px 29px}.brand-mark{width:45px;height:45px;border-radius:13px;background:#fff;display:grid;place-items:center;overflow:hidden}.brand-mark img{width:100%;height:100%;object-fit:cover}.brand-copy{display:grid}.brand-copy strong{font-size:21px;line-height:1.1;color:white;letter-spacing:-1px}.brand-copy b{font-family:Manrope,sans-serif;font-size:17px;color:white;letter-spacing:-.5px}.brand-copy small{font-size:8px;letter-spacing:1.7px;color:#7ea6b7;margin-top:5px}.side-caption{padding:0 12px 12px;font-size:9px;letter-spacing:1.8px;color:#68889a;font-weight:800}.side-nav{display:grid;gap:6px}.nav-link{display:flex;align-items:center;gap:13px;width:100%;padding:13px 12px;border-radius:12px;color:#a8c0cc;background:transparent;text-align:left;font-weight:600;transition:all .22s ease}.nav-link:hover{background:rgba(255,255,255,.06);color:white;transform:translateX(2px)}.nav-link.active{background:linear-gradient(110deg,rgba(42,91,111,.8),rgba(26,66,83,.7));color:white;box-shadow:inset 3px 0 #58cbb5}.nav-icon{font-size:18px;width:22px;text-align:center;color:#7ccfbe}.nav-link kbd{margin-left:auto;font-size:9px;color:#64899b;background:rgba(255,255,255,.045);padding:4px 5px;border-radius:5px}.nav-link.active kbd{color:#b4e8de}.sidebar-bottom{margin-top:auto}.sidebar-status{display:flex;align-items:center;gap:11px;padding:13px 11px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.035);margin-top:28px}.sidebar-status .status-pulse{flex-shrink:0}.sidebar-status div,.user-meta{display:grid;gap:4px}.sidebar-status b,.user-meta b{font-size:11px;color:#e1edf2}.sidebar-status small,.user-meta small{font-size:10px;color:#7e9cac}.sidebar-user{display:flex;align-items:center;gap:10px;padding:18px 7px 13px}.user-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#e9a04c,#f7cb89);color:#173448;font-size:10px;font-weight:800}.user-meta{min-width:0}.logout-btn{margin-left:auto;width:30px;height:30px;border-radius:9px;color:#a6c1cc;background:rgba(255,255,255,.06);font-size:16px}.logout-btn:hover{background:rgba(255,255,255,.13);color:white}.sidebar-copy{border-top:1px solid rgba(255,255,255,.08);padding:15px 6px 0;color:#69899b;font-size:9px;letter-spacing:1.3px;line-height:1.9}
.main-area{min-width:0}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,3.2vw,54px);border-bottom:1px solid #e3ebf0;background:rgba(255,255,255,.76);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}.breadcrumb{display:flex;align-items:center;gap:11px;font-size:12px}.breadcrumb span{font-size:9px;letter-spacing:1.5px;color:#94a3b0;font-weight:800}.breadcrumb i{font-style:normal;color:#c4cfd7}.breadcrumb b{font-size:12px}.topbar-right{display:flex;align-items:center;gap:17px}.today-chip{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:10px;color:#667e91;font-size:11px}.today-chip .status-pulse{width:6px;height:6px}.top-add{padding:10px 14px;font-size:12px}.mobile-menu{display:none;background:#e7eff3;border-radius:9px;padding:9px;color:var(--ink)}
.page-wrap{padding:34px clamp(22px,3.2vw,54px) 20px;max-width:1720px;margin:0 auto}.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:26px}.page-heading .eyebrow{margin:4px 0 10px}.page-heading h1{font-size:clamp(26px,2.5vw,36px);letter-spacing:-1.4px;line-height:1.15;margin-bottom:10px}.page-heading p{font-size:13px;color:var(--muted);margin-bottom:0;line-height:1.6}.page-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}.page-content{animation:contentIn .38s ease both}.page-footer{display:flex;justify-content:space-between;gap:20px;margin-top:38px;padding:18px 0;border-top:1px solid #e1e9ef;color:#98a7b3;font-size:9px;letter-spacing:1px}.page-footer b{color:#53b9aa;margin:0 5px}
.notice-banner{display:flex;align-items:center;gap:13px;background:linear-gradient(110deg,#e1f5f0,#edf9f6);color:#177c72;border:1px solid #d7f0e8;border-radius:15px;padding:14px 17px;margin-bottom:24px}.notice-icon{width:31px;height:31px;border-radius:10px;background:#c7ede3;display:grid;place-items:center;font-size:15px}.notice-banner strong{display:block;font-size:12px;margin-bottom:3px}.notice-banner span{font-size:11px;color:#568e87}
.hero-banner{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:30px 34px;border-radius:22px;background:linear-gradient(115deg,#132f43 0%,#14545a 100%);color:#fff;margin-bottom:22px;min-height:166px}.hero-banner:after{content:"↗";position:absolute;right:30px;bottom:-40px;font-size:180px;line-height:1;color:rgba(255,255,255,.055);font-weight:800;pointer-events:none}.hero-copy{position:relative;z-index:1;max-width:700px}.hero-copy .eyebrow{color:#8de0cf;margin-bottom:11px}.hero-copy h2{font-size:clamp(21px,2.2vw,30px);letter-spacing:-.8px;margin-bottom:10px}.hero-copy p{color:#b9d1da;line-height:1.7;font-size:12px;margin-bottom:0}.hero-side{position:relative;z-index:1;min-width:150px;border-left:1px solid rgba(255,255,255,.17);padding-left:22px}.hero-side small{display:block;color:#9fc5cd;font-size:10px;margin-bottom:8px}.hero-side strong{font-size:23px;color:#b8f2df;letter-spacing:-.5px}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:22px}.stat-card{background:white;border:1px solid #e4ebf0;border-radius:17px;padding:20px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.stat-card:before{content:"";position:absolute;width:80px;height:80px;right:-28px;top:-28px;border-radius:50%;background:var(--tint,#e1f4ef);opacity:.8}.stat-top{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative}.stat-label{font-size:11px;color:#7a8b9c;font-weight:600}.stat-icon{width:33px;height:33px;border-radius:10px;background:var(--tint,#e1f4ef);color:var(--accent,#128477);display:grid;place-items:center;font-size:16px}.stat-value{font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(18px,1.7vw,25px);letter-spacing:-.8px;margin:17px 0 8px;white-space:nowrap}.stat-foot{display:flex;align-items:center;gap:6px;color:#8b9baa;font-size:10px}.stat-foot .positive{color:#16866e}.stat-foot .negative{color:#c65c5c}
.content-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:18px}.panel{background:#fff;border:1px solid #e2eaf0;border-radius:18px;min-width:0;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:19px 21px;border-bottom:1px solid #edf1f4}.panel-title{font-size:14px;font-weight:800;letter-spacing:-.2px;margin-bottom:5px}.panel-subtitle{font-size:10px;color:#8b9baa}.panel-body{padding:18px 21px}.text-link{color:var(--teal);font-size:11px;font-weight:800;background:transparent;padding:7px}.text-link:hover{text-decoration:underline}
.trip-mini-list{display:grid;gap:0}.mini-trip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px 0;border-bottom:1px solid #edf1f4}.mini-trip:last-child{border-bottom:0;padding-bottom:0}.mini-trip:first-child{padding-top:0}.mini-trip-main{display:flex;align-items:center;gap:11px;min-width:0}.mini-car-icon{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;background:#e6f5f1;color:#18887d;border-radius:12px;font-size:17px}.mini-trip-main strong{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px}.mini-trip-main small{font-size:10px;color:#8a9aa8}.mini-trip-right{text-align:right;display:grid;align-content:center;gap:6px}.mini-trip-right b{font-size:11px}.mini-trip-right small{font-size:10px;color:#8797a5}
.cash-visual{display:grid;gap:17px}.cash-balance{padding:17px;border-radius:14px;background:#f1f7f8}.cash-balance small{color:#71899a;font-size:10px}.cash-balance strong{display:block;font-size:24px;letter-spacing:-.6px;margin:8px 0}.cash-balance span{font-size:10px;color:#7c929e}.cash-bars{display:grid;gap:14px}.cash-bar-row{display:grid;grid-template-columns:70px 1fr auto;gap:9px;align-items:center;font-size:10px;color:#7d8f9e}.bar-track{height:7px;background:#edf2f5;border-radius:9px;overflow:hidden}.bar-fill{height:100%;border-radius:9px;background:linear-gradient(90deg,#15a08d,#8ddbc6);transition:width .6s ease}.bar-fill.out{background:linear-gradient(90deg,#ee9b4d,#f5c47e)}.cash-bar-row b{font-size:10px;color:var(--ink)}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}.search-box{position:relative;flex:1;min-width:190px;max-width:390px}.search-box span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#8294a2;font-size:16px}.search-box input{width:100%;padding:12px 14px 12px 38px;border:1px solid #dfe7ed;border-radius:12px;background:white}.filter-control{width:auto;min-width:145px;padding:11px 13px;font-size:12px}.table-panel{background:#fff;border:1px solid #e2eaf0;border-radius:17px;overflow:hidden}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}thead{background:#f8fafb}th{padding:13px 15px;text-align:left;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#8b9baa;font-weight:800;border-bottom:1px solid #e9eef2}td{padding:14px 15px;border-bottom:1px solid #eef2f5;font-size:11px;color:#516779}tbody tr{transition:background .15s}tbody tr:hover{background:#f8fbfc}tbody tr:last-child td{border-bottom:0}.cell-primary{display:block;font-size:12px;color:#20394c;font-weight:800;margin-bottom:4px}.cell-secondary{display:block;font-size:10px;color:#93a0ab}.money{font-family:Manrope,sans-serif;font-weight:800;color:#213b4f}.status-pill{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:6px 9px;font-size:10px;font-weight:800}.status-pill:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.status-jalan{background:#fff4df;color:#b27a21}.status-finish,.status-lunas{background:#e2f6ef;color:#168267}.status-dp{background:#e7f1ff;color:#4677bd}.status-belum-bayar{background:#fff0ed;color:#c85a4c}.row-actions{display:flex;align-items:center;gap:5px}.icon-btn{display:inline-grid;place-items:center;min-width:29px;height:29px;padding:0 7px;border-radius:8px;background:#eef3f6;color:#567184;font-size:12px;transition:all .2s}.icon-btn:hover{background:#dcece9;color:#0e807a}.icon-btn.danger:hover{background:#ffebea;color:#bd4c4c}.empty-state{padding:44px 20px;text-align:center;color:#899aa7}.empty-illustration{width:50px;height:50px;border-radius:15px;background:#e8f5f2;color:#18877c;display:grid;place-items:center;font-size:23px;margin:0 auto 14px}.empty-state strong{display:block;color:#304a5c;font-size:13px;margin-bottom:7px}.empty-state p{font-size:11px;max-width:330px;margin:0 auto 16px;line-height:1.6}
.page-stat-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:18px}.strip-card{background:#fff;border:1px solid #e2eaf0;border-radius:15px;padding:16px 18px}.strip-card small{font-size:10px;color:#8294a2}.strip-card strong{display:block;font-size:19px;margin-top:7px;letter-spacing:-.4px}
.cash-type{font-size:11px;font-weight:800}.cash-type.income{color:#13856d}.cash-type.expense{color:#c65c5c}
.settings-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:18px;align-items:start}.settings-form{padding:22px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:800;color:#496173}.field input,.field select,.field textarea{font-size:12px;padding:11px 12px}.field textarea{min-height:90px;resize:vertical}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:19px}.security-card{padding:22px}.security-card .security-icon{width:42px;height:42px;border-radius:13px;background:#e5f5f0;color:#128377;display:grid;place-items:center;font-size:20px;margin-bottom:15px}.security-card h3{font-size:15px;margin-bottom:8px}.security-card p{font-size:11px;color:#7e91a0;line-height:1.7;margin-bottom:17px}.security-note{font-size:10px;line-height:1.6;color:#71899a;background:#f3f7f9;padding:12px;border-radius:10px;margin-top:16px}
.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(10,28,41,.56);backdrop-filter:blur(8px);animation:fadeIn .2s ease both}.modal-card{width:min(760px,100%);max-height:min(90vh,920px);display:flex;flex-direction:column;background:#fff;border-radius:21px;box-shadow:0 30px 100px rgba(0,0,0,.25);overflow:hidden;animation:modalIn .3s cubic-bezier(.2,.8,.2,1) both}.modal-card.modal-wide{width:min(960px,100%)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 25px;border-bottom:1px solid #eaf0f3}.modal-head .eyebrow{font-size:9px;margin-bottom:7px}.modal-head h2{font-size:20px;letter-spacing:-.6px;margin:0}.modal-close{width:34px;height:34px;border-radius:10px;background:#f0f4f6;color:#667e8f;font-size:20px;flex-shrink:0}.modal-body{padding:23px 25px;overflow:auto}.modal-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 25px;border-top:1px solid #eaf0f3;background:#fbfcfd}.modal-footer small{color:#8797a4;font-size:10px}.modal-footer-actions{display:flex;gap:9px}.modal-body .form-grid{gap:15px}.modal-section-title{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:6px 0 -1px;font-size:11px;letter-spacing:.5px;color:#17857b;font-weight:800}.modal-section-title:after{content:"";height:1px;background:#e4efed;flex:1}.line-items{display:grid;gap:9px}.invoice-line{display:grid;grid-template-columns:minmax(0,1fr) 78px 140px 34px;gap:8px;align-items:center}.invoice-line input{width:100%;min-width:0;border:1px solid #dfe7ed;border-radius:9px;padding:10px;font-size:11px}.line-head{display:grid;grid-template-columns:minmax(0,1fr) 78px 140px 34px;gap:8px;color:#8797a4;font-size:9px;font-weight:800;letter-spacing:.7px;padding:0 2px 2px}.invoice-totals{display:grid;gap:10px;max-width:330px;margin:18px 0 0 auto}.invoice-total-row{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#7b8d9b}.invoice-total-row strong{color:#2a4559}.invoice-total-row.grand{padding-top:11px;border-top:1px solid #e4ebef;font-size:14px;font-weight:800;color:#20394c}.invoice-total-row.grand strong{font-size:19px;color:#0e807a}
.invoice-paper{background:white;color:#24394a;max-width:760px;margin:0 auto;padding:20px 24px;border:1px solid #e5ebef;border-radius:14px}.invoice-paper-head{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #163b4b;padding-bottom:20px;margin-bottom:22px}.invoice-company{display:flex;align-items:center;gap:12px}.invoice-company img{width:64px;height:64px;object-fit:contain}.invoice-company h3{font-size:17px;margin:0 0 5px}.invoice-company p{font-size:10px;color:#718493;line-height:1.5;margin:0}.invoice-meta{text-align:right}.invoice-meta .eyebrow{margin-bottom:7px}.invoice-meta h2{font-size:24px;letter-spacing:-.8px;margin:0 0 6px}.invoice-meta p{font-size:10px;color:#738595;margin:0;line-height:1.7}.invoice-billto{display:flex;justify-content:space-between;gap:20px;margin-bottom:23px}.invoice-billto small{font-size:9px;letter-spacing:1px;color:#8a9aa7;font-weight:800}.invoice-billto strong{display:block;font-size:14px;margin:8px 0 5px}.invoice-billto p{font-size:10px;color:#738595;line-height:1.7;margin:0}.invoice-paper table{white-space:normal}.invoice-paper th{background:#f2f6f8;padding:11px;font-size:9px}.invoice-paper td{padding:12px 11px;font-size:10px;color:#40586a}.invoice-paper .invoice-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:22px}.invoice-note{max-width:310px;font-size:10px;line-height:1.7;color:#7b8c98}.invoice-note strong{display:block;color:#29475a;margin-bottom:6px}.invoice-paper .invoice-totals{margin-top:0}.invoice-footer{border-top:1px solid #e3eaef;padding-top:13px;margin-top:26px;display:flex;justify-content:space-between;gap:20px;font-size:9px;color:#91a0ab}.invoice-footer strong{color:#19877c}
.toast-root{position:fixed;right:22px;bottom:22px;z-index:100;display:grid;gap:10px;width:min(360px,calc(100vw - 32px))}.toast{display:flex;align-items:flex-start;gap:11px;padding:14px 15px;border-radius:14px;background:#143346;color:white;box-shadow:0 15px 45px rgba(10,34,50,.25);animation:toastIn .3s ease both}.toast-mark{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:#1c8e7e;color:#fff;flex-shrink:0}.toast.error .toast-mark{background:#c85252}.toast strong{font-size:12px;display:block;margin:2px 0 4px}.toast small{font-size:10px;color:#c0d1d9;line-height:1.5;display:block}.toast-close{margin-left:auto;color:#b7cbd3;background:transparent;font-size:17px}
@keyframes screenIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes contentIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}@keyframes slowSpin{to{transform:rotate(360deg)}}
@media(max-width:1200px){.app-shell{grid-template-columns:225px minmax(0,1fr)}.sidebar{padding-left:13px;padding-right:13px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-banner{padding:26px}.content-grid{grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr)}.login-art{padding:35px}.login-panel{padding:38px}}
@media(max-width:900px){.login-screen{grid-template-columns:1fr}.login-art{min-height:auto;padding:25px 28px 30px}.login-art-copy{margin:42px 0 26px}.login-art-copy h1{font-size:46px}.login-art-copy p{font-size:14px}.login-metrics{margin-top:25px}.login-panel{padding:40px 28px;max-width:600px}.login-brand{margin-bottom:42px}.art-bottom{margin-top:15px}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;bottom:0;width:270px;height:100vh;z-index:30;transform:translateX(-105%);transition:transform .28s ease;box-shadow:20px 0 50px rgba(0,0,0,.12)}.sidebar.mobile-open{transform:translateX(0)}.mobile-menu{display:inline-grid;place-items:center}.topbar{padding:0 20px;gap:12px}.breadcrumb{margin-right:auto}.topbar-right{gap:9px}.today-chip{display:none}.page-wrap{padding:28px 20px 18px}.content-grid,.settings-grid{grid-template-columns:1fr}.hero-side{min-width:130px}.page-heading{flex-direction:column;gap:16px}.page-actions{justify-content:flex-start}.page-footer{flex-direction:column;gap:8px}}
@media(max-width:600px){.login-art{padding:22px}.login-art-copy h1{font-size:39px;letter-spacing:-1.8px}.login-art-copy p{font-size:13px}.login-metrics{gap:8px}.login-metrics>div{min-width:0;flex:1;padding:11px 10px;grid-template-columns:27px 1fr}.metric-symbol{width:26px;height:26px}.login-metrics b{font-size:10px}.login-metrics small{font-size:9px}.login-panel{padding:32px 22px}.login-brand{margin-bottom:35px}.login-welcome h2{font-size:31px}.login-foot{font-size:9px}.topbar{height:64px;padding:0 14px}.breadcrumb span,.breadcrumb i{display:none}.breadcrumb b{font-size:11px}.top-add{font-size:0;padding:10px 12px;gap:0}.top-add span{font-size:18px}.page-wrap{padding:23px 14px 15px}.page-heading h1{font-size:27px}.page-heading p{font-size:12px}.hero-banner{padding:23px 20px;align-items:flex-start;flex-direction:column}.hero-side{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding:13px 0 0;min-width:0;width:100%}.hero-side strong{font-size:20px}.stat-grid{gap:9px}.stat-card{padding:14px;border-radius:14px}.stat-label{font-size:10px}.stat-icon{width:28px;height:28px}.stat-value{font-size:17px;margin:13px 0 7px}.stat-foot{font-size:9px;line-height:1.4}.panel-head,.panel-body{padding:15px}.toolbar{align-items:stretch}.search-box{max-width:none;flex-basis:100%}.filter-control{flex:1;min-width:0}.page-stat-strip{gap:8px}.strip-card{padding:13px}.strip-card small{font-size:9px}.strip-card strong{font-size:15px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.modal-backdrop{padding:8px}.modal-card{max-height:94vh;border-radius:16px}.modal-head{padding:18px}.modal-body{padding:17px}.modal-footer{padding:13px 17px}.modal-head h2{font-size:17px}.invoice-line,.line-head{grid-template-columns:minmax(0,1fr) 48px 92px 28px;gap:5px}.invoice-line input{padding:8px 6px;font-size:10px}.line-head{font-size:8px}.invoice-paper{padding:13px;border-radius:8px}.invoice-paper-head{gap:10px}.invoice-company{gap:7px}.invoice-company img{width:42px;height:42px}.invoice-company h3{font-size:12px}.invoice-company p,.invoice-meta p{font-size:8px}.invoice-meta h2{font-size:17px}.invoice-meta .eyebrow{font-size:8px}.invoice-billto{gap:10px}.invoice-billto strong{font-size:11px}.invoice-paper th,.invoice-paper td{padding:8px 5px;font-size:8px}.invoice-bottom{flex-direction:column}.invoice-note{max-width:none}.invoice-paper .invoice-totals{max-width:none}.invoice-footer{font-size:8px}.modal-footer small{display:none}.modal-footer-actions{margin-left:auto}.page-footer{font-size:8px}.row-actions{gap:3px}.icon-btn{min-width:27px;height:27px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
@media print{body *{visibility:hidden!important}#modalRoot,#modalRoot *{visibility:hidden!important}.invoice-paper,.invoice-paper *{visibility:visible!important}.invoice-paper{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:12mm!important;margin:0!important}.modal-backdrop,.modal-card,.modal-head,.modal-footer,.no-print{background:white!important;box-shadow:none!important}.modal-backdrop{position:static!important;padding:0!important;display:block!important;background:white!important}.modal-card{display:block!important;max-height:none!important;overflow:visible!important}.modal-body{overflow:visible!important;padding:0!important}.invoice-paper{font-family:Arial,sans-serif!important}}


/* Profil administrator */
.admin-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 14px;
}

.admin-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 50%;
  border: 2px solid #dbe9e9;
  box-shadow: 0 2px 8px rgba(16, 42, 59, 0.10);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.admin-profile-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-profile-info strong {
  color: #163044;
  font-size: 14px;
  font-weight: 700;
}

.admin-profile-info span {
  color: #73869a;
  font-size: 12px;
}

.admin-profile:hover .admin-avatar {
  box-shadow: 0 5px 14px rgba(15, 118, 110, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .admin-avatar {
    transition: none;
  }
}

/* =========================================================
   FIX STABIL: modalRoot kosong tidak boleh menutupi aplikasi
   ========================================================= */

/* Saat tidak ada modal, root harus benar-benar tidak ikut layout
   dan tidak boleh menangkap klik/scroll halaman. */
#modalRoot:empty {
  display: none !important;
}

/* Root hanya aktif ketika modal sedang dirender. */
#modalRoot:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: visible;
  padding: 0;
  pointer-events: auto;
  box-sizing: border-box;
}

#modalRoot .modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

#modalRoot .modal-card {
  display: flex;
  flex-direction: column;
  width: min(960px, 100%);
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#modalRoot #modalForm {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow: hidden;
}

#modalRoot #modalForm .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#modalRoot #modalForm .modal-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #fff;
}

#modalRoot #modalForm .modal-footer-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

#modalRoot #modalForm .modal-footer-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  cursor: pointer;
}

@media (max-width: 700px) {
  #modalRoot .modal-backdrop {
    align-items: flex-start;
    padding: 8px;
  }

  #modalRoot .modal-card {
    width: 100%;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 16px;
  }

  #modalRoot .modal-head {
    padding: 16px;
  }

  #modalRoot #modalForm .modal-body {
    padding: 16px;
  }

  #modalRoot #modalForm .modal-footer {
    padding: 12px 16px;
  }

  #modalRoot #modalForm .modal-footer small {
    flex: 1 1 100%;
  }

  #modalRoot #modalForm .modal-footer-actions {
    width: 100%;
  }

  #modalRoot #modalForm .modal-footer-actions button {
    flex: 1 1 auto;
  }
}

/* =========================================================
   WR OPERATIONS — DASHBOARD DESIGN RESTORE
   Layout aligned with the agreed operational dashboard mockup
   ========================================================= */
.app-shell{grid-template-columns:260px minmax(0,1fr);background:#f2f5f7;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#0b2638 0%,#082538 100%);color:#dce7ec;padding:22px 16px 18px;min-height:100vh;height:100vh;position:sticky;top:0;display:flex;flex-direction:column;overflow-y:auto}
.sidebar-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0 4px 16px}
.brand-mark{width:128px;height:128px;border-radius:0;background:transparent;overflow:visible;display:grid;place-items:center}
.brand-mark img{width:100%;height:100%;object-fit:contain}
.brand-copy{display:none}
.side-caption{padding:0 12px 12px;color:#688a9b;font-size:9px;letter-spacing:1.6px;font-weight:800}
.side-nav{display:grid;gap:5px}
.nav-link{min-height:45px;padding:11px 12px;border-radius:10px;gap:12px;color:#d0dce3;font-size:13px;font-weight:600;transition:background .18s,color .18s}
.nav-link:hover{background:rgba(255,255,255,.07);color:#fff;transform:none}
.nav-link.active{background:linear-gradient(100deg,#087e87,#0a6d7b);color:#fff;box-shadow:none}
.nav-link.active:before{content:"";position:absolute}
.nav-icon{width:20px;flex:0 0 20px;font-size:18px;color:#b9d2db}
.nav-link.active .nav-icon{color:#fff}
.nav-link kbd{display:none}
.sidebar-bottom{margin-top:auto;padding-top:24px}
.sidebar-status{margin-top:0;padding:11px 10px;border:0;border-radius:10px;background:rgba(255,255,255,.055)}
.sidebar-status b{font-size:11px}
.sidebar-status small{font-size:9px;line-height:1.5}
.sidebar-copy{padding:15px 7px 0;margin-top:16px;color:#a0b7c2;font-size:9px;letter-spacing:.5px;line-height:1.8}
.sidebar-online-dot{color:#39d6a4}
.main-area{min-width:0;background:#f2f5f7}
.topbar{height:64px;padding:0 24px;border-bottom:1px solid #e5ebef;background:#fff;backdrop-filter:none;gap:18px;position:sticky;top:0;z-index:20}
.breadcrumb{display:none}
.top-search{display:flex;align-items:center;gap:10px;width:min(430px,48vw);height:38px;padding:0 12px;border:1px solid #e4ebef;border-radius:10px;background:#f8fafb;color:#8496a4}
.top-search>span{font-size:19px;line-height:1}
.top-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#1c3548;font-size:11px}
.top-search input::placeholder{color:#94a3af}
.top-search kbd{white-space:nowrap;font-size:9px;color:#8c9aa5;border:1px solid #e0e7ec;border-radius:5px;padding:3px 5px;background:#fff}
.topbar-right{display:flex;align-items:center;gap:15px;margin-left:auto}
.notification-btn{position:relative;width:35px;height:35px;border-radius:10px;background:transparent;color:#2c475b;font-size:18px}
.notification-btn:hover{background:#f0f5f7}
.notification-btn i{position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:50%;background:#e5485a;border:1px solid white}
.admin-profile{display:flex;align-items:center;gap:10px;padding:3px 5px 3px 9px;border-radius:12px;background:transparent}
.admin-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #d7e7e9}
.admin-profile-info{display:flex;flex-direction:column;gap:3px;min-width:80px}
.admin-profile-info strong{font-size:12px;color:#173348}
.admin-profile-info span{font-size:10px;color:#71849b}
.admin-profile .logout-btn{width:25px;height:28px;margin-left:1px;background:transparent;color:#6d8291}
.admin-profile .logout-btn:hover{background:#edf3f5;color:#18364a}
.page-wrap{max-width:none;padding:18px 28px 24px;margin:0;width:100%}
.page-heading{margin-bottom:22px}
.page-heading h1{font-size:30px}
.page-heading p{font-size:13px}
.page-content{min-width:0}
.page-footer{margin-top:24px}
.dashboard-page{display:grid;gap:18px;min-width:0}
.dashboard-welcome-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 2px}
.dashboard-welcome-copy .eyebrow{font-size:10px;letter-spacing:1.7px;margin-bottom:7px;color:#0d6973}
.dashboard-welcome-copy h1{font-size:30px;letter-spacing:-1.2px;line-height:1.18;margin:0 0 7px;color:#0e2d43}
.dashboard-welcome-copy p{font-size:13px;color:#70869a;margin:0}
.dashboard-date-card{display:flex;align-items:center;gap:12px;padding:11px 14px;min-width:270px;background:#fff;border:1px solid #e5ebef;border-radius:10px;box-shadow:0 3px 10px rgba(17,44,62,.035)}
.dashboard-calendar{font-size:22px;color:#1d3d53}
.dashboard-date-copy{display:grid;gap:3px;min-width:0}
.dashboard-date-copy strong{font-size:12px;white-space:nowrap;color:#1b354b}
.dashboard-date-copy small{font-size:10px;color:#74889a}
.dashboard-live{display:flex;align-items:center;gap:5px;margin-left:auto;color:#169b70;font-size:11px;font-weight:700}
.dashboard-live i{width:7px;height:7px;background:#23bf8a;border-radius:50%;box-shadow:0 0 0 4px #e5f8ef}
.target-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.target-stat-card{position:relative;display:flex;align-items:center;gap:13px;min-width:0;min-height:90px;padding:16px 17px;border:1px solid #e7edf0;border-radius:12px;overflow:hidden;background:#fff}
.target-stat-card:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stat-accent,#17a780)}
.stat-green{--stat-accent:#20a87d;background:linear-gradient(110deg,#f1fbf7,#f8fdfb)}
.stat-blue{--stat-accent:#2589f3;background:linear-gradient(110deg,#f1f7ff,#f8fbff)}
.stat-orange{--stat-accent:#f27b50;background:linear-gradient(110deg,#fff8f3,#fffdfb)}
.stat-purple{--stat-accent:#8c5af6;background:linear-gradient(110deg,#f8f4ff,#fdfbff)}
.target-stat-icon{display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:#e1f7ee;color:#159d77;font-size:20px;font-weight:800}
.stat-blue .target-stat-icon{background:#e1efff;color:#2587ed}.stat-orange .target-stat-icon{background:#fff0e4;color:#e87648}.stat-purple .target-stat-icon{background:#eee6ff;color:#8554e9}
.target-stat-copy{display:grid;gap:3px;min-width:0;position:relative;z-index:1}
.target-stat-copy small{font-size:10px;font-weight:700;color:#2e4658}
.target-stat-copy strong{font-size:19px;line-height:1.15;letter-spacing:-.4px;color:#102f47;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.target-stat-copy span{font-size:10px;color:#71869a}
.target-spark{width:70px;flex:0 0 70px;align-self:flex-end;margin-left:auto;opacity:.9}
.target-spark svg{display:block;width:100%;height:32px;overflow:visible}
.target-spark path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.spark-green{color:#22b98b}.spark-blue{color:#328dff}.spark-orange{color:#fa885c}.spark-purple{color:#9a6aff}
.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:stretch}
.target-panel{min-width:0;background:#fff;border:1px solid #e4ebef;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px rgba(18,43,61,.035)}
.target-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 17px;background:linear-gradient(105deg,#10384b,#0c4d58);color:#fff;min-height:60px}
.target-panel-heading{display:flex;align-items:center;gap:11px;min-width:0}
.target-panel-icon{display:grid;place-items:center;width:29px;height:29px;flex:0 0 29px;font-size:19px;color:#fff}
.target-panel-heading>div{display:grid;gap:3px;min-width:0}
.target-panel-heading strong{font-size:15px;line-height:1.2;color:#fff}
.target-panel-heading small{font-size:10px;color:#b9d1db;white-space:normal}
.target-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;border-radius:8px;color:#fff;font-size:11px;font-weight:800;white-space:nowrap}
.target-button-teal{background:#08a99d}
.target-button-teal:hover{background:#0bc0b0}
.target-table-wrap{width:100%;overflow-x:auto}
.target-table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:10px}
.target-table th{padding:10px 11px;text-align:left;background:#f8fafb;color:#4d6476;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.35px;border-bottom:1px solid #e8edf1}
.target-table td{padding:10px 11px;color:#334e62;border-bottom:1px solid #edf1f4;vertical-align:middle}
.target-table tbody tr:last-child td{border-bottom:0}
.target-table tbody tr:hover{background:#f9fcfd}
.target-table .status-pill{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:9px;font-weight:800}
.target-row-action{width:26px;height:25px;background:transparent;color:#1d465f;border-radius:6px;font-weight:900;font-size:16px;letter-spacing:1px}
.target-row-action:hover{background:#eaf2f5}
.target-empty{text-align:center!important;white-space:normal!important;padding:24px 16px!important;color:#7b8e9e!important;line-height:1.6}
.target-panel-bottom{display:flex;justify-content:flex-end;padding:8px 15px;border-top:1px solid #edf1f4}
.target-text-link{background:transparent;color:#0a9187;font-size:10px;font-weight:800;white-space:nowrap;padding:6px}
.target-text-link:hover{text-decoration:underline}
.target-quick-actions{padding:15px;background:linear-gradient(155deg,#0d2b3e,#092638);border-radius:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.target-quick-actions>header{display:flex;align-items:center;gap:10px;color:#fff;padding:1px 2px 9px}
.target-quick-actions>header span{font-size:22px;color:#f7cf52}
.target-quick-actions>header strong{font-size:15px}
.quick-action{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:10px 12px;border-radius:8px;color:white;text-align:left;font-size:11px;font-weight:800;box-shadow:0 3px 7px rgba(0,0,0,.12)}
.quick-action>span{font-size:15px}.quick-action b{margin-left:auto;font-size:16px;font-weight:500}
.quick-teal{background:linear-gradient(100deg,#0b9c91,#08b3a4)}.quick-blue{background:linear-gradient(100deg,#187be5,#3196ff)}.quick-orange{background:linear-gradient(100deg,#dc5d43,#f0794f)}.quick-purple{background:linear-gradient(100deg,#6338da,#8a4de9)}
.quick-action:hover{filter:brightness(1.06);transform:translateY(-1px)}
.dashboard-lower-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.05fr) minmax(0,1.05fr);gap:18px;align-items:stretch}
.target-light-link{color:#5de1c9}
.target-cash-content{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:13px}
.target-cash-box{display:flex;align-items:flex-start;gap:9px;padding:12px 10px;border-radius:9px;min-width:0}
.target-cash-box>span{font-size:18px;font-weight:800}
.target-cash-box>div{display:grid;gap:4px;min-width:0}
.target-cash-box small{font-size:10px;font-weight:700}
.target-cash-box strong{font-size:13px;line-height:1.25;overflow-wrap:anywhere}
.target-cash-box em{font-style:normal;font-size:9px;color:#6d8291}
.cash-income{background:#edf9f5;color:#159a74}.cash-expense{background:#fff0f2;color:#dc4d65}
.target-balance-box{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:12px;border-radius:9px;background:#eef9f5;color:#12886e}
.target-balance-box>span{display:grid;place-items:center;width:31px;height:31px;background:#d7f0e8;border-radius:7px;font-size:17px}
.target-balance-box>div{display:grid;gap:3px;min-width:0}.target-balance-box small{font-size:10px;font-weight:700}.target-balance-box strong{font-size:14px;overflow-wrap:anywhere}.target-balance-box>b{margin-left:auto;color:#1ba77c}
.target-invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:13px}
.target-invoice-box{display:grid;align-content:start;gap:4px;padding:12px 11px;min-height:76px;border-radius:9px;min-width:0}
.target-invoice-box small{font-size:9px;font-weight:700}.target-invoice-box strong{font-size:16px;line-height:1.2;overflow-wrap:anywhere}.target-invoice-box em{font-style:normal;font-size:9px;color:#73879a}
.inv-blue{background:#f0f6ff;color:#287fe7}.inv-green{background:#edf9f4;color:#13966e}.inv-red{background:#fff0f2;color:#d64b61}
.report-grid,.master-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.report-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.report-metric-grid .strip-card{min-width:0;overflow-wrap:anywhere}
.master-count{display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:8px;background:#e5f7f2;color:#078777;font-size:11px;font-weight:800}
.master-list{display:grid;gap:7px}.master-list-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #edf1f4;border-radius:8px;color:#344e60}.master-list-item>span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e9f5f2;color:#108c7d}.master-list-item strong{font-size:11px;overflow-wrap:anywhere}
@media(max-width:1450px){.dashboard-main-grid{grid-template-columns:minmax(0,1fr) 290px}.dashboard-lower-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-lower-grid>.target-panel:last-child{grid-column:1/-1}.target-stat-card{padding:13px;gap:9px}.target-spark{width:48px;flex-basis:48px}}
@media(max-width:1100px){.app-shell{grid-template-columns:230px minmax(0,1fr)}.sidebar{padding-left:12px;padding-right:12px}.brand-mark{width:145px;height:110px}.page-wrap{padding:18px 18px 22px}.dashboard-main-grid{grid-template-columns:minmax(0,1fr)}.target-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.target-quick-actions>header{grid-column:1/-1}.dashboard-lower-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-lower-grid>.target-panel:last-child{grid-column:auto}.target-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;height:100dvh;min-height:0;z-index:50;transform:translateX(-105%);transition:transform .25s ease;box-shadow:20px 0 50px rgba(0,0,0,.2)}.sidebar.mobile-open{transform:translateX(0)}.mobile-menu{display:inline-grid;place-items:center;flex:0 0 auto}.topbar{padding:0 14px;gap:10px}.top-search{width:auto;flex:1}.top-search kbd{display:none}.admin-profile-info{display:none}.admin-profile{gap:3px;padding:0}.admin-avatar{width:36px;height:36px}.admin-profile .logout-btn{width:24px}.notification-btn{width:30px}.page-wrap{padding:17px 15px 20px}.dashboard-welcome-row{align-items:flex-start;flex-direction:column}.dashboard-date-card{min-width:0;width:100%}.dashboard-welcome-copy h1{font-size:26px}.dashboard-lower-grid{grid-template-columns:1fr}.dashboard-lower-grid>.target-panel:last-child{grid-column:auto}.report-grid,.master-grid{grid-template-columns:1fr}}
@media(max-width:600px){.topbar{height:58px;padding:0 9px}.top-search{height:35px;padding:0 8px;gap:6px}.top-search input{font-size:10px}.top-search input::placeholder{max-width:150px}.notification-btn{display:none}.admin-avatar{width:31px;height:31px}.admin-profile .logout-btn{width:22px}.page-wrap{padding:15px 10px 18px}.dashboard-page{gap:13px}.dashboard-welcome-copy h1{font-size:23px;letter-spacing:-.7px}.dashboard-welcome-copy p{font-size:11px}.dashboard-date-card{padding:9px 10px}.dashboard-date-copy strong{font-size:10px}.target-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.target-stat-card{min-height:90px;padding:10px 9px;gap:7px}.target-stat-icon{width:31px;height:31px;flex-basis:31px;font-size:16px}.target-stat-copy small{font-size:9px}.target-stat-copy strong{font-size:14px}.target-stat-copy span{font-size:8px}.target-spark{display:none}.dashboard-main-grid{gap:12px}.target-panel-head{padding:11px 12px;min-height:55px}.target-panel-heading{gap:7px}.target-panel-heading strong{font-size:12px}.target-panel-heading small{font-size:8px}.target-panel-icon{width:23px;flex-basis:23px;font-size:15px}.target-button{padding:8px 9px;font-size:9px}.target-table{font-size:9px}.target-table th{padding:9px 8px;font-size:8px}.target-table td{padding:9px 8px}.target-quick-actions{padding:12px;grid-template-columns:1fr 1fr;gap:7px}.target-quick-actions>header strong{font-size:13px}.quick-action{min-height:43px;gap:6px;padding:8px;font-size:9px}.quick-action b{font-size:13px}.target-cash-content,.target-invoice-grid{padding:9px;gap:7px}.target-cash-box{gap:6px;padding:9px 7px}.target-cash-box>span{font-size:14px}.target-cash-box small,.target-invoice-box small{font-size:8px}.target-cash-box strong{font-size:10px}.target-cash-box em,.target-invoice-box em{font-size:8px}.target-invoice-box{padding:9px;min-height:69px}.target-invoice-box strong{font-size:13px}.report-metric-grid{grid-template-columns:1fr}.report-metric-grid .strip-card strong{font-size:13px}.page-heading h1{font-size:24px}}


/* Invoice template matching the Semarang / Medan paper invoices */
.invoice-column-editor{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.invoice-column-config{display:flex;align-items:center;gap:5px;max-width:260px;padding:5px;border:1px solid #dfe8ed;border-radius:10px;background:#f8fafb}
.invoice-column-config input[type="text"]{width:165px;min-width:0;padding:7px 9px;border:1px solid #dfe7ed;border-radius:7px;background:#fff;font-size:11px}
.invoice-column-config .icon-btn{min-width:26px;height:26px}
.invoice-column-add{display:flex;gap:8px;align-items:center;margin-top:10px}
.invoice-column-add input{flex:1;min-width:0;padding:10px 12px;border:1px solid #dfe7ed;border-radius:9px;font-size:11px}
.invoice-help{display:block;margin-top:8px;font-size:10px;line-height:1.5;color:#8192a0;font-weight:500}
.invoice-builder-scroll{max-width:100%;overflow-x:auto;padding-bottom:5px}
.invoice-line-head,.invoice-line-grid{display:grid;grid-template-columns:repeat(var(--invoice-column-count,6),minmax(105px,1fr)) minmax(130px,1fr) 32px;gap:7px;align-items:center;min-width:calc(var(--invoice-column-count,6)*112px + 180px)}
.invoice-line-head{padding:0 2px 7px;color:#7e8f9d;font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.invoice-line-head span{overflow-wrap:anywhere}
.invoice-line-grid{margin-bottom:8px}
.invoice-line-grid input{width:100%;min-width:0;padding:9px 8px;border:1px solid #dfe7ed;border-radius:8px;background:white;font-size:10px;color:#20394c}
.invoice-line-grid input:focus,.invoice-column-config input:focus,.invoice-column-add input:focus{outline:2px solid rgba(20,163,154,.2);border-color:#55bcb1}
.invoice-line-grid .remove-invoice-line{width:30px;min-width:30px;height:30px}
.invoice-document{width:100%;max-width:800px;margin:0 auto;padding:22px 24px;background:#fff;color:#111;border:1px solid #e5e5e5;border-radius:4px;font-family:Arial,Helvetica,sans-serif}
.invoice-document-top{display:grid;grid-template-columns:105px minmax(0,1fr) auto;gap:15px;align-items:start;padding-bottom:13px;border-bottom:1px solid #333}
.invoice-document-logo img{display:block;width:100px;height:100px;object-fit:contain}
.invoice-company-details h1{font-family:Arial,Helvetica,sans-serif;font-size:24px;font-weight:800;line-height:1.15;color:#111;margin:7px 0 12px;letter-spacing:0}
.invoice-company-details p{font-family:Arial,Helvetica,sans-serif;font-size:10px;line-height:1.55;color:#222;margin:0;overflow-wrap:anywhere}
.invoice-document-badge{display:grid;gap:8px;justify-items:center;border:1px solid #222;padding:5px 9px;min-width:95px;font-size:12px;color:#111}
.invoice-document-badge span{font-size:8px;overflow-wrap:anywhere;max-width:120px;text-align:center}
.invoice-document-recipient{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin:17px 0 52px;font-size:11px;color:#111;min-height:70px}
.invoice-document-recipient>div:first-child{max-width:60%}
.invoice-document-recipient span{display:block;margin-bottom:8px}
.invoice-document-recipient strong{display:block;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#111}
.invoice-document-recipient p{font-size:10px;margin:5px 0 0;line-height:1.4;overflow-wrap:anywhere}
.invoice-document-date{text-align:right;max-width:45%;font-size:10px}
.invoice-document-date span{margin-top:7px;font-size:9px;color:#444}
.invoice-document-table-wrap{width:100%;overflow:visible}
.invoice-document-table{width:100%;border-collapse:collapse;table-layout:fixed;white-space:normal;margin:0;font-family:Arial,Helvetica,sans-serif}
.invoice-document-table th,.invoice-document-table td{border:1px solid #333;padding:7px 4px;font-family:Arial,Helvetica,sans-serif;font-size:9px;line-height:1.25;text-align:center;vertical-align:middle;color:#111;overflow-wrap:anywhere;word-break:normal}
.invoice-document-table th{background:#fff;font-weight:700}
.invoice-document-table .invoice-no{width:30px}
.invoice-document-table .invoice-table-total-head{width:105px}
.invoice-document-table td.invoice-cell-total{text-align:right;white-space:normal;font-size:9px}
.invoice-document-table .invoice-empty-row td{height:27px;padding:4px}
.invoice-document-table .invoice-grand-total td{height:31px;font-weight:700}
.invoice-document-table .invoice-grand-label{text-align:right;padding-right:12px}
.invoice-document-table .invoice-grand-amount{text-align:right;white-space:nowrap}
.invoice-document-note{font-family:Arial,Helvetica,sans-serif;font-size:10px;line-height:1.5;color:#111;margin:18px 0 8px;overflow-wrap:anywhere}
.invoice-document-note strong{font-family:Arial,Helvetica,sans-serif;color:#111}
.invoice-print-summary{width:min(280px,100%);margin:14px 0 0 auto;display:grid;gap:5px;font-size:9px;color:#222}
.invoice-print-summary>div{display:flex;justify-content:space-between;gap:12px}
.invoice-print-summary strong{font-family:Arial,Helvetica,sans-serif;color:#111}
.invoice-print-balance{border-top:1px solid #bbb;padding-top:5px;font-weight:700}
.invoice-document-bottom{display:grid;grid-template-columns:minmax(190px,1fr) minmax(100px,.8fr) minmax(160px,1fr);gap:15px;align-items:end;margin-top:42px;color:#111}
.invoice-bank-panel{border-top:1px solid #aaa;border-bottom:1px solid #aaa;padding:8px 10px;max-width:280px;font-size:8px;line-height:1.4}
.invoice-bank-panel h3{font-family:Arial,Helvetica,sans-serif;text-align:center;background:#2b6da7;color:#fff;border-radius:12px;font-size:10px;letter-spacing:.3px;padding:5px 8px;margin:0 auto 9px;max-width:165px}
.invoice-bank-account{display:grid;gap:1px;margin:6px 0}
.invoice-bank-account strong{font-family:Arial,Helvetica,sans-serif;font-size:8px;color:#111}
.invoice-bank-account span{overflow-wrap:anywhere}
.invoice-thanks{align-self:end;text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:18px;line-height:1.3;color:#222;padding-bottom:18px}
.invoice-signature{display:flex;flex-direction:column;align-items:center;text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:9px;line-height:1.5;min-width:0}
.invoice-signature>strong{font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#111}
.invoice-signature-art{position:relative;width:118px;height:72px;margin:3px auto 2px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.invoice-signature-art .invoice-signature-space{height:45px;width:80%;border-bottom:1px solid #aaa;margin-bottom:3px}
.invoice-stamp{position:absolute;z-index:1;left:19px;top:-2px;width:80px;height:80px;object-fit:contain;opacity:.88}
.invoice-signature-image{position:absolute;z-index:2;left:3px;top:7px;width:112px;height:58px;object-fit:contain;mix-blend-mode:multiply}
.invoice-signature-art:not(.has-stamp){height:58px;width:150px}
.invoice-signature-art:not(.has-stamp) .invoice-signature-space{height:44px;width:85%}
@media(max-width:700px){.invoice-column-add{align-items:stretch;flex-direction:column}.invoice-column-add .btn{align-self:flex-start}.invoice-document{padding:12px}.invoice-document-top{grid-template-columns:55px minmax(0,1fr) auto;gap:7px}.invoice-document-logo img{width:54px;height:54px}.invoice-company-details h1{font-size:13px;margin:3px 0 5px}.invoice-company-details p{font-size:7px}.invoice-document-badge{min-width:54px;padding:4px;font-size:9px}.invoice-document-badge span{font-size:6px}.invoice-document-recipient{margin:13px 0 25px;gap:8px;min-height:48px}.invoice-document-recipient strong{font-size:9px}.invoice-document-recipient p,.invoice-document-recipient span,.invoice-document-date{font-size:8px}.invoice-document-table th,.invoice-document-table td{padding:4px 2px;font-size:7px}.invoice-document-table .invoice-table-total-head{width:65px}.invoice-document-table .invoice-no{width:20px}.invoice-document-table .invoice-empty-row td{height:19px}.invoice-document-bottom{grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.invoice-bank-panel{max-width:none;padding:6px;font-size:7px}.invoice-thanks{grid-column:1/-1;grid-row:2;font-size:14px;padding:0}.invoice-signature{font-size:8px}.invoice-signature>strong{font-size:8px}.invoice-signature-space{height:30px}.invoice-signature-art{transform:scale(.82);transform-origin:center bottom;margin:0 auto -4px}.invoice-stamp{width:72px;height:72px;left:23px}.invoice-signature-image{width:100px;height:52px;left:8px;top:8px}}
@media print{
  @page{size:A4 portrait;margin:8mm}
  body *{visibility:hidden!important}
  #modalRoot,#modalRoot *{visibility:hidden!important}
  .invoice-paper,.invoice-paper *{visibility:visible!important}
  #modalRoot .invoice-paper,#modalRoot .invoice-paper *{visibility:visible!important}
  .modal-head,.modal-footer{display:none!important}
  .invoice-paper.invoice-document{position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;color:#111!important;overflow:visible!important}
  .modal-backdrop,.modal-card,.modal-head,.modal-footer,.no-print{background:#fff!important;box-shadow:none!important}
  .modal-backdrop{position:static!important;padding:0!important;display:block!important;background:#fff!important}
  .modal-card{display:block!important;width:100%!important;max-width:none!important;max-height:none!important;overflow:visible!important;border:0!important;border-radius:0!important}
  .modal-body{overflow:visible!important;padding:0!important}
  .invoice-document-recipient{margin-bottom:35px}
  .invoice-document-table th,.invoice-document-table td{font-size:8px;padding:6px 3px}
  .invoice-document-table .invoice-empty-row td{height:24px}
  .invoice-document-bottom{break-inside:avoid;margin-top:30px}
  .invoice-document-note,.invoice-print-summary{break-inside:avoid}
}


/* =========================================================
   WR OPERATIONS — aurora driving intro
   Lightweight CSS/SVG animation; no video or JS dependency.
   ========================================================= */
.intro-animation{position:fixed;inset:0;z-index:10000;overflow:hidden;isolation:isolate;color:#effffc;background:radial-gradient(ellipse at 78% 78%,rgba(16,133,140,.22),transparent 34%),radial-gradient(ellipse at 24% 100%,rgba(21,85,130,.22),transparent 42%),linear-gradient(125deg,#061522 0%,#0a2030 43%,#0a2d3b 72%,#071522 100%);opacity:1;visibility:visible;animation:introFadeOut .7s ease 3.72s forwards}
.intro-animation::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.2;background-image:linear-gradient(rgba(142,255,238,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(142,255,238,.05) 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(to bottom,transparent,black 25%,black 85%,transparent)}
.intro-animation::after{content:"";position:absolute;left:-15%;right:-15%;bottom:-35%;height:65%;border-radius:50%;background:radial-gradient(ellipse,rgba(28,213,190,.12),transparent 68%);filter:blur(24px);pointer-events:none}
.intro-stars{position:absolute;inset:0;opacity:.6;background-image:radial-gradient(circle at 8% 23%,#c3fff6 0 1px,transparent 1.7px),radial-gradient(circle at 17% 68%,#8bdfff 0 1px,transparent 1.7px),radial-gradient(circle at 38% 17%,#c3fff6 0 1px,transparent 1.7px),radial-gradient(circle at 56% 28%,#8bdfff 0 1px,transparent 1.7px),radial-gradient(circle at 74% 15%,#c3fff6 0 1px,transparent 1.7px),radial-gradient(circle at 89% 41%,#8bdfff 0 1px,transparent 1.7px),radial-gradient(circle at 93% 77%,#c3fff6 0 1px,transparent 1.7px);animation:introStars 3s ease-in-out infinite alternate}
.intro-orb{position:absolute;border:1px solid rgba(108,242,224,.13);border-radius:50%;pointer-events:none;animation:introOrbFloat 8s ease-in-out infinite alternate}
.intro-orb-one{width:min(64vw,720px);aspect-ratio:1;right:-18%;top:-40%;box-shadow:inset 0 0 70px rgba(37,201,190,.04),0 0 70px rgba(37,201,190,.04)}
.intro-orb-two{width:min(42vw,470px);aspect-ratio:1;right:-6%;top:-23%;border-color:rgba(110,164,255,.16);animation-delay:-3s}
.intro-brand{position:absolute;top:clamp(22px,5vh,52px);left:clamp(22px,5vw,76px);display:flex;align-items:center;gap:14px;z-index:2;animation:introBrandIn .7s ease both}
.intro-logo{width:54px;height:54px;object-fit:contain;background:#f8fffd;border-radius:50%;padding:4px;box-shadow:0 0 24px rgba(84,247,221,.2);border:1px solid rgba(184,255,247,.6)}
.intro-brand-copy{display:flex;flex-direction:column;gap:5px}
.intro-brand-copy strong{font-family:Manrope,"DM Sans",sans-serif;font-size:15px;letter-spacing:1.4px;color:#f1fffd}
.intro-brand-copy strong span{color:#50e4ca}
.intro-brand-copy small{font-size:9px;letter-spacing:2px;color:#8aaebc;font-weight:700}
.intro-message{position:absolute;z-index:2;left:clamp(24px,9vw,138px);top:clamp(132px,23vh,230px);animation:introMessageIn .8s cubic-bezier(.2,.8,.2,1) .15s both}
.intro-kicker{display:flex;align-items:center;gap:10px;color:#7ce7d6;font-size:10px;font-weight:800;letter-spacing:2.5px}
.intro-kicker i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#52e6bd;box-shadow:0 0 0 5px rgba(82,230,189,.1),0 0 16px rgba(82,230,189,.7)}
.intro-message h1{margin:20px 0 12px;font-family:Manrope,"DM Sans",sans-serif;font-size:clamp(34px,5.5vw,76px);line-height:1.04;letter-spacing:-.055em;font-weight:800;color:#f4fffe;text-shadow:0 5px 30px rgba(0,0,0,.12)}
.intro-message h1 em{font-style:normal;color:#8be8d8;text-shadow:0 0 30px rgba(71,241,209,.17)}
.intro-message p{margin:0;color:#9bb9c6;font-size:clamp(12px,1.3vw,16px);letter-spacing:.1px}
.intro-scene{position:absolute;z-index:1;left:0;right:0;bottom:clamp(72px,13vh,140px);height:clamp(150px,24vw,270px);pointer-events:none}
.intro-aurora{position:absolute;left:0;bottom:-4%;width:100%;height:100%;overflow:visible;transform:scaleX(0);transform-origin:left center;opacity:0;animation:auroraReveal 3.65s cubic-bezier(.2,.65,.3,1) .08s forwards}
.aurora-line{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.aurora-glow{stroke-width:16;filter:url(#auroraGlow);opacity:.68}
.aurora-glow-two{stroke-width:10;opacity:.48}
.aurora-core{stroke-width:2.5;opacity:.85}
.aurora-thread{stroke-width:1.5;opacity:.65;stroke-dasharray:10 15;animation:auroraDash 2s linear infinite}
.intro-sparkles{opacity:.85;animation:sparklePulse .8s ease-in-out infinite alternate}
.intro-car{position:absolute;left:0;bottom:2%;width:clamp(230px,31vw,420px);filter:drop-shadow(0 0 24px rgba(56,244,218,.23));transform:translateX(-130%);animation:carDriveAcross 3.65s cubic-bezier(.45,.02,.38,1) forwards}
.intro-car-svg{display:block;width:100%;height:auto;overflow:visible}
.intro-wheel{transform-box:fill-box;transform-origin:center;animation:wheelSpin .55s linear infinite}
.intro-bottom{position:absolute;z-index:2;left:clamp(22px,5vw,76px);right:clamp(22px,5vw,76px);bottom:clamp(18px,4vh,36px);display:flex;align-items:center;justify-content:space-between;color:#7799a9;font-size:9px;font-weight:800;letter-spacing:2px}
.intro-bottom>span{display:flex;align-items:center;gap:10px}
.intro-bottom>span b{width:6px;height:6px;border-radius:50%;background:#4ee5bd;box-shadow:0 0 12px #4ee5bd}
.intro-bottom button{border:1px solid rgba(166,225,225,.18);background:rgba(12,44,58,.55);color:#a6c7d0;padding:9px 13px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.3px;transition:background .2s ease,color .2s ease,border-color .2s ease}
.intro-bottom button:hover{background:rgba(35,135,137,.28);border-color:rgba(117,242,221,.5);color:#f2fffd}
.intro-bottom button span{margin-left:8px;color:#69ead5}
.intro-animation.is-skipped{animation:introFadeOut .35s ease forwards}
@keyframes introFadeOut{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes introBrandIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes introMessageIn{from{opacity:0;transform:translateY(22px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes introOrbFloat{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(-16px,18px,0) rotate(5deg)}}
@keyframes introStars{from{opacity:.3;transform:translateY(0)}to{opacity:.75;transform:translateY(-5px)}}
@keyframes auroraReveal{0%{transform:scaleX(0);opacity:0}14%{opacity:.4}35%{opacity:.82}100%{transform:scaleX(1);opacity:.74}}
@keyframes auroraDash{to{stroke-dashoffset:-100}}
@keyframes sparklePulse{from{opacity:.35}to{opacity:1}}
@keyframes wheelSpin{to{transform:rotate(360deg)}}
@keyframes carDriveAcross{0%{transform:translateX(-130%)}8%{transform:translateX(-95%)}100%{transform:translateX(calc(100vw + 10%))}}
@media(max-width:700px){
 .intro-brand{top:24px;left:22px;gap:10px}.intro-logo{width:43px;height:43px}.intro-brand-copy strong{font-size:12px;letter-spacing:1px}.intro-brand-copy small{font-size:7px;letter-spacing:1.1px}
 .intro-message{left:24px;right:18px;top:clamp(125px,22vh,195px)}.intro-message h1{font-size:clamp(35px,10vw,54px);margin-top:16px}.intro-message p{max-width:260px;line-height:1.6}
 .intro-scene{bottom:clamp(84px,14vh,130px);height:190px}.intro-car{width:270px;bottom:0}.intro-bottom{left:22px;right:22px;bottom:20px;letter-spacing:1px;font-size:7px}.intro-bottom button{padding:8px 10px;font-size:9px}
 .intro-orb-one{width:95vw;right:-44%;top:-15%}.intro-orb-two{width:70vw;right:-28%;top:0}
}
@media(prefers-reduced-motion:reduce){.intro-animation{display:none!important;animation:none!important}.intro-animation *{animation:none!important;transition:none!important}}

/* =========================================================
   WR OPERATIONS — LOGIN REVISION V2
   - show default credential helper
   - animated login transition after intro
   - Innova Reborn intro scene tuning
   ========================================================= */
body.intro-finished .login-screen{animation:loginReveal .8s cubic-bezier(.2,.8,.2,1) both}
body.intro-finished .login-panel{animation:loginPanelUp .7s cubic-bezier(.2,.8,.2,1) both}
body.intro-finished .login-art-copy,
body.intro-finished .login-brand,
body.intro-finished .login-welcome,
body.intro-finished .login-credentials,
body.intro-finished .login-form,
body.intro-finished .login-foot{animation:loginFadeItem .75s ease both}
body.intro-finished .login-brand{animation-delay:.02s}
body.intro-finished .login-welcome{animation-delay:.09s}
body.intro-finished .login-credentials{animation-delay:.15s}
body.intro-finished .login-form{animation-delay:.21s}
body.intro-finished .login-foot{animation-delay:.27s}

.login-panel{position:relative}
.login-panel::before{content:"";position:absolute;inset:auto 8% 4% auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(25,197,177,.12),transparent 70%);filter:blur(8px);pointer-events:none}
.login-brand{margin-bottom:38px}
.login-brand img{box-shadow:0 10px 35px rgba(6,34,45,.09)}
.login-welcome p{margin-bottom:20px}
.login-credentials{display:flex;align-items:stretch;gap:14px;margin:0 0 22px;animation:none}
.credential-card{flex:1 1 auto;padding:14px 16px;border:1px solid #d9e6ea;border-radius:16px;background:linear-gradient(135deg,#f7fbfd,#ffffff 55%);box-shadow:0 10px 28px rgba(13,35,49,.05)}
.credential-card small{display:block;font-size:10px;font-weight:800;letter-spacing:1.4px;color:#7d93a2;margin-bottom:9px}
.credential-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-size:12px;color:#597185}
.credential-row + .credential-row{border-top:1px dashed #d7e3e7}
.credential-row strong{font-size:15px;color:#133249;letter-spacing:.2px}
.credential-fill{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;padding:0 18px;border-radius:16px;border:1px solid rgba(17,153,145,.12);background:linear-gradient(135deg,#0a8c8c,#0b6e7b);color:#fff;font-size:12px;font-weight:800;box-shadow:0 12px 28px rgba(11,110,123,.18);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.credential-fill:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(11,110,123,.24);filter:saturate(1.04)}
.credential-fill span{color:#a8fff0;font-size:15px}
.login-form{gap:18px}
.login-form label,.field{position:relative}
.login-form input{height:52px;background:linear-gradient(180deg,#ffffff,#fbfdfe)}
.login-submit{position:relative;overflow:hidden}
.login-submit::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 40%,rgba(255,255,255,.18) 52%,rgba(255,255,255,.03) 60%,rgba(255,255,255,.05));transform:translateX(-120%);animation:btnSheen 2.9s ease-in-out infinite}
.form-error:not(:empty){box-shadow:0 8px 24px rgba(191,76,76,.08)}
.password-wrap{overflow:hidden;border-radius:12px}
.password-wrap .password-toggle:hover{color:#1f4e63}
.login-art{animation:loginArtGlow 10s ease-in-out infinite alternate}
.login-art-copy{transform-origin:left center}
.login-metrics>div{transition:transform .25s ease,border-color .25s ease,background .25s ease}
.login-metrics>div:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07)}

.intro-car{width:clamp(290px,34vw,470px);bottom:0}
.intro-car-svg{overflow:visible}
.intro-message p{max-width:420px}

@keyframes loginReveal{from{opacity:.3;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@keyframes loginPanelUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes loginFadeItem{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes btnSheen{0%,20%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
@keyframes loginArtGlow{from{filter:saturate(1) brightness(1)}to{filter:saturate(1.08) brightness(1.04)}}

@media(max-width:900px){
  .login-credentials{flex-direction:column}
  .credential-fill{justify-content:center;min-height:52px}
}
@media(max-width:700px){
  .login-panel{padding:34px 22px}
  .login-brand{margin-bottom:28px}
  .credential-card{padding:13px 14px}
  .credential-row strong{font-size:14px}
  .credential-fill{padding:14px 16px}
  .intro-car{width:320px}
}