body {

font-family:
'Segoe UI',
sans-serif;

background:#F5F7FA;

}

.harbor-brand {

background:
linear-gradient(
135deg,
#163A5F,
#2F6B8F
);

display:flex;
align-items:center;
justify-content:center;

color:white;

}

.brand-content {

text-align:center;

}

.logo {

width:140px;

margin-bottom:20px;

}

.brand-content h1 {

font-size:4rem;
font-weight:700;

}

.brand-content p {

font-size:1.2rem;
opacity:.85;

}

.login-card {

width:450px;

padding:40px;

background:white;

border-radius:20px;

box-shadow:
0 20px 40px
rgba(0,0,0,.10);

}

.btn-harbor {

background:#163A5F;

color:white;

padding:12px;

font-weight:600;

}

.btn-harbor:hover {

background:#2F6B8F;

color:white;

}

:root {

--harbor-navy:#163A5F;
--harbor-ocean:#2F6B8F;
--harbor-seafoam:#5FA8A0;
--harbor-bg:#F5F7FA;

}

body {

font-family:'Inter',sans-serif;
background:var(--harbor-bg);

}

.sidebar {

position:fixed;
left:0;
top:0;

width:280px;
height:100vh;

background:#fff;

border-right:1px solid #e9ecef;

padding:24px;

}

.content {

margin-left:280px;
padding:100px 30px 30px;

}

.topbar {

position:fixed;

left:280px;
right:0;
top:0;

height:75px;

background:#fff;

display:flex;
justify-content:space-between;
align-items:center;

padding:0 30px;

border-bottom:1px solid #e9ecef;

z-index:1000;

}

.metric-card {

background:white;

padding:25px;

border-radius:18px;

box-shadow:
0 10px 30px rgba(0,0,0,.05);

}

.dashboard-card {

background:white;

padding:25px;

border-radius:18px;

box-shadow:
0 10px 30px rgba(0,0,0,.05);

}