
:root{
  --navy:#052a5d; --blue:#0758c9; --red:#e51f2b; --green:#15803d;
  --purple:#6d28d9; --pink:#db2777; --teal:#0891b2; --gold:#d99400;
  --light:#f5f8fc; --text:#12213f; --white:#fff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:var(--light);line-height:1.55}
a{text-decoration:none;color:inherit}
header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:5}
.nav{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 22px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}

nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;flex-wrap:wrap}
nav a:hover,.active{color:#ffdd57}
.btn{display:inline-block;padding:12px 20px;border-radius:7px;background:var(--blue);color:#fff;font-weight:700}
.btn.outline{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn.red{background:var(--red)}
.hero{background:linear-gradient(120deg,#fff 38%,#eaf2ff);padding:64px 22px}
.hero-inner{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.hero h1{font-size:48px;line-height:1.08;margin:0 0 18px}
.hero h1 span{color:var(--red)}
.hero-panel{background:var(--navy);color:#fff;border-radius:18px;padding:28px;box-shadow:0 10px 30px #0002}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:25px}
.section{max-width:1200px;margin:auto;padding:48px 22px}
.section h2{font-size:34px;margin-top:0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border-radius:14px;padding:22px;box-shadow:0 6px 20px #10244a14;border-top:5px solid var(--blue)}
.card h3{margin-top:8px}
.icon{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:30px;background:var(--blue)}
.card-link{display:inline-block;margin-top:12px;color:var(--blue);font-weight:700}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.banner{background:var(--navy);color:#fff;border-radius:14px;padding:30px}
footer{background:var(--navy);color:#fff;margin-top:44px}
.footer-inner{max-width:1200px;margin:auto;padding:32px 22px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px}
.small{font-size:14px;opacity:.9}
.page-hero{background:linear-gradient(135deg,var(--navy),#0b4c9f);color:#fff;padding:55px 22px}
.page-hero>div{max-width:1100px;margin:auto}
.content{max-width:1000px;margin:auto;padding:45px 22px}
.list{padding-left:20px}
.contact-form{display:grid;gap:14px}
input,textarea,select{width:100%;padding:13px;border:1px solid #b8c4d8;border-radius:7px;font:inherit}
textarea{min-height:140px}
.notice{background:#fff7d6;border-left:5px solid var(--gold);padding:15px;border-radius:6px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}.hero-inner,.two-col,.footer-inner{grid-template-columns:1fr}.hero h1{font-size:38px}}
@media(max-width:560px){.grid{grid-template-columns:1fr}.nav{align-items:flex-start;flex-direction:column}.hero h1{font-size:32px}}

.brand-logo{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:50%;
  display:block;
  flex:0 0 58px;
  border:2px solid rgba(255,255,255,.9);
}

.auth-wrap{max-width:760px;margin:50px auto;padding:0 20px}
.auth-card{background:#fff;padding:30px;border-radius:14px;box-shadow:0 8px 30px rgba(5,42,93,.12)}
.auth-card h1{margin-top:0}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.auth-card label{font-weight:700;display:block;margin-bottom:5px}
.auth-card input,.auth-card select,.auth-card textarea{width:100%;padding:12px;border:1px solid #bcc8da;border-radius:7px}
.auth-card button{border:0;cursor:pointer}
.alert{padding:13px 15px;border-radius:7px;margin:15px 0}
.alert-success{background:#e8f7ed;color:#11632e}
.alert-error{background:#fdeaea;color:#9c1c1c}
.portal-nav{background:#eef4fd;padding:13px;border-radius:8px;margin-bottom:20px}
.portal-nav a{font-weight:700;margin-right:16px;color:#0758c9}
.file-list{width:100%;border-collapse:collapse}
.file-list th,.file-list td{padding:11px;border-bottom:1px solid #dce4ef;text-align:left}
@media(max-width:700px){.auth-grid{grid-template-columns:1fr}}
