:root { --ink:#102633; --blue:#006b87; --blue-dark:#004e65; --mist:#edf4f6; --line:#d8e3e7; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font:16px/1.5 "Segoe UI",Arial,sans-serif; background:var(--mist); }
.login-page { min-height:100vh; display:grid; place-items:center; padding:28px; background:linear-gradient(135deg,#e7f2f5,#fff 55%,#dbecef); }
.login-card { width:min(460px,100%); padding:38px; background:var(--white); border-radius:18px; box-shadow:0 18px 55px #16364525; }
.logo { display:block; width:calc(100% + 76px); height:50px; max-width:none; max-height:none; margin:-38px -38px 24px; object-fit:cover; object-position:72% center; }
.eyebrow { margin:0 0 6px; color:var(--blue); font-size:.8rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
h1 { margin:0 0 10px; font-size:clamp(1.7rem,4vw,2.25rem); line-height:1.2; }
.intro { margin:0 0 25px; color:#526671; }
label { display:block; margin:15px 0 6px; font-weight:600; }
input { width:100%; min-height:44px; padding:10px 12px; border:1px solid #b9cbd1; border-radius:8px; color:var(--ink); font:inherit; }
input:focus { outline:3px solid #8ed4e3; border-color:var(--blue); }
button { min-height:44px; padding:0 20px; border:0; border-radius:8px; background:var(--blue); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
button:hover { background:var(--blue-dark); }
form button { width:100%; margin-top:22px; }
.hint { margin:24px 0 0; color:#657680; font-size:.88rem; }
.alert { padding:11px 13px; background:#fff0ed; border-left:4px solid #c5462e; border-radius:4px; color:#852714; }
.site-header { position:relative; width:100%; background:#0875a5; box-shadow:0 2px 12px #16364525; }
.brand { display:block; color:#fff; text-decoration:none; }
.brand img { display:block; width:100%; min-height:110px; max-height:210px; object-fit:cover; object-position:center; }
.brand span { display:none; }
.account { position:absolute; top:22px; left:max(24px,calc((100% - 1180px)/2)); display:flex; align-items:center; gap:14px; color:#fff; font-size:.95rem; font-weight:600; text-shadow:0 1px 2px #003b53; }
.account a { padding:7px 11px; border:1px solid #ffffffaa; border-radius:6px; color:#fff; font-weight:700; text-decoration:none; }
.account a:hover { background:#ffffff20; }
.content { width:min(1180px,100%); margin:0 auto; padding:46px 24px; }
.search { margin:30px 0 22px; padding:20px; background:#fff; border:1px solid var(--line); border-radius:12px; }
.search label { margin-top:0; }
.search div { display:flex; gap:10px; }
.search button { width:auto; margin:0; }
.table-card { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 4px 16px #16364510; }
table { width:100%; border-collapse:collapse; }
th,td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); }
th { background:#f5fafb; color:#415761; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#f8fcfd; }
.number { text-align:right; font-variant-numeric:tabular-nums; }
.empty { padding:30px; text-align:center; color:#657680; }
@media (max-width:620px) { .logo { height:42px; } .brand img { min-height:90px; height:120px; object-fit:cover; object-position:68% center; } .account { top:12px; left:15px; right:15px; justify-content:space-between; gap:8px; font-size:.82rem; } .content { padding:32px 15px; } .search div { flex-direction:column; } .search button { width:100%; } th,td { padding:11px 10px; } }