@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--navy:#0b1f3a;--blue:#1e5eff;--soft:#f5f7fb;--text:#172033;--muted:#6f7b91;--border:#e4e9f1;--green:#168b65;--red:#d94b5b;--shadow:0 14px 45px rgba(15,31,55,.08)}
body{font-family:'DM Sans',system-ui,sans-serif;background:var(--soft)}
h1,h2,h3,.brand span{font-family:'Manrope',system-ui,sans-serif}
.brand img{width:48px;height:48px;border-radius:13px;object-fit:contain;background:#fff;padding:4px}
.profile-top{height:78px;background:#fff;border-bottom:1px solid var(--border);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 max(24px,5vw)}
.profile-top>a{color:#506078;text-decoration:none;font-weight:600}
.profile-top>a:last-child{text-align:right}
.profile-shell,.settings-shell{max-width:1240px;margin:auto;padding:38px 24px}
.profile-hero{display:flex;align-items:center;gap:20px;background:linear-gradient(135deg,#0b1f3a,#173f77);color:#fff;border-radius:20px;padding:30px 34px;box-shadow:var(--shadow)}
.profile-hero h1{margin:7px 0 4px;font-size:32px}
.profile-hero p{margin:0;color:#bdc9db}
.big-avatar{width:78px;height:78px;border-radius:22px;background:linear-gradient(135deg,#3e79ff,#8caaff);display:grid;place-items:center;font-size:23px;font-weight:800}
.status{display:inline-block;padding:5px 9px;border-radius:99px;background:#ffffff1f;text-transform:capitalize;font-size:11px}
.status.active{background:#1cb785}
.hero-actions{margin-left:auto}
.profile-grid,.settings-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:20px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 5px 22px rgba(16,36,66,.04);overflow:hidden}
.card>header{padding:20px 23px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card>header h2{margin:0;font-size:16px}
.card>header p{margin:4px 0 0;color:var(--muted)}
.card>header a{color:var(--blue);text-decoration:none}
.span2{grid-column:span 2}
.pro-form{padding:22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid.four{grid-template-columns:repeat(4,1fr)}
.pro-form label{font-size:12px;font-weight:600;color:#566176}
.pro-form input,.pro-form select,.pro-form textarea,.stack input{width:100%;border:1px solid var(--border);border-radius:10px;background:#fbfcfe;padding:12px;color:var(--text);outline:none}
.pro-form input:focus,.pro-form select:focus,.pro-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #1e5eff14}
.wide{grid-column:1/-1}
.stack{padding:18px 22px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--border)}
.stack button,.mini-row a,.employee-grid article>a{border:0;background:#eef3ff;color:#194ebd;padding:10px;border-radius:9px;text-decoration:none;font-weight:700;text-align:center}
.facts{padding:15px 22px}
.facts span{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);color:var(--muted)}
.facts b{color:var(--text)}
.mini-row{display:flex;justify-content:space-between;align-items:center;padding:13px 20px;border-bottom:1px solid var(--border)}
.mini-row span{color:var(--muted)}
.settings-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}
.settings-heading h1{font-size:34px;margin:5px 0}
.settings-heading p{color:var(--muted)}
.settings-heading small{color:var(--blue);letter-spacing:.14em}
.logo-upload{display:flex!important;flex-direction:row!important;align-items:center;gap:16px;padding:16px;border:1px dashed #b9c5d8;border-radius:13px;background:#f8faff;cursor:pointer}
.logo-upload img,.logo-upload>b{width:65px;height:65px;border-radius:14px;object-fit:contain;background:white;display:grid;place-items:center}
.logo-upload span{display:flex;flex-direction:column}
.logo-upload small{font-weight:400;color:var(--muted)}
.logo-upload input{margin-left:auto;width:auto}
.cron{margin:0 22px 22px;padding:14px;background:#f7f9fc;border-radius:10px;display:flex;flex-direction:column;gap:8px}
.cron code{word-break:break-all;color:#345}
.letter-page{background:#e9edf3;padding:35px}
.letter{max-width:850px;min-height:1100px;margin:auto;background:#fff;padding:58px 65px;box-shadow:var(--shadow);font-size:15px;line-height:1.7}
.letter>header{display:flex;align-items:center;gap:18px;border-bottom:3px solid var(--navy);padding-bottom:22px;margin-bottom:40px}
.letter>header img,.letter-mark{width:70px;height:70px;object-fit:contain;border-radius:14px}
.letter-mark{background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;font-size:25px}
.letter header h2,.letter header p{margin:0}
.letter header button{margin-left:auto}
.letter h1{font-size:30px;margin:28px 0}
.terms{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:24px 0}
.terms span{padding:14px 17px;color:var(--muted);border-bottom:1px solid var(--border)}
.terms span:nth-child(odd){border-right:1px solid var(--border)}
.terms strong{display:block;color:var(--text)}
.signatures{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:75px}
.signatures div{border-top:1px solid #8993a3;padding-top:10px;display:flex;flex-direction:column}
.letter-note{font-size:11px;color:var(--muted);margin-top:45px}
.auth-pro{background:linear-gradient(120deg,#07172c 0 54%,#eef3fb 54%);min-height:100vh}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
.login-showcase{padding:8vw;color:#fff;display:flex;flex-direction:column;justify-content:center}
.login-showcase h1{font-size:clamp(42px,5vw,70px);line-height:1.05;margin:24px 0}
.login-showcase p{font-size:17px;color:#b9c7da;max-width:560px}
.login-features{display:flex;gap:22px;margin-top:35px}
.login-features span{padding:13px 16px;background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px}
.login-panel{display:grid;place-items:center;padding:30px}
.login-box{width:min(440px,100%);background:#fff;padding:42px;border-radius:22px;box-shadow:var(--shadow)}
.login-box .brand{margin-bottom:36px}
.login-box h2{font-size:30px;margin:0}
.login-box>p{color:var(--muted)}
.login-box form{display:flex;flex-direction:column;gap:17px;margin:26px 0}
.login-box label{font-size:12px;font-weight:600}
.login-box input{padding:14px;border-radius:10px}
.login-box .primary{height:48px;font-size:13px}
.login-links{display:flex;justify-content:space-between}
.login-links a{color:#315886;text-decoration:none;font-weight:600}
@media(max-width:850px){.profile-grid,.settings-grid{grid-template-columns:1fr}
.span2{grid-column:auto}
.form-grid.four{grid-template-columns:1fr 1fr}
.login-shell{grid-template-columns:1fr}
.login-showcase{display:none}
.auth-pro{background:#eef3fb}
.profile-top{grid-template-columns:1fr 1fr}
.profile-top>.brand{display:none}
}
@media(max-width:560px){.form-grid,.form-grid.four,.terms{grid-template-columns:1fr}
.terms span:nth-child(odd){border-right:0}
.letter-page{padding:0}
.letter{padding:30px 22px}
.letter header button{display:none}
.profile-hero{align-items:flex-start;flex-wrap:wrap}
.hero-actions{margin-left:0;width:100%}
.hero-actions button{width:100%}
}
@media print{.letter-page{padding:0;background:#fff}
.letter{box-shadow:none;min-height:0}
.letter header button{display:none}
}
.sidebar{box-shadow:8px 0 35px rgba(7,23,44,.12)}
.sidebar .brand img{width:46px;height:46px}
.sidebar nav a{font-size:12px}
.sidebar nav i{width:24px;text-align:center}
.topbar{box-shadow:0 3px 15px rgba(17,34,58,.035)}
.stats article,.panel,.employee-grid article{box-shadow:0 8px 30px rgba(15,35,65,.045);border-radius:13px}
.employee-grid article{transition:.2s ease}
.employee-grid article:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,35,65,.1)}
.employee-grid article>a{display:block;margin-top:14px}
.application-list article{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:12px;display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:center;box-shadow:0 7px 25px rgba(15,35,65,.04)}
.application-list article>form{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding-top:14px;border-top:1px solid var(--border)}
.application-list article>form input,.application-list article>form select{min-width:0;padding:10px;border:1px solid var(--border);border-radius:8px}
.application-list article>form button{background:var(--navy);color:#fff;border:0;border-radius:8px}
.application-files{display:flex;gap:6px}
.application-files a{background:#eef3ff;color:#2454ad;padding:7px 10px;border-radius:7px;text-decoration:none}
@media(max-width:900px){.application-list article>form{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.application-list article{grid-template-columns:auto 1fr}.application-files{grid-column:1/-1}.application-list article>form{grid-template-columns:1fr}}