:root{--navy:#071d3a;--blue:#1769e0;--sky:#edf5ff;--orange:#f59e0b;--text:#142033;--muted:#6c7890;--line:#e6ebf2}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#f5f7fb;color:var(--text)}aside{position:fixed;inset:0 auto 0 0;width:255px;background:linear-gradient(180deg,#071d3a,#0b2d58);padding:28px 18px;color:white;display:flex;flex-direction:column}.logo{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;font-size:20px;font-weight:800}.logo>b,.brand-mark{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;background:linear-gradient(135deg,var(--blue),#55b4ff);box-shadow:0 8px 25px #006cff55}.logo small,.user-chip small{display:block;font-size:11px;font-weight:500;opacity:.65;margin-top:3px}nav{margin-top:42px}nav a,.logout{display:block;color:#cbd9eb;padding:12px 14px;text-decoration:none;border-radius:10px;margin:5px 0}nav a:hover{background:#ffffff12;color:white}.nav-label{font-size:10px;letter-spacing:1.5px;color:#708aac;margin:28px 14px 10px}.logout{margin-top:auto}.app{margin-left:255px}header{height:88px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px}header h2{margin:0;font-size:20px}header p{margin:5px 0 0;color:var(--muted);font-size:12px}.user-chip{display:flex;gap:10px;align-items:center}.user-chip>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--sky);color:var(--blue);font-weight:800}.user-chip small{color:var(--muted)}main{padding:30px;max-width:1450px;margin:auto}.hero{background:linear-gradient(120deg,#0a2b55,#1769e0);color:#fff;border-radius:22px;padding:35px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 18px 45px #143d7830}.hero h1{font-size:29px;margin:10px 0}.hero p{color:#d9e7fa;margin:0}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#6db4ff}.stat{background:#ffffff18;padding:18px 28px;border-radius:17px;text-align:center}.stat b{font-size:30px;display:block}.stat span{font-size:12px}.toolbar{margin:25px 0}.toolbar input{width:min(500px,100%)}input,select,textarea{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:white;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1769e015}button,.doc-card>a,.btn-small{border:0;border-radius:10px;background:var(--blue);color:#fff;padding:12px 17px;font-weight:700;text-decoration:none;cursor:pointer}.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}.doc-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:20px;display:flex;flex-wrap:wrap;gap:15px;box-shadow:0 5px 20px #23395d0a}.folder-icon{width:46px;height:46px;border-radius:13px;background:#fff3d7;color:var(--orange);display:grid;place-items:center;font-size:23px}.doc-body{flex:1}.doc-card h3{margin:9px 0 7px}.doc-card p,.muted{color:var(--muted);font-size:13px;line-height:1.5}.doc-card small{color:#929bad}.doc-card>a{width:100%;text-align:center;background:#eef5ff;color:var(--blue)}.tag{background:#e9f2ff;color:var(--blue);font-size:10px;padding:5px 8px;border-radius:20px;text-transform:uppercase;font-weight:800}.panel{background:white;padding:24px;border-radius:17px;border:1px solid var(--line);margin-bottom:22px}.panel h3{margin-top:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.span-2{grid-column:span 2}.check{align-self:center}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px;border-bottom:1px solid var(--line);font-size:13px}th{color:var(--muted);font-size:11px;text-transform:uppercase}td small{display:block;color:var(--muted);margin-top:4px}.btn-small{padding:7px 9px;font-size:11px}.danger{color:#d33;text-decoration:none;font-size:11px;font-weight:700}.narrow{max-width:700px}.user-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.user-list label{display:flex;gap:10px;padding:12px;border:1px solid var(--line);border-radius:11px}.user-list small{display:block;color:var(--muted)}.empty{text-align:center;background:#fff;padding:50px;border-radius:17px;grid-column:1/-1}.alert{background:#fff0f0;color:#a52a2a;padding:12px;border-radius:10px;margin-bottom:15px}.login-body{min-height:100vh;background:radial-gradient(circle at 20% 20%,#1d5aa6,#071d3a 55%);display:grid;place-items:center;padding:25px}.login-shell{width:min(920px,100%);display:grid;grid-template-columns:1.2fr 1fr;background:white;border-radius:25px;overflow:hidden;box-shadow:0 30px 80px #00142f77}.brand-panel{padding:60px;background:linear-gradient(150deg,#0a3265,#1769e0);color:white;display:flex;flex-direction:column;justify-content:center}.brand-panel h1{font-size:38px;margin:20px 0 10px}.brand-panel p{color:#d7e6fb;line-height:1.7}.brand-mark{color:white;font-size:18px;font-weight:900}.security-note{margin-top:40px;background:#ffffff12;padding:15px;border-radius:12px;font-size:12px}.login-card{padding:55px;display:flex;flex-direction:column}.login-card h2{font-size:28px;margin:10px 0 0}.login-card label{font-size:12px;font-weight:700;margin:14px 0 7px;display:block}.login-card input{width:100%}.login-card button{width:100%;margin-top:20px}.login-card small{text-align:center;margin-top:25px;color:var(--muted)}.mobile-menu{display:none}@media(max-width:800px){aside{transform:translateX(-100%);z-index:5;transition:.2s}.menu-open aside{transform:none}.app{margin-left:0}.mobile-menu{display:block;padding:8px;margin-right:12px}header{padding:0 16px;justify-content:flex-start}.user-chip{margin-left:auto}.hero{padding:24px}.stat{display:none}main{padding:18px}.form-grid,.user-list,.login-shell{grid-template-columns:1fr}.span-2{grid-column:auto}.brand-panel{display:none}.login-card{padding:35px 25px}}

/* eArsip V10.9.2 Professional UI */
.login-body{position:relative;isolation:isolate;background:#061a33 url('images/natuna-bg.jpg') center/cover fixed no-repeat;overflow-x:hidden}
.login-body:before{content:"";position:fixed;inset:0;background:linear-gradient(115deg,rgba(3,23,50,.88),rgba(7,56,112,.66) 48%,rgba(3,22,45,.82));z-index:-1}
.login-shell{width:min(900px,92vw);min-height:540px;max-height:calc(100vh - 50px);border-radius:28px;backdrop-filter:blur(8px);box-shadow:0 35px 100px rgba(0,10,30,.55);border:1px solid rgba(255,255,255,.18)}
.brand-panel{position:relative;overflow:hidden;padding:38px 40px;background:linear-gradient(145deg,rgba(6,35,72,.94),rgba(17,102,224,.88));}
.brand-panel:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-110px;bottom:-120px;background:rgba(255,255,255,.08);box-shadow:-130px -170px 0 30px rgba(255,255,255,.035)}
.login-logos{display:flex;align-items:center;gap:10px;position:relative;z-index:1}.login-logos img{height:50px;width:auto;max-width:155px;object-fit:contain;background:#fff;border-radius:12px;padding:5px;box-shadow:0 8px 25px rgba(0,0,0,.18)}
.brand-panel h1{position:relative;z-index:1;font-size:32px;line-height:1.08;letter-spacing:-1px;margin:24px 0 10px}.brand-panel p{position:relative;z-index:1;max-width:420px;font-size:13px;line-height:1.55}.security-note{position:relative;z-index:1;margin-top:30px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);padding:13px 16px;border-radius:14px}
.login-card{padding:36px 42px;background:rgba(255,255,255,.98);justify-content:center}.login-card h2{font-size:27px;letter-spacing:-.5px}.login-card .muted{margin-top:8px}.login-card form{margin-top:8px}.login-card input{height:44px}.security-code-box{display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding:10px 13px;border:1px dashed #9fc2ef;background:#f4f8ff;border-radius:13px}.security-code-box strong{display:block;font-size:18px;letter-spacing:6px;color:#1554a5;margin-top:4px}.security-code-box a{font-size:12px;font-weight:800;color:#1769e0;text-decoration:none}.login-card button{height:45px;border-radius:12px;box-shadow:0 9px 20px rgba(23,105,224,.22)}.login-wa{display:block;text-align:center;margin-top:12px;padding:12px;border-radius:12px;background:#16a34a;color:#fff;text-decoration:none;font-weight:800}.security-help{line-height:1.5}
.private-hero{position:relative;overflow:hidden;background:linear-gradient(105deg,rgba(5,34,70,.96),rgba(23,105,224,.92)),url('images/natuna-bg.jpg') center/cover;padding:30px 34px;box-shadow:0 16px 40px rgba(20,61,120,.16)}.private-hero:after{content:"";position:absolute;inset:auto -50px -90px auto;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08)}.private-hero>div,.private-hero>.privacy-badge{position:relative;z-index:1}.upload-choice{padding:5px;background:#eef4fb;border-radius:14px;width:max-content;box-shadow:inset 0 0 0 1px #dfe8f4}.upload-tab{transition:.18s ease}.upload-tab:hover{transform:translateY(-1px)}
.form-panel{box-shadow:0 8px 30px rgba(35,57,93,.06)}.form-panel h3{font-size:19px}.table-wrap{border-radius:14px}.table-wrap table{background:#fff}.table-wrap tbody tr:hover{background:#f7fbff}.doc-card{transition:transform .18s,box-shadow .18s}.doc-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(35,57,93,.10)}
@media(max-width:800px){.login-shell{min-height:auto;max-height:none;width:min(520px,94vw)}.login-card{padding:30px 24px}.brand-panel{display:flex;padding:38px 28px;min-height:310px}.brand-panel h1{font-size:31px}.login-logos img{height:48px;max-width:145px}.login-card{display:flex}.login-body{padding:15px}}