:root{--ink:#172033;--muted:#667085;--line:#e7edf5;--soft:#f4f7fb;--blue:#2146ff;--cyan:#00b8d9;--green:#0f9f7a;--gold:#f5a524;--red:#ef4444;--navy:#0b1225;--card:#ffffff;--shadow:0 24px 70px rgba(16,24,40,.12);--radius:30px}
*{box-sizing:border-box}body{margin:0;font-family:'Montserrat',Arial,sans-serif;background:radial-gradient(circle at top left,#e7f0ff 0,#f6f8fc 36%,#eef2f7 100%);color:var(--ink)}a{text-decoration:none;color:inherit}button,input,select,textarea{font-family:inherit}.hidden{display:none!important}.muted{color:var(--muted);font-size:13px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:#667085;font-weight:900;margin:0 0 7px}
.login-page{min-height:100vh;display:grid;place-items:center;padding:30px}.login-shell{width:min(1180px,100%);display:grid;grid-template-columns:1.14fr .86fr;gap:24px}.login-hero{border-radius:42px;padding:46px;background:linear-gradient(145deg,#071126,#10245a 56%,#0d86a0);color:white;box-shadow:var(--shadow);position:relative;overflow:hidden}.login-hero:before{content:"";position:absolute;right:-80px;top:-90px;width:330px;height:330px;border-radius:50%;background:linear-gradient(135deg,rgba(33,70,255,.7),rgba(0,184,217,.45));filter:blur(12px)}.login-hero:after{content:"";position:absolute;left:-120px;bottom:-140px;width:340px;height:340px;border-radius:50%;background:rgba(15,159,122,.22);filter:blur(8px)}.login-hero>*{position:relative;z-index:1}.badge{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);padding:11px 15px;border-radius:999px;font-weight:900}.login-hero h1{font-size:50px;line-height:1.02;margin:86px 0 18px;letter-spacing:-.05em}.login-hero p{max-width:730px;line-height:1.8;color:#dfeaff}.hero-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:46px}.hero-cards div{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(18px);border-radius:24px;padding:20px}.hero-cards b{display:block;font-size:32px}.login-card{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.9);border-radius:42px;padding:36px;box-shadow:var(--shadow)}.login-card h2{margin:0 0 8px;font-size:30px;letter-spacing:-.03em}.field{display:grid;gap:8px;margin:18px 0}.field label{font-size:13px;font-weight:900;color:#344054}.field input,.field select,.field textarea{width:100%;border:1px solid #d9e1ea;border-radius:17px;padding:14px 16px;background:white;outline:none}.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.role-option{border:1px solid #e3eaf3;border-radius:22px;padding:16px;background:linear-gradient(180deg,#fff,#f8fbff);cursor:pointer;transition:.18s}.role-option:hover{border-color:#b7c7ff;box-shadow:0 16px 35px rgba(33,70,255,.12);transform:translateY(-2px)}
.app{min-height:100vh;display:grid;grid-template-columns:330px 1fr}.sidebar{color:white;padding:22px;position:sticky;top:0;height:100vh;background:linear-gradient(160deg,#071126 0%,#0c1b3c 52%,#082f49 100%);overflow-y:auto;overflow-x:hidden;box-shadow:18px 0 60px rgba(10,18,37,.25);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}.sidebar:before{content:"";position:absolute;inset:-90px -100px auto auto;width:260px;height:260px;background:linear-gradient(135deg,rgba(33,70,255,.7),rgba(0,184,217,.5));filter:blur(18px);border-radius:50%}.sidebar:after{content:"";position:absolute;left:-110px;bottom:-130px;width:310px;height:310px;background:rgba(15,159,122,.22);filter:blur(10px);border-radius:50%}.sidebar>*{position:relative;z-index:1}.brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}.logo{width:56px;height:56px;border-radius:20px;background:linear-gradient(135deg,#ffffff,#a8d8ff);color:#0b1b39;display:grid;place-items:center;font-weight:900;box-shadow:0 15px 38px rgba(0,184,217,.24)}.brand b{display:block;font-size:16px}.brand span{display:block;color:#bfd4f4;font-size:12px;margin-top:3px}.role-card,.side-card{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.09);backdrop-filter:blur(22px);border-radius:30px;padding:18px;margin-bottom:15px}.role-card h2{margin:0 0 8px;font-size:22px;letter-spacing:-.03em}.role-card small,.side-card small{color:#bdd1f2;line-height:1.6}.rail-eye{color:#9ee7dc!important}.side-progress{height:9px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;margin:16px 0}.side-progress i{display:block;height:100%;width:72%;background:linear-gradient(90deg,#38d9a9,#68e1fd);border-radius:999px}.side-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.side-metrics div{background:rgba(255,255,255,.1);border-radius:18px;padding:13px}.side-metrics b{display:block;font-size:24px}.side-card h4{margin:0 0 14px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#b9c8e9}.nav{display:grid;gap:8px;padding:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.07);backdrop-filter:blur(18px);border-radius:28px;margin-bottom:15px}.nav a{color:#c7d7f3;padding:13px 14px;border-radius:18px;font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:10px}.nav a span{width:22px;height:22px;border-radius:8px;background:rgba(255,255,255,.10);display:grid;place-items:center;font-size:11px}.nav a.active,.nav a:hover{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.07));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.13)}.nav a.active span{background:#38d9a9;color:#05251e}.case-mini{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.13);border-radius:22px;padding:15px;margin-top:10px}.case-mini b{display:block;font-size:13px}.case-mini em{display:inline-block;margin-top:9px;font-size:10px;color:#8a5700;background:#fff2cc;border-radius:999px;padding:7px 10px;font-style:normal;font-weight:900}.case-mini em.redtag{color:#be123c;background:#ffe4e8}.rail-flow{display:grid;gap:8px}.rail-flow span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px;color:#dcecff;font-weight:800;font-size:12px}
.main{padding:30px 38px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.topbar h1{font-size:34px;letter-spacing:-.04em;margin:0}.top-actions{display:flex;gap:12px}.primary,.ghost{border:0;border-radius:16px;padding:14px 19px;font-weight:900;cursor:pointer}.primary{background:linear-gradient(135deg,#2146ff,#00a5c8);color:white;box-shadow:0 16px 35px rgba(33,70,255,.22)}.ghost{background:rgba(255,255,255,.84);color:#182333;box-shadow:0 10px 34px rgba(16,24,40,.1);border:1px solid rgba(255,255,255,.85)}.grid{display:grid;gap:18px}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}.panel{background:rgba(255,255,255,.90);border:1px solid rgba(255,255,255,.92);border-radius:34px;padding:24px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.panel h2{margin:0 0 16px;font-size:22px;letter-spacing:-.03em}.metric{min-height:158px;position:relative;overflow:hidden}.metric:after{content:"";position:absolute;right:-25px;top:-25px;width:115px;height:115px;border-radius:50%;background:linear-gradient(135deg,rgba(33,70,255,.10),rgba(0,184,217,.13))}.metric strong{font-size:44px;display:block;margin:8px 0 14px;letter-spacing:-.05em}.metric span{color:#667085;font-weight:800}.status{display:inline-flex;border-radius:999px;padding:9px 12px;font-size:12px;font-weight:900;font-style:normal}.ok{background:#daf8ea;color:#087854}.warn{background:#fff3d6;color:#9a5a00}.bad{background:#ffe4e8;color:#be123c}.info{background:#e8f2ff;color:#175cd3}.workflow{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.step{border:1px solid #e6edf6;background:linear-gradient(180deg,#fff,#f8fbff);border-radius:22px;padding:16px;position:relative;overflow:hidden}.step b{display:block;font-size:12px}.step small{color:#667085;line-height:1.6}.step.done{background:#e7fbf2;border-color:#bfeeda}.step.active{background:linear-gradient(135deg,#2146ff,#00a5c8);color:white;box-shadow:0 12px 28px rgba(33,70,255,.18)}.step.active small{color:#e6f9ff}.table{width:100%;border-collapse:separate;border-spacing:0 10px}.table th{text-align:left;color:#667085;font-size:12px;text-transform:uppercase;padding:0 14px}.table td{background:white;padding:16px 14px;border-top:1px solid #edf2f8;border-bottom:1px solid #edf2f8}.table td:first-child{border-left:1px solid #edf2f8;border-radius:18px 0 0 18px}.table td:last-child{border-right:1px solid #edf2f8;border-radius:0 18px 18px 0}.tabs{display:flex;gap:7px;border-bottom:1px solid #e8eef6;margin:18px 0}.tabs button{border:0;background:transparent;padding:14px 15px;font-weight:900;color:#667085;cursor:pointer;border-radius:0}.tabs button.active{color:#2146ff;border-bottom:3px solid #2146ff}.tab{display:none}.tab.active{display:block}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.tl{display:grid;grid-template-columns:160px 1fr;gap:14px;margin-bottom:12px}.tl div,.tl b{background:#f8fbff;border:1px solid #e8eef6;border-radius:18px;padding:14px}.doc,.notice{background:#f8fbff;border:1px solid #e8eef6;border-radius:20px;padding:16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;font-weight:800}.notice{justify-content:flex-start;gap:12px}.dot{width:12px;height:12px;border-radius:50%;background:#f5a524;flex:0 0 auto}.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.lane{background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.8);border-radius:28px;padding:16px;min-height:320px}.lane h3{font-size:15px;margin:0 0 12px}.kcard{background:white;border:1px solid #edf2f8;border-radius:20px;padding:15px;margin-bottom:10px;box-shadow:0 10px 22px rgba(16,24,40,.06)}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.day{min-height:92px;background:white;border:1px solid #edf2f8;border-radius:18px;padding:10px}.event{margin-top:8px;background:#e8f2ff;color:#175cd3;border-radius:10px;padding:6px;font-size:11px;font-weight:900}
@media(max-width:1100px){.login-shell,.app{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.main{padding:18px}.cols-4,.cols-3,.cols-2,.kanban,.workflow,.form-grid{grid-template-columns:1fr}.topbar{display:grid;gap:15px}.login-hero h1{font-size:36px}.hero-cards,.role-grid{grid-template-columns:1fr}}

.sidebar::-webkit-scrollbar{width:7px}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.30);border-radius:999px}.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.48)}
.nav a{position:relative;z-index:3}.side-card,.role-card,.brand{position:relative;z-index:2}
.sidebar .nav{max-height:none}.sidebar{overscroll-behavior:contain}
@media(max-height:820px){.role-card{padding:15px}.side-card{padding:15px}.nav a{padding:11px 13px}.brand{margin-bottom:14px}.role-card,.side-card,.nav{margin-bottom:12px}}
.perm-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}.perm-list li{padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.11);font-size:12px}.denied{max-width:760px;margin:40px auto;border:1px solid rgba(239,68,68,.25)!important;background:linear-gradient(135deg,#fff,#fff5f5)!important}.ghost:disabled{opacity:.45;cursor:not-allowed}