:root{
  --green-950:#062f1c;
  --green-900:#0a4228;
  --green-800:#0f6338;
  --green-700:#158044;
  --green-100:#e7f5eb;
  --green-50:#f4faf5;
  --orange:#ef861f;
  --ink:#142219;
  --muted:#5d6d63;
  --line:#d7e5da;
  --danger:#a5322a;
  --shadow:0 22px 60px rgba(7,58,31,.13);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
}
*{box-sizing:border-box}
html{min-height:100%;background:#edf6f0}
body{
  min-height:100vh;
  margin:0;
  background:
    radial-gradient(circle at 100% 0,rgba(74,192,112,.16),transparent 34rem),
    radial-gradient(circle at 0 100%,rgba(239,134,31,.10),transparent 30rem),
    linear-gradient(180deg,#f9fcfa,#edf6f0);
}
a{color:var(--green-800)}
button,input,select{font:inherit}
.portal-shell{width:min(1120px,calc(100% - 28px));margin:auto}
.portal-top{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 0;
}
.portal-brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--green-950);
  font-weight:950;
}
.portal-brand img{
  width:54px;height:54px;border-radius:14px;object-fit:contain;background:#fff;
  border:1px solid var(--line);box-shadow:0 6px 18px rgba(7,58,31,.08);
}
.portal-brand small{display:block;color:var(--muted);font-weight:700}
.portal-back{
  padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;
  text-decoration:none;font-weight:900;
}
.portal-main{padding:28px 0 72px}
.portal-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
  gap:22px;align-items:stretch;
}
.portal-hero,.portal-card{
  background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);
}
.portal-hero{
  padding:clamp(28px,5vw,58px);
  background:linear-gradient(145deg,#fff 0,#fbfefb 65%,#ecf8ef 100%);
}
.portal-card{padding:clamp(22px,4vw,38px)}
.portal-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;
  background:var(--green-100);color:var(--green-800);font-size:.82rem;font-weight:950;
  text-transform:uppercase;letter-spacing:.06em;
}
.portal-hero h1{
  font-size:clamp(2.4rem,6vw,5.2rem);line-height:.95;letter-spacing:-.06em;
  margin:20px 0 18px;
}
.portal-hero p{font-size:1.08rem;line-height:1.7;color:var(--muted);max-width:700px}
.portal-points{display:grid;gap:11px;margin:24px 0 0;padding:0;list-style:none}
.portal-points li{display:flex;gap:10px;align-items:flex-start}
.portal-points li:before{
  content:"✓";display:grid;place-items:center;min-width:27px;height:27px;border-radius:9px;
  background:var(--green-100);color:var(--green-800);font-weight:950;
}
.portal-card h2{font-size:1.7rem;margin:6px 0 8px;letter-spacing:-.03em}
.portal-card > p{color:var(--muted);line-height:1.55}
.field{display:grid;gap:7px;margin:16px 0}
.field label{font-weight:900}
.field input,.field select{
  width:100%;padding:13px 14px;border:1px solid #b9cbbd;border-radius:11px;
  background:#fff;color:var(--ink);outline:none;
}
.field input:focus,.field select:focus{
  border-color:var(--green-700);box-shadow:0 0 0 4px rgba(21,128,68,.12);
}
.field small{color:var(--muted);line-height:1.4}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px 16px;border:0;border-radius:12px;
  background:var(--green-700);color:#fff;text-decoration:none;font-weight:950;
  cursor:pointer;
}
.btn:hover,.btn:focus{background:var(--green-800);outline:3px solid rgba(21,128,68,.15);outline-offset:2px}
.btn.secondary{background:#fff;color:var(--green-900);border:1px solid var(--line)}
.btn.orange{background:var(--orange)}
.btn.danger{background:var(--danger)}
.portal-links{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;
  font-size:.92rem;font-weight:800;
}
.notice{padding:13px 14px;border-radius:12px;margin:14px 0;font-weight:800;line-height:1.45}
.notice.error{background:#fde8e5;color:#8a2720}
.notice.success{background:#e4f5e9;color:#165e35}
.notice.info{background:#edf4ff;color:#234f84}
.role-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:24px}
.role-card{
  display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:20px;
  background:#fff;text-decoration:none;box-shadow:0 10px 30px rgba(7,58,31,.07);
}
.role-card:hover{transform:translateY(-2px);border-color:#9dcdab}
.role-icon{font-size:2.1rem}
.role-card h2{margin:10px 0 5px}
.role-card p{color:var(--muted);line-height:1.55;flex:1}
.role-card strong{color:var(--green-700)}
.dashboard{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start;
}
.sidebar,.content-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
}
.sidebar{padding:18px;position:sticky;top:18px}
.sidebar a{
  display:block;padding:11px 12px;border-radius:10px;text-decoration:none;font-weight:850;
}
.sidebar a:hover{background:var(--green-100)}
.content-card{padding:25px;margin-bottom:18px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--green-50)}
.stat strong{display:block;font-size:1.65rem;color:var(--green-800)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 9px;border-bottom:1px solid #e4ece6;vertical-align:top}
th{color:#466051}
.inline-form{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.inline-form input,.inline-form select{padding:8px 9px;border:1px solid #bdcbbf;border-radius:8px}
.inline-form .btn{width:auto;padding:9px 11px}
.portal-footer{
  padding:28px 0 40px;border-top:1px solid rgba(215,229,218,.9);
  color:var(--muted);font-size:.9rem;
}
.portal-footer-inner{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.role-employee .portal-kicker{background:#e7f0ff;color:#244f82}
.role-admin .portal-kicker{background:#fff0de;color:#8c4d08}
@media(max-width:850px){
  .portal-grid,.dashboard{grid-template-columns:1fr}
  .role-cards,.stats{grid-template-columns:1fr}
  .sidebar{position:static}
}
@media(max-width:560px){
  .portal-top{align-items:flex-start;flex-direction:column}
  .portal-main{padding-top:10px}
  .portal-hero,.portal-card{border-radius:20px}
  .portal-hero h1{font-size:3.2rem}
  .portal-links{flex-direction:column}
}